Quoi : Dans le cadre de nos efforts continus pour rendre notre documentation plus accessible, nous avons mis à jour divers textes d’ancrage afin qu’ils soient plus descriptifs de la page cible.

Pourquoi : en fonction des paramètres d’un lecteur d’écran, l’utilisateur peut passer d’un lien à l’autre sur une page. Ainsi, chaque texte d’ancrage sur une page doit être descriptif, même sans le contexte environnant.

9 janvier
Changer les références @id pour utiliser des hashtags

Quoi : Remplacez tous les exemples de code de données structurées qui utilisent des références @id sur la page par des hashtags. Par exemple, l’exemple de clips dans notre documentation de recettes.

Pourquoi : C’est une bonne pratique de schéma d’utiliser des hashtags comme identifiants de nœuds dans la page résolubles dans RDF, et nous voulons que nos exemples suivent les meilleures pratiques. Cependant, vous n’avez pas besoin de modifier vos identifiants existants si vous utilisez toujours des identifiants sur la page.

Ajout de la prise en charge de l’âge suggéré au produit

Quoi : Ajout de la prise en charge de la propriété suggestedAge comme alternative à suggestedMaxAge et suggestedMinAge. Clarification de la liste des valeurs possibles pour les tranches d’âge dans notre documentation sur les données structurées du produit.

Pourquoi : Nous souhaitons permettre aux utilisateurs de spécifier plus facilement et plus flexiblement des tranches d’âge pour un produit. De plus, la formulation précédente prêtait à confusion et ne correspondait pas bien à la documentation de Merchant Center sur les tranches d’âge des produits.

5 janvier
Clarifier la source principale des extraits

Quoi : il est précisé dans notre documentation sur les extraits de code que la source principale de l’extrait est le contenu de la page elle-même.

Pourquoi : la formulation précédente impliquait à tort que les données structurées et l’élément HTML de méta-description sont les principales sources d’extraits de code.

—
Texte du lien descriptif
Lorsque vous ajoutez des liens textuels dans une page Web, choisissez soigneusement les mots vers lesquels créer un lien hypertexte. La règle générale est de toujours lier les mots clés. Lier des mots-clés permettra :
aider à améliorer l’optimisation des moteurs de recherche
donner plus de détails aux utilisateurs ayant une vision fonctionnelle qui scannent votre page Web
fournir un contexte aux individus sans vision fonctionnelle qui peuvent utiliser un lecteur d’écran ou une autre technologie d’assistance
Liens, lecteurs d’écran et accessibilité

Le texte lié doit avoir un sens hors de son contexte. En effet, les lecteurs d’écran naviguent souvent de lien en lien, en ignorant le texte environnant. Ils liront chaque lien à haute voix, dans un ordre séquentiel.

Par exemple, si le texte de votre lien est “Copper Country”, le lecteur d’écran dira “link Copper Country” et l’utilisateur saura que la page Web vers laquelle le lien est lié concerne probablement le Copper Country. Si, à la place, le texte de votre lien est “Cliquez ici”, le lecteur d’écran dira lien, cliquez ici et l’utilisateur n’aura aucune idée de l’objet de la page Web liée.

Bon exemple

<p>Michigan Tech et le <a href=”/tour/copper-country/”>Copper Country</a> ont l’impression d’être une petite ville. Les étudiants et les membres de la communauté disent que c’est parfait : pas si grand qu’il soit facile de s’y perdre, mais pas trop petit non plus. Un endroit idéal où vivre.</p>

Mauvais exemple

<p>Michigan Tech et Copper Country ont une atmosphère de petite ville. Les étudiants et les membres de la communauté disent que c’est parfait : pas si grand qu’il soit facile de s’y perdre, mais pas trop petit non plus. Un endroit idéal pour appeler chez soi. <a href=”/tour/copper-country/”>Cliquez ici</a> pour en savoir plus.</p>

Une autre fonctionnalité dont les utilisateurs de lecteurs d’écran peuvent profiter est la possibilité de classer les liens vers les pages par ordre alphabétique. Ceci est particulièrement utile si l’utilisateur a déjà un lien spécifique en tête, comme un formulaire de contact ou une liste du personnel. Il est important de conserver les mots-clés les plus importants au début du texte de votre lien. La « Liste du personnel » apparaîtra par ordre alphabétique comme prévu. “Voir la liste de notre personnel” ne le fera pas.

Conseils pour rédiger le texte du lien

Utilisez les conseils suivants pour vous assurer que le texte du lien est accessible :

