Accessibility

with ReactJS

Accessibility

• Naming Things
• Tabbing Things

Naming Things

• HTML
• ARIA

Derived from an element’s:

• content
• attribute
• associated element

HTML

• Bullet One
• Bullet Two
• Bullet Three

ARIA

• aria-label
• aria-labelledby

ARIA trumps all; the accessible name provided with the native HTML will be overridden by the accessible name provided with ARIA.

ARIA

aria-label

aria-labelledby

<input type="search" aria-labelledby="this">
<button id="this">Search</button>

takes an id that is referenced else where

<button aria-label="Add Chamukos tequila to cart">Add to cart</button>

ARIA

roles

Resources

• https://webaim.org/articles/
• https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/