Skip to main content

a11y

ARIA​

Rules​

  1. Use semantic HTML elements and don't override their default HTML roles by using ARIA roles.

  2. No ARIA is better than bad ARIA.

  3. Always support keyboard navigation. Add tabindex= "0" to any element that natively cannot receive focus to make it focusable. Avoid using tabindex > 0 to prevent potential keyboard focus order issues.

    <span role="button" tabindex="0">Submit</span>
    <!-- Don't do this -->
    <span role="button" tabindex="1">Submit</span>

  4. Don't hide focusable elements

Roles​

Roles define what an element is or does on the page or app.

<!-- This should be a <button> -->
<div role="button">Read more</div>

States​

States define the current condition or data values associated with the element.

<!-- Only invisible to screen readers -->
<div aria-hidden="true">Read more</div>

Properties​

Properties define the characteristics or relationships to an object.

<button aria-label="Read more about us">Read More</button>

Visually hide content (and make it available only for screen readers)​

  • width: 0; height; 0 is not recommended because search engines might penalize this thinking it has a malicious intention, like keyword stuffing. -> Use width: 1px; height: 1px and CSS.

  • display: none; visibility: hidden; hidden attribute hide content from the user AND screen readers.

  • Elements using sth like position: absolute; left: -99999px or text-indent: -9999px is not recommended because although the content is hided, users can still focus them using keyboard.

  • Should use approaches from mature CSS frameworks, which have been battle-tested on many websites, e.g. Tailwind

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }