Test 6.1.4

Note technique du critère 6.1

Lorsque l’intitulé visible est complété par une autre expression dans le nom accessible :

• WCAG insiste sur le placement de l’intitulé visible au début du nom accessible sans toutefois réserver l’exclusivité de cet emplacement ;
• WCAG considère comme un cas d’échec une correspondance non exacte de la chaîne de caractères de l’intitulé visible au sein du nom accessible.

Par exemple, si l’on considère l’intitulé visible « Commander maintenant » complété dans le nom accessible par l’expression « produit X », on peut avoir les différents cas suivants :

• « Commander maintenant produit X » est valide (bonne pratique) ;
• « Produit X : commander maintenant » est valide ;
• « Commander produit X maintenant » est non valide.

Cas particuliers du critère 6.1

Il existe une gestion de cas particuliers pour les tests 6.1.1, 6.1.2, 6.1.3 et 6.1.4 lorsque le lien est ambigu pour tout le monde. Dans cette situation, où il n’est pas possible de rendre le lien explicite dans son contexte, le critère est non applicable.

Il existe une gestion de cas particuliers pour le test 6.1.5 lorsque :

• La ponctuation et les lettres majuscules sont présentes dans le texte de l’intitulé visible : elles peuvent être ignorées dans le nom accessible sans porter à conséquence ;
• Le texte de l’intitulé visible sert de symbole : le texte ne doit pas être interprété littéralement au niveau du nom accessible. Le nom doit exprimer la fonction véhiculée par le symbole (par exemple, “B” au niveau d’un éditeur de texte aura pour nom accessible “Mettre en gras”, le signe “>” en fonction du contexte signifiera “Suivant” ou “Lancer la vidéo”). Le cas des symboles mathématiques fait cependant exception (voir la note ci-dessous).

Note : si l’étiquette visible représente une expression mathématique, les symboles mathématiques peuvent être repris littéralement pour servir d’étiquette au nom accessible (ex. : “A>B”). Il est laissé à l’utilisateur le soin d’opérer la correspondance entre l’expression et ce qu’il doit épeler compte tenu de la connaissance qu’il a du fonctionnement de son logiciel de saisie vocale (“A plus grand que B” ou “A supérieur à B”).

Définitions

Ambigu pour tout le monde

L’intention ne peut être déterminée à partir du lien et de toute l’information de la page web présentée à l’utilisateur en même temps que ce lien (c’est-à-dire qu’un lecteur sans limitation fonctionnelle ne connaîtrait pas la fonction d’un lien avant de l’activer). Exemple : le mot « goyave » dans la phrase suivante utilisé comme lien : « L’une des exportations importantes est la goyave ». Ce lien pourrait conduire à une définition de la goyave, à un graphe présentant une liste des quantités de goyaves exportées ou à une photo de personnes récoltant la goyave. Jusqu’à ce que le lien soit activé, tout utilisateur est dans l’incertitude et une personne handicapée n’est donc pas désavantagée.

Contexte du lien

Le contexte du lien représente les informations supplémentaires (on parle d’informations de contexte) qui peuvent être mises en relation par un programme informatique avec l’intitulé du lien. Les informations de contexte qui permettent de compléter l’intitulé du lien sont les suivantes :

• Le contenu de la phrase dans laquelle le lien texte est présent ;
• Le contenu du paragraphe (balise <p>) dans lequel le lien texte est présent ;
• Le contenu de l’item de liste (balise <li>) ou le contenu d’un item de liste parent (balise <li>) dans lequel le lien texte est présent ;
• Le contenu du titre (balise <hx>) précédent le lien texte ;
• Le contenu de la ou les cellule(s) d’en-tête de tableau (balise(s) <th>) associée(s) à la cellule de donnée (balise <td>) dans laquelle le lien texte est présent ;
• Le contenu de la cellule de donnée (balise <td>) dans laquelle le lien texte est présent.

