Dois-je fournir une étiquette accessible pour un lien dont la signification ne peut être dérivée de son contenu?
Par exemple, disons que j'ai un lien dont le texte, en soi, ne fait pas un excellent travail d'explication de sa signification:
<div>To complete your transaction, please click <a href="#">here<a>.</div>
Dites à un utilisateur utilisant utilise une interface téléphonique assistante et le bouton Tab pour naviguer sur la page.
Pour la discussion, ignorons une solution suggérée, mettant du texte significatif à l'intérieur de l'élément d'ancrage lui-même .
Quelle est la prochaine meilleure solution? Ajouter un aria-label avec du texte significatif? Par exemple:
<div>To complete your transaction, please click <a aria-label="To complete your transaction, please click here">here<a></div>
Cela sera-t-il redondant pour l'utilisateur? Y a-t-il une meilleure alternative?
Premièrement, assurez-vous que vous avez même besoin d'un <a> étiqueter. Si le lien ne navigue pas à une autre page, vous devez utiliser un <button> étiqueter.
Oui, vous pouvez utiliser le Aria-label comme vous l'avez décrit et vous pouvez également utiliser la normale <a href="#" **title=""**> Étiquette de titre à la place, lorsque tous les lecteurs d'écran utilisent cela en l'absence d'une étiquette d'étiquette Aria-étiquette.
Cependant, dans votre exemple, il existe un moyen plus robuste et accepté de le faire car le texte de l'étiquette que vous essayez de mettre l'accent sur la page est déjà sur la page afin que vous puissiez utiliser l'attribut Aria-labelledby = "" au lieu.
Ceci est la solution correcte pour votre exemple exacte scénario (car le texte pertinent est déjà sur la page).
<div id="your-id">To complete your transaction, please click <a aria-labelledby="your-id">here<a></div>
Vous ne devriez utiliser qu'Aria-label = "" Si le texte que vous avez après ne peut être trouvé sur la page.
Vous pouvez toujours utiliser Aria-labelledby = "" Même si ce texte est ailleurs sur la page. Par exemple, vous pouvez simplement envelopper ce texte dans une étiquette de span comme suit:
<span id="your-id">To complete your transaction...</span>