♿

Web Accessibility: ARIA

58 cards · 🇺🇸 English

ARIA roles, attributes, and accessible web development practices.

Study all 58 cards for free

Flashcards, quizzes, pixel-art games and a daily review that remembers for you.

Study this deck free

Try the first 10 cards

1 / 10
Question

Web Accessibility

Knew itLearning

Tap the card for the answer · swipe right if you knew it, left if not

Already have an account? Sign in

Cards

  1. 1Web Accessibility
    Designing and developing websites so people with disabilities can perceive, understand, navigate, interact with, and contribute to the web.
  2. 2ARIA
    Accessible Rich Internet Applications - a set of attributes that define ways to make web content and applications more accessible to people with disabilities.
  3. 3First 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.
  4. 4ARIA roles
    Define what an element is or does. Examples: role="button", role="navigation", role="alert". Communicate element purpose to assistive technologies.
  5. 5ARIA states
    Dynamic properties that change during user interaction. Examples: aria-expanded, aria-checked, aria-selected, aria-pressed.
  6. 6ARIA properties
    Attributes that define characteristics. Often less likely to change than states. Examples: aria-label, aria-labelledby, aria-describedby, aria-required.
  7. 7Role="button"
    Makes an element behave like a button. Use when creating custom buttons from divs/spans. Must handle keyboard (Space/Enter) and focus.
  8. 8Role="navigation"
    Identifies major navigation sections. Helps screen readers jump to navigation. Use on <nav> or main navigation containers.
  9. 9Role="main"
    Identifies main content area. Should be unique on page. Helps screen readers skip to main content. <main> element has this implicitly.
  10. 10Role="banner"
    Site-wide branding/header content. Typically contains logo, site title. <header> at document level has this implicitly.
  11. 11Role="contentinfo"
    Footer information. Copyright, privacy, terms. <footer> at document level has this implicitly.
  12. 12Role="alert"
    Important, time-sensitive message. Announced immediately to screen readers. For error messages, warnings. Use sparingly.
  13. 13Role="dialog"
    Modal window requiring user interaction. Traps focus within dialog. Must be closeable via keyboard (Escape).
  14. 14Aria-label
    Provides accessible name when visible label isn't available. Example: <button aria-label="Close">X</button>. Overrides element's text.
  15. 15Aria-labelledby
    References element(s) that label current element. Example: <input aria-labelledby="username-label">. Accepts multiple IDs (space-separated).
  16. 16Aria-describedby
    References element(s) providing additional description. Example: <input aria-describedby="password-hint">. For help text, error messages.
  17. 17Aria-hidden
    aria-hidden="true" hides element from assistive technologies (but not visually). Use for decorative icons, duplicated content.
  18. 18Aria-live
    Announces dynamic content changes. Values: off, polite (wait for pause), assertive (interrupt). For notifications, status updates.
  19. 19Aria-expanded
    Indicates whether collapsible content is expanded or collapsed. Values: true, false, undefined. Use on toggle buttons, accordions.
  20. 20Aria-pressed
    Toggle button state. Values: true (pressed), false (not pressed), mixed. For buttons that stay pressed.
  21. 21Aria-checked
    Checkbox or radio state. Values: true, false, mixed (indeterminate). Use with role="checkbox" or role="radio".
  22. 22Aria-selected
    Indicates current item in selectable list. Values: true, false. For tabs, listbox options, tree items.
  23. 23Aria-current
    Indicates current item within container. Values: page, step, location, date, time, true, false. For breadcrumbs, pagination.
  24. 24Aria-disabled
    Indicates element is visible but disabled. Unlike HTML disabled, doesn't prevent focus. Use when you need focusable disabled element.
  25. 25Aria-required
    Indicates form field is required before submission. Screen readers announce as required. HTML required is preferred when possible.
  26. 26Aria-invalid
    Indicates field contains error. Values: true, false, grammar, spelling. Pair with aria-describedby pointing to error message.
  27. 27Tabindex
    Controls keyboard focus. 0: in natural tab order, -1: not in tab order but focusable via JS, >0: explicit order (avoid).
  28. 28Keyboard navigation
    Allowing users to navigate and interact using only keyboard. Tab (next), Shift+Tab (previous), Enter/Space (activate), Arrows (within components).
  29. 29Focus management
    Programmatically moving focus for logical user experience. Example: open dialog → focus first input, close dialog → return focus to trigger.
  30. 30Focus trap
    Keeping keyboard focus within a container (modal). Tab cycles through modal elements, doesn't escape to page behind. Released when modal closes.

And 28 more cards. Study the whole deck free

Articles about this deck

More Programming decks

See all
Study all 58 cards free