Note 1 : l’un des 6 contextes de lien combiné à l’intitulé du lien doit permettre de comprendre la fonction et la destination du lien.

Note 2 : RGAA considère qu’une adresse e-mail de type [email protected] est un texte de lien suffisant pour comprendre la fonction du lien et ne requiert pas de signaler plus explicitement l’action.

Étiquette de champ de formulaire

Texte à proximité du champ de formulaire permettant d’en connaître la nature, le type ou le format des informations attendues. L’étiquette peut être associée au champ de formulaire de plusieurs manières :

• Par l’utilisation d’une balise <label> ;
• Par l’utilisation de l’attribut WAI-ARIA aria-label ;
• Par l’utilisation d’une liaison entre le texte et le champ par l’attribut WAI-ARIA aria-labelledby ;
• Par l’utilisation de l’attribut title.

Note importante : lorsque plusieurs de ces techniques sont présentes sur un même champ, le calcul du « nom accessible », c’est-à-dire ce qui sera restitué, obéit à un ordre strict :

• aria-labelledby ;
• Sinon aria-label ;
• Sinon <label> ;
• Sinon title.

Cet ordre doit être utilisé pour l’évaluation de la pertinence de l’étiquette (critère 11.2). Par exemple, même dans le cas de la présence d’un <label>, c’est le passage de texte référencé par aria-labelledby qui doit être pris en compte.

Référence : Accessible name and description calculation.

Note importante au sujet de l’utilisation de placeholder : lorsque l’attribut placeholder est présent, il est susceptible d’être restitué à la place de l’attribut title. Par conséquent, lorsque ces deux attributs title et placeholder sont présents, ils doivent être identiques.

Note au sujet des étiquettes liées par aria-labelledby : Il s’agit d’un ou de plusieurs passages de texte identifiés par des id et liés par aria-labelledby sur le modèle suivant : aria-labelledby="ID1 ID2 ID3…". Pour assurer une compatibilité maximum avec les agents utilisateurs, notamment Internet Explorer 11, il est recommandé d’implémenter un tabindex="-1" sur les passages de textes qui ne sont pas des éléments interactifs (bouton, liens, éléments de formulaires, etc.).

Note : l’attribut aria-label ne peut pas être utilisé pour indiquer le caractère obligatoire d’un champ.

Intitulé (ou nom accessible) de lien

« Nom accessible » restitué par les technologies d’assistance.

Dans le cas d’un lien HTML, le « nom accessible » est obtenu selon l’ordre suivant :

• passage de texte associé par l’attribut WAI-ARIA aria-labelledby ;
• sinon, contenu de l’attribut WAI-ARIA aria-label ;
• sinon, contenu du lien ;
• sinon, contenu de l’attribut title.

Cet ordre doit être utilisé pour déterminer ce qui constitue l’intitulé du lien. Par exemple :

• en cas de présence conjointe d’un attribut WAI-ARIA aria-label et d’un attribut WAI-ARIA aria-labelledby, c’est le passage de texte référencé par l’attribut WAI-ARIA aria-labelledby qui doit être considéré comme l’intitulé ;
• en cas de présence conjointe d’un attribut WAI-ARIA aria-label et d’un contenu dans le lien, c’est le contenu de l’attribut WAI-ARIA aria-label qui doit être considéré comme l’intitulé.

Référence : Accessible name and description calculation.

Dans le cas où le « nom accessible » est obtenu à partir du contenu du lien, celui-ci sera variable en fonction des cas suivants :

Lien texte :

En HTML, le « nom accessible » correspond au texte constitué à partir :

• du texte contenu dans le lien ;
• du texte contenu dans les éléments enfants du lien.

Lien image :

En HTML, le « nom accessible » correspond au texte constitué à partir de l’alternative textuelle d’une ou plusieurs images dans le lien du type :

• Image (élément <img> ou balise ouvrante ayant l’attribut WAI-ARIA role="img") ;
• Image objet (élément <object>) ;
• Image bitmap (élément <canvas>) ;
• Image vectorielle (élément <svg>).

Lien composite :

En HTML, le « nom accessible » correspond au texte constitué à partir de l’ensemble :

• du texte contenu dans le lien ;
• du texte contenu dans les éléments enfant du lien ;
• du contenu de l’alternative textuelle de la ou des images comprises dans le lien.

Dans le cas d’un lien SVG (version 1.1), le « nom accessible » est obtenu comme suit :

• Passage de texte associé par l’attribut WAI-ARIA aria-labelledby ;
• Sinon, contenu de l’attribut WAI-ARIA aria-label ;
• Sinon, contenu de l’élément <title> enfant direct du lien ;
• Sinon, contenu de l’attribut xlink:title ;
• Sinon, contenu texte d’un ou plusieurs éléments <text>.

Il faut cependant être vigilant car cet algorithme de calcul n’est pas encore pris en compte et effectif au sein des différents lecteurs d’écran. À ce jour, le support est disponible avec VoiceOver, mais incomplet ou lacunaire avec JAWS et NVDA. Si bien que le plus petit dénominateur commun sur lequel il est possible de se reposer pour fournir un intitulé au lien est l’élément <text>.

Note 1 : un intitulé de lien sera considéré comme non-explicite dans le cas où le « nom accessible » ne reprend pas l’intitulé visible du lien.

Note 2 : en raison de la configuration possible des aides techniques permettant de forcer la restitution du « nom accessible » issu du contenu de l’attribut title au détriment du « nom accessible » issu du contenu du lien. Un intitulé de lien sera considéré comme non-explicite dans le cas où le lien possède un attribut title dont la valeur ne reprendrait pas au moins le « nom accessible » issu du contenu du lien.

Note 3 : dans le cas de la présence de plusieurs liens ayant une destination différente dont le « nom accessible » est identique. L’intitulé de lien seul sera considéré comme non-explicite si le contexte de lien ne permet pas de les différencier.

Note 4 : lorsqu’un lien ne comporte aucun contenu, il sera non conforme au regard du critère 10.2 et du critère 6.2.

Note 5 : bien que le calcul du nom accessible d’un lien tienne compte de contenus texte générés en CSS via les pseudo-éléments ::before et ::after, cette pratique ne doit pas être utilisée, car elle constitue une non-conformité au critère 1.3.1 des WCAG 2.1 (cf. F87).

Intitulé visible

Texte affiché faisant office d’intitulé visible à l’écran au sein d’un bouton ou d’un lien.

Texte affiché faisant office d’étiquette pour un champ formulaire.

Ce texte peut être constitué de texte ou d’une image contenant du texte.

Lien

En HTML :

• Balise <a> possédant un attribut href ;
• Balise possédant un attribut WAI-ARIA role="link" et dont l’action de navigation est prise en charge par un script.

En SVG :

• Balise <a> possédant un attribut xlink:href en SVG 1.1.

Lien SVG

Lien contenu dans un élément <svg>.

Dans le cas d’un lien SVG (version 1.1), le « nom accessible » est obtenu comme suit :

• Passage de texte associé par l’attribut WAI-ARIA aria-labelledby ;
• Sinon, contenu de l’attribut WAI-ARIA aria-label ;
• Sinon, contenu de l’élément <title> enfant direct du lien ;
• Sinon, contenu de l’attribut xlink:title ;
• Sinon, contenu texte d’un ou plusieurs éléments <text>.

Il faut cependant être vigilant car cet algorithme de calcul n’est pas encore pris en compte et effectif au sein des différents lecteurs d’écran. À ce jour, le support est disponible avec VoiceOver, mais incomplet ou lacunaire avec JAWS et NVDA. Si bien que le plus petit dénominateur commun sur lequel il est possible de se reposer pour fournir un intitulé au lien est l’élément <text>.