Le lien ne contiennent pas de texte montre l'erreur dans la Vague d'évaluation de l'accessibilité de l'outil

J'ai une page HTML dans laquelle il est 

<a href="example.com"><i class="myclass"></i></a>

<a href="http://www.google.com" class="cart visible-xs"><i   class="t-icon t-icon-cart-xs-2"></i></a>

mais de la vague de l'accessibilité de l'outil c'est une erreur que la balise d'ancrage ne contient pas de texte, même si je suis en utilisant <i> balise à l'intérieur de la <a> tag, mais je ne peux pas écrire quoi que ce soit à l'intérieur de balise d'ancrage.

InformationsquelleAutor Md Shoaib Alam | 2015-09-17
  1. 12

    Selon la VAGUE outil les deux <a> éléments que vous avez fournis à la fois contenir les Liens Vides qui violent WCAG 2.0 Directive 2.4.4 "Lien de l'Objectif (Dans le Contexte)".

    De la VAGUE de l'outil:

    "Ce Que Cela Signifie
    Un lien ne contient pas de texte.

    Pourquoi Il Est Important De
    Si un lien ne contient pas de texte, la fonction ou le but de le lien ne sera pas présenté à l'utilisateur. Cela peut engendrer de la confusion pour le clavier et les utilisateurs de lecteurs d'écran.

    Comment Résoudre le problème
    Supprimer le vide de lien ou de fournir un texte dans le lien qui décrit la fonctionnalité et/ou de la cible de ce lien.

    L'Algorithme... en anglais
    Un point d'ancrage de l'élément a un attribut href, mais ne contient pas de texte (ou seulement des espaces) et pas d'images avec un texte alternatif."

    Un moyen facile de corriger l'erreur est d'ajouter une aria-label l'attribut à la <a> élément:

    <a href="https://example.com" aria-label="first link"><i class="myclass"></i></a>

<a href="https://www.google.com" class="cart visible-xs" aria-label="second link"><i class="t-icon t-icon-cart-xs-2"></i></a>
    InformationsquelleAutor user
  2. 8

    Ce que j'ai trouvé pour être la meilleure option est d'ajouter un span balise avec une classe nommée "sr-only" qui cache l'étiquette à partir d'un utilisateur ordinaire, mais permet aux lecteurs d'écran pour le voir. (Je pense que c'est la façon dont Bootstrap de la gestion de ces situations). Voici un exemple:

    <a href="example.com">
    <i class="myclass"></i>
    <span class="sr-only">Visit example.com</span>
</a>

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
</style>
    InformationsquelleAutor Ricardo Andres
  3. 1

    Comme vous l'avez remarqué, votre lien ne doit pas contenir de contenu. Oui, il contient un i élément, mais il est vide.

    Je suppose que vous voulez ajouter une image via CSS. Mais ce n'est pas accessible. Les agents d'utilisateur sans le support de CSS, ou les utilisateurs qui ne peuvent percevoir des images, ne sera pas en mesure d'utiliser ce lien.

    Vous devez utiliser un img élément avec son alt attribut à la place; c'est le bon élément, y compris pour les images qui ne sont pas simplement de la décoration.

    Si vous ont à utiliser les CSS pour y compris l'image, vous devez prévoir au moins une partie du texte dans la a élément (qui pourrait être visuellement caché via CSS, si elle doit être). (Et vous ne doit pas utiliser l'option i de l'élément à cette fin.)

    • selon l'instruction, je ne peut pas modifier la déjà mis en œuvre html . j'ai juste à enlever les vagues de l'accessibilité de l'outil d'erreur.
    • Si vous ne pouvez pas modifier le code HTML, vous ne pouvez pas résoudre ce problème, évidemment.
    InformationsquelleAutor unor
  4. 0

    Si vous ne pouvez pas écrire quoi que ce soit à l'intérieur de la balise d'ancrage, vous pouvez ajouter un title attribut à votre a tag:

      <a href="example.com" title="Visit example.com website"><i class="myclass"></i></a>
    • j'ai essayé mais sa ne fonctionne pas toujours à l'affiche même
    InformationsquelleAutor Adam