Les liens doivent avoir un texte distinguable

ID de règle: link-name
Ensemble de règles: axe-core 4.13
Impact sur l’utilisateur: Sérieux
Lignes directrices: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549, RGAA

Éliminez davantage de bugs d'accessibilité avec axe DevTools Pro

Recherchez et corrigez davantage de problèmes avec les tests guidés intelligents™ en répondant à une série de questions simples sur le contenu de votre page. Essai gratuit. Aucune carte de crédit nécessaire.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Aveugle
  • Surdicécité
  • Mobilité

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Section 508
  • Trusted Tester
  • EN 301 549
  • RGAA

Critères de réussite WCAG [WCAG 2.1 (A)]

  • 2.4.4: Link Purpose (In Context)
  • 4.1.2: Name, Role, Value

Critères de réussite WCAG [WCAG 2.0 (A)]

  • 2.4.4: Link Purpose (In Context)
  • 4.1.2: Name, Role, Value

Critères de réussite WCAG [WCAG 2.2 (A)]

  • 2.4.4: Link Purpose (In Context)
  • 4.1.2: Name, Role, Value

Directives de la section 508

  • 1194.22: Web based intranet and Internet Information & Applications
  • 1194.22 (a): A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)

Directives pour les testeurs de confiance

  • 6.A: The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context.

EN 301 549 Directives

  • 9.2.4.4: Link Purpose (In Context)
  • 9.4.1.2: Name, Role, Value

RGAA

  • 6.2.1: Each link has a label.

Comment résoudre le problème

  • Assurez-vous que tous les noms de liens sont accessibles. Il est possible que le texte du lien interne ne soit pas visible par un lecteur d'écran, qu'il y ait des étiquettes de lien en double ou que le lien ne soit pas susceptible de recevoir le focus.

  • Assurez-vous que tous les liens peuvent recevoir le focus par programmation ; par exemple, évitez les événements spécifiques à l'appareil (par exemple, onmouseover).

  • Pour garantir que tout le texte du lien soit visible pour les lecteurs d'écran, le texte du lien ne peut pas être masqué (par exemple avec display: none ou aria-hidden="true").

  • Pour garantir que tous les liens puissent recevoir le focus programmatique, évitez les événements Javascript spécifiques à l'appareil tels que onmouseover(), mouseover(), hover(), onmouseout(), mouseout(). Remplacez-les par des événements indépendants de l'appareil tels que onfocus(), focus(), onblur() ou blur().

  • Ne modifiez pas le style des liens pour supprimer le changement de style lorsqu'un lien fait l'object d'un focus programmatique. La modification des styles de liens supprime la capacité des utilisateurs de clavier qui peuvent voir à savoir où ils se trouvent sur la page. De plus, assurez-vous que vous créez de vrais liens en utilisant l'élément a avec l'attribut href .

La page Wiki ARIA 1.1 Utilisation de aria-label pour le but d'un lien fournit l'exemple suivant pour décrire l'objectif d'un lien en HTML à l'aide de l'élément aria-label :

<h4>Neighborhood News</h4>
 <p>Seminole tax hike: Seminole city managers are proposing a 75% increase in 
 property taxes for the coming fiscal year.
 <a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
 </p> 
 <p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting in 3 year
 old Willy "Dusty" Williams in yesterday's mayoral election.
 <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
 </p>

Pourquoi c'est important

  • Les éléments de liens inaccessibles constituent des obstacles à l’accessibilité, car ils constituent un élément fondamental d’un site Web.

  • Les utilisateurs qui utilisent exclusivement un clavier (et non une souris) pour naviguer sur une page Web ne peuvent cliquer que sur les liens qui peuvent recevoir un focus programmatique. Un lien qui ne peut pas recevoir le focus programmatique est inaccessible à ces utilisateurs.

  • Tout comme les utilisateurs voyants, les utilisateurs de lecteurs d’écran doivent savoir où pointe un lien. Le texte du lien interne fournit ces informations, même s'il ne sera pas utilisé si un lecteur d'écran ne peut pas y accéder.

  • Les utilisateurs de clavier, y compris les utilisateurs de lecteurs d'écran malvoyants ou les personnes qui ne peuvent pas utiliser de souris, ne peuvent activer que les liens et les éléments de formulaire qui peuvent recevoir le focus programmé. Tous les événements activés exclusivement par d'autres types de focus, par exemple onmouseover les événements qui dépendent du survol de la souris, sont inaccessibles aux utilisateurs du clavier. Seuls les liens et les éléments de formulaire reçoivent le focus du clavier par défaut. Modifiez les éléments qui ne sont pas des liens ou des composants de formulaire pour recevoir le focus en ajoutant tabindex="0".

Description de la règle

Le texte du lien et le texte alternatif des images, lorsqu'ils sont utilisés comme liens, doivent être discernables par un lecteur d'écran, ne doivent pas avoir d'étiquette en double et doivent être focalisables.

L'algorithme (en termes simples)

Garantit que chaque lien a un nom accessible.

Ressources

Reportez-vous à la liste complète des règles d'axe 4.13 .

Ces informations vous ont-elles été utiles ?

Vous avez déjà donné votre avis, merci..

Votre réponse a été la suivante :

Ces informations vous ont-elles été utiles ?
Date/heure de soumission des commentaires :