Explore web accessibility

Use semantic button tags instead of divs for interactivity

Many times, when we have some requirement where we need to show beautiful buttons, we end up using div tags instead of button. And this could lead to highly inaccessible code if we do not think about assistive tech users.

HTML 5 has a semantic element called button which should be used for any click through action.

Alternatively, if we really need to use any non-semantic tag instead of button tag, we need to provide extra attributes and event handlers to make to accesible to assistive tech users.

Jump to code tips to make accessible buttons

Demo:

Inaccessible button 'Login'

Accessible button 2

How to create accessible buttons with divs (or any other non-semantic HTML)?

Please note that always try to use button tags to create buttons. But, for already existing websites and applications, if you have used div or span to create buttons, and if you find it expensive to use a button tag to fix the accessibility for those elements, you can use the steps as described in below list to make those buttons accessible.

tab-index: to make the button reachable by keyboard through tab key
keydown event listener: to enable triggering the button action from keyboard
role: to enable acreen readers understand that it is a button
aria-attributes if needed
For example: If the button contains only icon or image without any text, we need to add aria-label so that screen readers and other assistive technologies can understand what exactly does that button do. Check demo for icon only button.

Sample code for buttons with label:

HTML

  <div
    tab-index="0"
    role="button"
    id="acc-button"
    class="div-as-button"
  >
    Login
  </div>

JavaScript

  const buttonEle = document.getElementById("acc-button");

  buttonEle.addEventListener("click", () => {
      // your code here on what should happen when button is clicked
    }
  );

  buttonEle.addEventListener("keydown", (event) => {
    if (event.key === ' ' || event.key === 'Enter') {
      // your code here on what should happen when button is pressed

      // prevent default so that pressing spacebar key does not scroll the content
      event.preventDefault();
    }
  });

Demo for icon only buttons:

Toggle button for enabling dark/light mode for webpage or application

Sample code using aria attributes:

HTML

<button aria-label="Enable light mode" id="toggle-icon">
      <i className="fa fa-lightbulb-o" aria-hidden="true"></i>
  </button>

JavaScript

const toggleButton = document.getElementById("toggle-icon");
const toggleIcon = toggleButton.children[0];

toggleButton.addEventListener("click", event => {
    // toggle aria-label and icon class based on current mode
    if (toggleButton.getAttribute('aria-label') === 'Enable light mode') {
      toggleButton.setAttribute('aria-label', 'Enable dark mode');
      toggleIcon.classList.remove("fa-lightbulb-o");
      toggleIcon.classList.add("fa-moon-o");
    } else {
      toggleButton.setAttribute('aria-label', 'Enable light mode');
      toggleIcon.classList.remove("fa-moon-o");
      toggleIcon.classList.add("fa-lightbulb-o");
    }
    // more code here
    
});