Désactiver les liens

En discutant avec les collègues (👋 Fabien et Martin) j’ai pris conscience qu’un lien désactivé n’était pas forcement un simple texte, et qu’il y avait peut-être une sémantique plus riche à transmettre.

Voici différentes approches pour partager notre réflexion sur le sujet.

NB : nous allons parler ici de liens désactivés mais pas de liens actifs (qui eux mériteraient sans doute un aria-current).

Désactivation par CSS et HTML

Quelques styles graphiques revus, et un pointer-events: none suffisent à désactiver les liens à la souris mais ne suffisent pas pour les désactiver au clavier. De plus, ils continuent d’être restitués comme des liens (actifs) à travers une technologie d’assistance.

• Ajouter un attribut disabled côté HTML n’aurait aucun effet, il ne fonctionne qu’avec les éléments de formulaires.
• Un inert serait trop puissant puisqu’il supprimerait en plus de la navigation clavier, toute restitution du contenu.
• Un tabindex négatif combiné au pointer-events pourrait marcher mais ne permettrait pas pour autant d’être compris par les technologies d’assistance.

Ce tableau (en anglais) montre les possibilités et les impacts mais pour le moment, que des mauvaises pistes ici.

Suppression de l’élément a

C’était ma façon de faire jusque là :

<a href="/settings">Préférences avancées</a> devenait simplement <span>Préférences avancées</span>.

Je comptais donc en grande partie sur le contexte (une navigation par exemple) pour faire comprendre que le texte correspondait à un lien désactivé.

Ça fonctionnait mais ça n’était cependant pas très explicite.

Suppression de l’attribut href

<a>Préférences avancées</a> étant parfaitement valide, cela semble une bonne piste. La technique ayant l’avantage sémantique : il s’agit bien toujours d’un lien.

Malheureusement, côté utilisateur, aucun impact notable, en particulier avec un lecteur d’écran qui se contentera de considérer le texte seul et sans prendre en compte l’élément a.

ARIA à la rescousse

Sur la base précédente, on souhaite donc ajouter qu’il s’agit toujours d’un lien ; et qu’il est désactivé.

C’est tout à fait réalisable avec un peu d’ARIA :

<a role="link" aria-disabled="true">Préférences avancées</a>

Nous avons bien :

• un lien énoncé comme tel ;
• annoncé comme désactivé dans les technologies d’assistance ;
• qu’on peut mettre en forme visuellement pour signifier cette désactivation ;
• qui ne fonctionne pas à la souris ;
• qui ne fonctionne pas au clavier.

---

Cet article (en anglais) de Scott Ohara parle du même sujet : Disabling a link.