FrançaisGet started

ARIA roles

Landmark and component roles, ARIA properties and states (aria-label, aria-labelledby, aria-expanded, aria-hidden, aria-live), accessible name, and the first rule: a native element before ARIA.

  • 24 cards
  • 3 topics
  • Free
Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

  1. Concepts
  2. Questions
  3. Sort and link

A few cards from the deck

  • ARIA role: what is it?

    Show the answer

    The role attribute, which tells assistive technologies what an element is (button, tab, navigation, alert) when HTML alone does not.

    A role changes neither looks nor behaviour: role="button" on a div announces it as a button, but makes it neither focusable nor keyboard-activatable.

  • What accessible name does a screen reader give this button?

    ```html
    <span id="titre">Supprimer le compte</span>
    <button aria-label="Corbeille" aria-labelledby="titre">
    🗑
    </button>
    `

    • Delete account
    • Trash
    • 🗑
    • Trash Delete account
    Show the answer

    Delete account

    aria-labelledby comes before aria-label in the name computation, and aria-label before the content. The name is therefore the text of the #titre element.

  • The first rule of ARIA: if a … HTML element already does the job, use it rather than adding an ….

    Show the answer

    The first rule of ARIA: if a native HTML element already does the job, use it rather than adding an ARIA role.

    <button> brings the role, focus and Enter and Space activation by itself; <div role="button"> forces you to code it all by hand.

  • Accessible name: what is it?

    Show the answer

    The text by which an assistive technology refers to an element, computed from its label, its content or its attributes.

    It is computed in this order: aria-labelledby, then aria-label, then the native content or label (label, alt, text), then title. A button with no name is announced as just "button".

  • What is wrong with this code from a keyboard and screen reader viewpoint?

    ```html
    <a href="/panier" aria-hidden="true">Panier</a>
    `

    • The link is no longer displayed on screen
    • The link stays focusable but goes silent for the screen reader
    • The link is no longer focusable by keyboard
    • The link is announced as a button
    Show the answer

    The link stays focusable but goes silent for the screen reader

    aria-hidden only acts on the accessibility tree: display and focus do not change. Tab then stops on an element the screen reader does not describe. To hide for everyone, use hidden or display: none.

Study this deck