Les noms accessibles dans tous leurs états

Le texte invisible

Le texte invisible est souvent intégré avec la classe CSS sr-only ou visually-hidden.
La particularité de cette class CSS fait que le texte est invisible à l’écran, mais reste perceptible par les lecteurs d’écrans.
Ici, nous n’utilisons pas de display: none; ou de visibility: hidden; car cela aurait pour effet de rendre le texte impossible à restituer par un lecteur d’écran.

Je vous invite à lire l’article de Gaël Poupard pour voir l’anatomie de cette classe en détail.

Avantages du texte invisible :

• Particulièrement robuste, il bénéficie d’une excellente (rétro)compatibilité avec les technologies d’assistance
• Si le CSS est désactivé, le texte invisible s’affiche
• Un utilisateur se servant de styles personnalisés peut choisir d’afficher le texte masqué
• Il se traduit via des outils de traduction en ligne (comme Google Translate par exemple)

Inconvénient : Cette méthode nécessite plus de code que l’ajout d’un attribut ARIA ou title, ce qui n’est pas forcément évident selon le développement.

Exemple d’utilisation :

    <a href="https://twitter.com/24joursdeweb" class="twitter">
        <span class="sr-only">24 jours de web sur Twitter</span>
    </a>
    

CSS est activé, seule l’icône Twitter est visible

CSS est désactivé, le texte de l’icône apparaît

Je préconise l’utilisation de cette technique car c’est celle qui offre la meilleure compatibilité.

Veillez à n’appliquer cette classe que sur du texte masqué. En effet, si elle est ajoutée sur un élément positionné en absolute, il peut y avoir des surprises.

Aria-labelledby / aria-describedby

La spécification ARIA (en anglais) précise que If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. (« Si le texte du libellé est visible à l’écran, les auteurs devraient utiliser aria-labelledby et ne devraient pas utiliser aria-label. »)

Cette alternative devrait donc être utilisée pour faire le lien entre un élément et un texte visible à l’écran.

Par exemple, sur une fenêtre modale :

    <dialog role="dialog" aria-labelledby="modalTitle">
        <h1 id="modalTitle">Titre de ma modale</h1>
        ...
    </dialog>
      

ou sur un élément graphique, ici un point rouge qui indique un retard de paiement :

    <button id="myAccount" aria-describedby="accountLabel dotTitle">
        <span id="accountLabel">Mon compte</span>
    </button>

    <h2 id="dotTitle" class="error">Retard de paiement</h2>

On peut lier plusieurs textes à un élément. aria-labelledby (comme aria-describedby), prennent une liste d’identifiants comme valeurs.

La restitution de l’exemple ci-dessus se fera dans l’ordre d’appel des identifiants ; ici, Mon compte retard de paiement.

À noter qu’aria-labelledby peut s’accompagner d’aria-describedby pour donner une explication plus fournie qu’un titre.

On le rencontre aussi sur les icônes SVG :

    <svg role="img" aria-labelledby="fb" version="1.1" 
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
         x="0px" y="0px" viewBox="0 0 48 48" xml:space="preserve">
        <title id="fb">Facebook</title>
            ...
    </svg>

Ses avantages sont :

• La simplicité à ajouter (plus qu’un texte en .sr-only)
• Cette technique a un bon support par les technologies d’assistance
• Les références aux textes (identifiants) peuvent être placées n’importe où dans la page
• S’agissant d’identifiants pointant vers du texte visible, la traduction est possible via des outils de traduction en ligne.

Si on peut parler d’inconvénient, c’est l’attribut qui a la plus haute priorité dans le calcul du nom accessible. Il faut bien tester sa restitution pour éviter des erreurs.

Ordre de restitution par les lecteurs d’écran

J’ai évoqué plusieurs fois une notion de priorité ou de calcul de nom accessible.

En effet, les navigateurs font un calcul pour savoir quel est le nom accessible d’un élément. Il faut donc être vigilant·e quant à l’utilisation des différentes techniques que je viens de lister.

Pour résumer la méthode de calcul (en anglais), aria-labelledby est prioritaire sur aria-label, qui lui-même est prioritaire sur du texte directement inséré dans un élément.

Par exemple :

    <button class="error-dot" aria-labelledby="dotTitle" aria-label="Attention"> mon bouton </button>
    <h2 id="dotTitle" class="error">Retard de paiement </h2>

Ici aria-labelledby est présent, le résultat restitué sera Retard de paiement

Dans l’exemple suivant, le texte Continuer sera complètement ignoré, au bénéfice de Continuer vers l’étape de paiement

    <button aria-label="continuer vers l’étape de paiement">
        Continuer
    </button>