Accessibility (a11y) Cheat Sheet
Quick reference guide for Web Accessibility (a11y): ARIA roles, screen reader attributes, focus management, and keyboard navigation.
Web & Network
accessibility
a11y
aria
Web Accessibility (a11y) ensures that websites and applications are usable by everyone, including people with visual, auditory, motor, or cognitive disabilities.
Essential ARIA Attributes
Table
| ARIA Attribute | Purpose | Example Usage |
|---|---|---|
aria-label | Provide invisible accessible name string | <button aria-label="Close dialog">X</button> |
aria-labelledby | Reference ID of element acting as label | <div aria-labelledby="heading-id"> |
aria-describedby | Reference ID of extra hint text element | <input aria-describedby="hint-id" /> |
aria-expanded | Indicate open/closed state of dropdowns | <button aria-expanded="true">Menu</button> |
aria-hidden | Hide decorative element from screen readers | <svg aria-hidden="true">...</svg> |
aria-live | Announce dynamic updates (polite / assertive) | <div aria-live="polite">Item saved</div> |
Accessible Form Controls & Landmarks
html
<!-- Semantic Landmark Navigation -->
<header role="banner">
<nav aria-label="Main Navigation">
<ul><li><a href="/">Home</a></li></ul>
</nav>
</header>
<main id="main-content">
<!-- Accessible Button Trigger -->
<button type="button" aria-haspopup="dialog" aria-controls="modal-1">
Open Settings
</button>
</main>
Common Pitfalls & Tips
[!WARNING] Do not use
<div>or<span>as click triggers without addingrole="button",tabindex="0", and keydown event handlers for Space/Enter keys!
[!TIP] Always prefer native semantic HTML elements (
<button>,<header>,<nav>,<main>) over ARIA attributes whenever possible.