EnglishCommencer

Les rôles ARIA

Rôles de repère et de composant, propriétés et états ARIA (aria-label, aria-labelledby, aria-expanded, aria-hidden, aria-live), nom accessible, et la première règle : un élément natif avant ARIA.

  • 24 cartes
  • 3 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier

Quelques cartes du deck

  • Rôle ARIA : de quoi s'agit-il ?

    Voir la réponse

    Attribut role qui dit aux aides techniques la nature d'un élément (bouton, onglet, navigation, alerte) quand le HTML seul ne le dit pas.

    Un rôle ne change ni l'apparence ni le comportement : role="button" sur un div l'annonce comme bouton, mais ne le rend ni focalisable ni activable au clavier.

  • Quel nom accessible un lecteur d'écran donne-t-il à ce bouton ?

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

    • Supprimer le compte
    • Corbeille
    • 🗑
    • Corbeille Supprimer le compte
    Voir la réponse

    Supprimer le compte

    aria-labelledby passe avant aria-label dans le calcul du nom, et aria-label avant le contenu. Le nom est donc le texte de l'élément #titre.

  • Première règle d'ARIA : si un élément HTML … fait déjà le travail, on l'utilise plutôt que d'ajouter un ….

    Voir la réponse

    Première règle d'ARIA : si un élément HTML natif fait déjà le travail, on l'utilise plutôt que d'ajouter un rôle ARIA.

    <button> apporte à lui seul le rôle, le focus et l'activation à Entrée et Espace ; <div role="button"> oblige à tout recoder à la main.

  • Nom accessible : de quoi s'agit-il ?

    Voir la réponse

    Texte par lequel une aide technique désigne un élément, calculé à partir de son étiquette, de son contenu ou de ses attributs.

    Il se calcule dans cet ordre : aria-labelledby, puis aria-label, puis le contenu ou l'étiquette natifs (label, alt, texte), puis title. Un bouton sans nom est annoncé « bouton » tout court.

  • Quel est le défaut de ce code du point de vue du clavier et du lecteur d'écran ?

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

    • Le lien n'est plus affiché à l'écran
    • Le lien reste focalisable mais devient muet pour le lecteur d'écran
    • Le lien n'est plus focalisable au clavier
    • Le lien est annoncé comme un bouton
    Voir la réponse

    Le lien reste focalisable mais devient muet pour le lecteur d'écran

    aria-hidden n'agit que sur l'arbre d'accessibilité : l'affichage et le focus ne changent pas. Tab s'arrête alors sur un élément que le lecteur d'écran ne décrit pas. Pour masquer pour tous, on utilise hidden ou display: none.

Réviser ce deck