Évitez d’utiliser une URL comme texte de lien ; surtout si c’est long ou compliqué
Les URL peuvent ne pas être facilement lisibles par les humains ou les lecteurs d’écran.
Gardez les phrases liées aussi courtes que possible, tout en restant significatives hors contexte. Cela fera gagner du temps aux utilisateurs de lecteurs d’écran, car ils devront parler moins. Par exemple,
“faire un cadeau” est préférable à “pour faire un cadeau en ligne, veuillez cliquer ici”
“contactez-nous” est préférable à “vous pouvez nous contacter par”
Liez au moins un mot complet. Deux mots, c’est généralement mieux.
Un lien qui n’est qu’une lettre ou un symbole sera difficile à cliquer et ne fournira pas de contexte
Si vous devez ajouter des invites d’action à votre lien, placez-les à la fin. Par exemple,
“Contactez-nous (ouvre une fenêtre contextuelle)” revient à “Le lien ouvre une fenêtre contextuelle : contactez-nous”
N’ajoutez pas le mot “lien” à votre texte
Essayez de vous assurer que chaque lien unique sur votre page Web utilise un texte de lien unique
Si vous avez deux liens différents vers la liste du personnel qui mènent à la même page, ce n’est pas grave. S’ils accèdent à des pages différentes, cela devrait être différent, par exemple « personnel des services numériques » et « personnel des services d’impression »
Si vous utilisez fréquemment « lire la suite », imaginez à quel point il serait frustrant pour un utilisateur de lecteur d’écran d’entendre « lire la suite » répété encore et encore sans contexte.
N’incluez jamais de liens vides en utilisant href=””
Lier je

mages

Pour certaines pages Web, il peut être approprié de lier une image à une page Web au lieu de lier du texte. Dans ces cas, le lecteur d’écran lira le texte alternatif de l’image (balise ALT) comme texte du lien. La balise ALT doit inclure à la fois le contenu et la fonction de l’image. Si l’image est décorative, seule la fonction est nécessaire.

Exemple d’image décorative

<p><a href=”/tour/copper-country/”><img src=”my-picture.jpg” alt=”Liste du personnel” /></a></p>

Exemple d’image informative

<p><a href=”/tour/copper-country/”><img src=”my-picture.jpg” alt=”Diagramme montrant 200 pouces de neige totale ; lien vers les sous-totaux mensuels” /></a> </p>

Techniques de programmation facultatives

Dans certains cas, vous souhaiterez peut-être conserver le texte du lien général, tel que “[en savoir plus]”. Dans ces cas, vous pouvez utiliser aria-label ou aria-labelledby pour donner le contexte du lien aux lecteurs d’écran.

aria-label Exemple

La plupart des lecteurs d’écran liront à haute voix l’attribut aria-label à la place du texte du lien. Par exemple, un lien « en savoir plus » lié au Pays du Cuivre peut être codé comme suit :

<p class=”right”><a href=”/tour/copper-country/” aria-label=”Copper Country”>[en savoir plus]</a></p>

aria-labelledby Exemple

Il peut y avoir des cas où un titre à proximité peut constituer l’étiquette parfaite pour un lien général. Dans ce cas, vous pouvez relier ce titre au lien général en utilisant aria-labelledby.

<h2 id=”copper-country”>Le pays du cuivre</h2>

<p>Michigan Tech et Copper Country ont une atmosphère de petite ville. Les étudiants et les membres de la communauté disent que c’est parfait : pas si grand qu’il soit facile de s’y perdre, mais pas trop petit non plus.</p>

<p class=”right”><a href=”/tour/copper-country/” aria-labelledby=”copper-country”>[en savoir plus]</a></p>

Au lieu de dire “lien, en savoir plus”, le lecteur d’écran dira “lien, Copper Country”.

Test du texte du lien

Utiliser un lecteur d’écran pour exprimer chaque lien de votre page Web est le meilleur test que vous puissiez effectuer. Toutefois, si vous n’avez pas accès à un lecteur d’écran, lisez à haute voix le texte du lien pour chacun de vos liens. Est-ce que quelqu’un que vous lisez comprendrait à quel contenu vous créez un lien en se basant uniquement sur les mots liés prononcés ?

Apprendre encore plus

Pour en savoir plus sur le texte descriptif du lien :

WebAIM : Liens et Hypertexte
W3C : Objectif du lien (en contexte)
CMS omni

Pour créer un lien dans le contenu de votre page Web, mettez en surbrillance votre texte ou votre image, puis cliquez sur l’icône de lien dans la barre d’outils ou utilisez le raccourci Cmd/Ctrl + K.

Pour ajouter un attribut aria-label ou aria-labelledby , accédez au code source à l’aide de la barre d’outils.

Pour ajouter une image avec un texte alternatif au corps de votre page, lisez la quatrième étape sous Insérer une image. Pour modifier le texte alternatif d’une image déjà présente dans le corps de votre page Web, sélectionnez l’image, puis cliquez sur le bouton “Insérer/Modifier une image” dans la barre d’outils.

Mise à jour Google SEO janvier 2024