Learn Web Accessibility and ARIA: Roles, States, Properties and 3 Cards to Fix
Study ARIA with 58 real flashcards: roles, aria-live, aria-expanded, tabindex, focus traps, WCAG POUR, and the WCAG 2.2 target-size rule the deck gets wrong.
Studying. But it's also a video game. 🎮
Flashcards, quizzes and games that make you actually remember.
Posted by
FLIP IT TeamRelated reading
Learn Vue.js Core Concepts: 30 Flashcards on Reactivity, Directives and the Vue Ecosystem
Learn Vue.js with deck XT7941: 30 flashcards on directives, virtual DOM, reactivity, computed vs watch, Pinia, Vue Router and Vite, plus the cards to update.
OWASP Top 10 Flashcards: Study the 2021 List and Update It for 2025
Study OWASP Top 10 with 35 flashcards on injection, SSRF, SAST, DAST, IAST and RASP, then add the missing #1 risk and the new OWASP 2025 ranking.
Learn CSS Flexbox and Grid in German: 58 Flashcards on Hauptachse, Spuren and Zellen
Learn CSS Flexbox and Grid with German backs: 58 real flashcards on Hauptachse, Querachse, Spur and Zelle, plus the Zeile trap and three backs to fix.
ARIA is easy to memorize and easy to misuse. The attributes themselves are short (aria-expanded, aria-live, role="dialog"), but the hard part is knowing when you shouldn't use them, and what each one does not do for you. This guide shows how to learn the 58 cards of the Flip It deck Web Accessibility: ARIA (code SN8451) and where to correct a few backs along the way.
Study this deck: Web Accessibility: ARIA
1 / 10Web Accessibility
Tap the card for the answer · swipe right if you knew it, left if not
Sample cards
| Front | Back |
|---|---|
| First rule of ARIA | If you can use a native HTML element or attribute with built-in semantics, do that instead of re-purposing an element with ARIA. |
| ARIA states | Dynamic properties that change during interaction: aria-expanded, aria-checked, aria-selected, aria-pressed. |
| Aria-live | Values: off, polite (wait for pause), assertive (interrupt). For notifications, status updates. |
| Aria-disabled | Visible but disabled. Unlike HTML disabled, doesn't prevent focus. |
| Tabindex | 0: natural tab order, -1: focusable via JS only, >0: explicit order (avoid). |
| Why use semantic HTML instead of ARIA? | ARIA only adds semantics — you must implement behavior. |
| 4 WCAG principles | POUR: Perceivable, Operable, Understandable, Robust. |
| role="alert" vs aria-live="assertive" | role="alert" has implicit aria-live="assertive" plus semantic meaning. |
Everything the deck covers
Roles: button, navigation, main, banner, contentinfo, alert, dialog, presentation / none. States: aria-expanded, aria-pressed (mixed), aria-checked, aria-selected, aria-current (page, step, date), aria-disabled, aria-invalid, aria-modal. Properties: aria-label, aria-labelledby, aria-describedby, aria-hidden, aria-required, aria-owns, aria-controls. Keyboard: tabindex, focus management, focus trap, skip navigation, :focus vs :focus-visible. Plus alt text, color contrast (4.5:1 / 3:1), WCAG levels A / AA / AAA, screen readers (JAWS, NVDA, VoiceOver, TalkBack), landmarks, heading structure, the lang attribute, accessible name calculation, prefers-reduced-motion, and testing with axe, WAVE and Lighthouse.
Three cards to rewrite before you drill
- Cards 49 and 56 contradict each other. Card 49 lists the accessible name sources as "aria-label, aria-labelledby, content, alt, title"; card 56 gives "aria-labelledby → aria-label → native label → title → placeholder". Card 56 is right: aria-labelledby wins over aria-label. Delete card 49's order or fix it to match.
- Card 13 says role="dialog" "traps focus". It doesn't — card 33 of the same deck is the correct principle: ARIA adds semantics, never behavior. The trap comes from your JavaScript, or for free from a native
<dialog>opened withshowModal(). Rewrite the back as "you must trap focus…". - Cards 46-47 say WCAG requires 44×44 px touch targets. 44×44 is criterion 2.5.5, level AAA. WCAG 2.2 (October 2023) added 2.5.8 Target Size (Minimum) at level AA: 24×24 CSS px (or enough spacing). Since AA is what laws such as the European Accessibility Act (applied from June 2025) point to, put both numbers on the card.
Tip: sort every attribute into three bins
Make a quick test when you review: is this attribute a role (what it is), a state (changes on interaction, so your script must update it) or a property (set once)? Cards 19-26 are the trap: aria-expanded, aria-pressed, aria-checked and aria-selected are states you have to toggle in code; aria-required and aria-describedby are set and forgotten. If you can't say who updates the attribute, you haven't learned the card.
Then pair the landmark roles with their native elements (main ↔ <main>, banner ↔ top-level <header>, contentinfo ↔ top-level <footer>, navigation ↔ <nav>) — every one of those pairs is the first rule of ARIA in action.
The native elements themselves are drilled in our HTML Tags and Attributes study guide.
Open SN8451 — Web Accessibility: ARIA in the library on Flip It.
Ready to learn faster? 🚀
Join FLIP IT for free and turn studying into a game.