Web Accessibility (a11y) for Developers

Semantic HTML is the Foundation

The easiest way to ruin accessibility is building a button out of a <div onClick={...}>. A screen reader does not know a div is clickable. A keyboard user cannot press "Tab" to reach it, nor press "Enter" to trigger it. Using native semantic elements (<button>, <nav>, <main>, <article>) gives you 80% of accessibility features for absolutely free.

ARIA Attributes: Handle with Care

Accessible Rich Internet Applications (ARIA) attributes are powerful, but the first rule of ARIA is: No ARIA is better than bad ARIA. Only use attributes like aria-hidden="true" or role="dialog" when you are building complex custom widgets that native HTML cannot handle. Misusing a role can completely blind a screen reader to an entire section of your site.

The Keyboard Trap

Unplug your mouse and try to navigate your entire application using only the Tab, Shift+Tab, Space, and Enter keys. Ensure your focus indicators (the blue outline) are highly visible. If you open a modal, you must trap the keyboard focus inside that modal until it is closed, otherwise the user will tab out of the modal and get lost in the blurred background page.