Accessibility

[jeanpan]

• Using a logical tab order for tabbed navigation

tabindex="0": inserts an element into the natural tab order. The element can be focused by pressing the Tab key, and the element can be focused by calling its focus() method.
tabindex="-1": removes an element from the natural tab order, but the element can still be focused by calling its focus() method.
tabindex="5": any tabIndex greater than 0 jumps the element to the front of the natural tab order. ( ANTI-PATTERN )

• Using skip navigation links to bypass navbars and asides

e.g. https://github.com/. When you click on the tab key, there is a skip to content nav showing on the top left of nav bar.

<a class="skip-link" href="#maincontent">Skip to main content</a>

Skip navigation links should be put in the first order of the page, so when users use Tab to navigate the page, they can first focus on the skip navigation links.

• Avoiding hidden content on the page that impedes tab navigation

Once you know which off-screen element is being focused, you can set it to display: none or visibility: hidden, and then set it back to display: block or visibility: visible before showing it to the user.

However, an element that is not visually rendered but not explicitly hidden is still included in the accessibility tree. One common technique is to include screen reader only text in an element that is absolute positioned offscreen.

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

• Using heading tags that provide a logical page structure

• Using text alternatives to visual content, such as alt, <label>, aria-label, and aria-labelledby

ARIA ( Web Accessibility Initiative's Accessible Rich Internet Applications specification ) is good for bridging areas with accessibility issues that can’t be managed with native HTML. It works by allowing you to specify attributes that modify the way an element is translated into the accessibility tree.

aria-label can add extra label and description text that is only exposed to assistive technology APIs.

A role in accessibility terms amounts to a shorthand indicator for a particular UI pattern. ARIA provides a vocabulary of patterns we can use via the role attribute on any HTML element.

• Applying color contrast to all elements and following accessibility best practices

• Sending timely alerts for urgent messages using aria-live

• Using semantic markup to keep content and presentation separate when appropriate