5 exercises on web accessibility terms — ARIA, semantics, and assistive tech.
0 / 5 completed
1 / 5
What is ARIA?
ARIA (Accessible Rich Internet Applications) is a set of HTML attributes — role, aria-* states and properties — that convey the meaning and state of UI components to assistive technologies like screen readers, especially for dynamic or custom widgets that native HTML cannot express. For example aria-expanded, aria-label, and role="dialog". The first rule of ARIA, however, is "don't use ARIA if a native element will do," because semantic HTML already carries accessibility for free. ARIA augments, but cannot replace, proper keyboard behavior and focus management.
2 / 5
Why does semantic HTML matter for accessibility?
Semantic HTML means using elements according to their meaning — <button>, <nav>, <header>, <main>, headings, and lists — rather than generic <div>s. These native elements come with built-in roles, keyboard interaction, and focus behavior that screen readers and other assistive technologies understand without extra work. A real <button> is focusable, announces itself as a button, and fires on Enter/Space automatically — whereas a styled <div> needs ARIA, tabindex, and key handlers to replicate that. Semantic markup is the foundation of accessibility, and ARIA only patches what HTML cannot express.
3 / 5
What is a focus trap?
A focus trap confines keyboard focus to a specific region — most importantly an open modal dialog — so that pressing Tab and Shift+Tab cycles only through the elements inside it and never lands on the obscured background content. Without a trap, keyboard and screen-reader users can tab "behind" a modal into hidden, non-interactive page elements, which is disorienting. A correct implementation moves focus into the dialog on open, loops at the boundaries, restores focus to the triggering element on close, and lets Escape dismiss it.
4 / 5
What is contrast ratio?
Contrast ratio measures the difference in relative luminance between foreground text and its background, expressed as a ratio from 1:1 (no contrast) to 21:1 (black on white). The WCAG guidelines require at least 4.5:1 for normal-size text and 3:1 for large text to meet level AA, ensuring readability for users with low vision or color deficiencies. Sufficient contrast is one of the most common and impactful accessibility fixes. Tools and browser devtools can compute the ratio so you can verify color choices against the thresholds.
5 / 5
What is a screen reader?
A screen reader is assistive technology that programmatically reads the content and structure of a user interface aloud (or outputs it to a refreshable braille display), enabling blind and low-vision users to navigate. It relies on the accessibility tree the browser builds from your HTML — roles, names, states, and relationships — to announce elements meaningfully and let users jump between headings, landmarks, links, and form controls. Examples include JAWS, NVDA, and VoiceOver. Because screen readers depend on correct semantics and ARIA, sloppy markup directly degrades their usability.