Skip to main content
Dev Notes

ARIA Patterns and Practices Cheatsheet

Dev Notes Disclaimer: Each artile in the Dev Notes section of my webiste may or may not be unfinished work. I don't always have time to write a full post. If you see something that looks like a half-baked idea, it probably is! If you have any questions or suggestions, feel free to reach out.

ARIA (short for Accessible Rich Internet Applications) is basically HTML's way of saying, "Hey assistive tech, I've got some extra context for you!" It's a bunch of attributes you sprinkle into your markup to help users with disabilities better understand and navigate your app.

This cheatsheet isn't trying to be the entire WAI-ARIA Bible—it's more like a sticky note stuck to your monitor that reminds you what aria-expanded actually does. It focuses on the common stuff you'll hit regularly: what roles go where, what attributes to slap on, how users are expected to move around with a keyboard, and what's supposed to happen when stuff gets toggled, selected, or otherwise activated.

When in doubt (or when this page isn't cutting it), the WAI-ARIA Authoring Practices Guide has all the official words and wisdom. But if you're mid-sprint and your brain just went poof, this page is here to save the day.