web-dev-qa-db-fra.com

SEO - aria-label vs .sr-only

À des fins de référencement, j'ai lu que le contenu invisible avait moins de poids que visible. De ce fait, l'utilisation de la classe .sr-only de Twitter Bootstrap peut être traitée, dans le pire des cas, comme un blackhat SEO:

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

Donc, aria-label peut être utilisé, mais sur page WAI-ARIA , nous pouvons lire:

Bien que WAI-ARIA puisse améliorer l'accessibilité de ces objets, l'accessibilité est fournie de manière optimale en permettant à l'agent d'utilisateur de gérer l'objet de manière native.

Ce qui, à mon avis, correspond à 100% à la classe .sr-only qui permet de gérer les messages de manière native par l'agent utilisateur. Alors, quoi de mieux en matière de référencement (et bien entendu d’accessibilité), aria-label ou d’étendre avec la classe .sr-only, par exemple dans le cas de l’élément HTML <button>? Exemple:

<button>
    <i class="add-icon" aria-hidden="true"></i>
    <span class="sr-only">Add item</span>
</button>

ou

<button aria-label="Add item">
    <i class="add-icon" aria-hidden="true"></i>
<button>
seohtml5accessibilityhidden-textbootstrap
4
Radek Anuszewski

La question est intéressante mais rappelle le temps où les gens discutaient si Google lisait Flash. Et si le texte en flash était - comme vous le demandez ici - visible ou éventuellement comme une technique permettant d’ajouter du contenu (blackhat). La réponse à l'histoire Flash était et est "Google lit TOUT". Et TEXT destiné aux lecteurs d’écran (etc.) UTILE pour le contenu est simplement un signe de dévouement à votre qualité de contenu ET NON, à mon avis, un risque.

Ceci dit ... Vérifiez: https://github.com/twbs/bootstrap/issues/10446https://support.google.com/webmasters/answer/6635 =

2
Michael