Optimiser pour l’accessibilité + SEO : Images, vidéo et éléments non textuels

Optimiser pour l’accessibilité + SEO : Images, vidéo et éléments non textuels

Optimiser pour l'accessibilité + SEO : Images, vidéo et éléments non textuels

Voir aussi :
– Ce que vous devez savoir sur l’accessibilité + SEO
– Qu’est-ce que le texte alternatif ?
– YouTube SEO : Les principaux facteurs d’investissement

Dans les deux premiers articles de cette série, nous avons abordé les chevauchements de la structure des sites et des pages, ainsi que les chevauchements de formatage et de liens. Dans ce dernier article, nous aborderons l’accessibilité et les chevauchements en matière de référencement lors du codage des éléments médiatiques.

Images et éléments non textuels

Comme vous pouvez l’imaginer, les images en ligne peuvent être difficiles à déchiffrer pour les visiteurs malvoyants, mais heureusement, nous utilisons la technologie ici, de sorte que vous et moi pouvons aider à résoudre ce problème grâce à un codage approprié sur et autour des images et des éléments non textuels.

Voici quelques exemples d’images et d’éléments non textuels :

Images, y compris les graphiques et les tableaux, le word art, les images décoratives et de fond, les images de webcam, les photographies
Infographie
Cartes d’images
Animations
Boutons graphiques
Captchas

Voici quelques éléments que vous pouvez optimiser autour des images et des éléments non textuels pour une meilleure accessibilité.

Attributs Alt

Les attributs alt de l’image dans le référencement sont utilisés pour décrire aux robots de recherche ce qu’est l’image ou ce vers quoi l’image pointe si l’image est un lien. S’il s’agit d’un lien, l’attribut alt agit comme un texte d’ancrage de mot-clé, aidant Google à comprendre le contexte de la page de destination.

Les attributs alt des images sont également lus par les lecteurs d’écran. Voici un exemple rapide :

Les attributs alt sont une optimisation gagnant-gagnant pour l’accessibilité et le référencement, mais il y a certaines choses à garder à l’esprit, en particulier les deux premiers points ci-dessous, lors de l’optimisation des attributs alt pour les lecteurs d’écran.

Les attributs Alt sont à faire et à ne pas faire :
N’utilisez pas les attributs alt sur les images décoratives : Les images décoratives des nuages sur le site web de votre assurance maladie ne sont pas un moyen d’attirer le trafic de recherche d’images et ne sont pas utiles pour fournir un contexte aux lecteurs d’écran. Une image décorative peut toujours faire rêver les utilisateurs voyants, mais ne doit pas gêner la navigation des utilisateurs malvoyants en conservant l’attribut alt comme alt= » ». (null), ou en en faisant une image de fond.
N’utilisez pas la touche Alt lorsqu’il y a également un lien texte : Si l’image est un lien et qu’il y a un texte de lien à côté de l’image, les deux pointant vers la même destination, le lecteur d’écran lira les deux et cela semble répétitif et bizarre. Utilisez alt= » » (nul) pour l’image alt et gardez le texte d’ancrage pointant vers la page de destination sur le sujet. Ceci peut être contesté par les OMR qui veulent mettre les attributs alt sur l’image pour l’aider à se classer dans la recherche d’images. Ce que je recommande dans un cas comme celui-ci est d’utiliser les attributs alt sur les images de la page de destination, puisque c’est la page que vous voudriez voir apparaître dans les SERPS de toute façon (probablement un grand sujet à débattre davantage dans les commentaires).
Soyez bref ou utilisez des légendes : Il y a des traces de recommandations sur le web que le lecteur d’écran JAWS ne fait pas bien avec les attributs alt de plus de 125 caractères. Que cela soit vrai ou non, il est plus convivial de garder les attributs alt courts. Si vous voulez comprendre pourquoi, ajoutez une extension de lecteur d’écran à votre navigateur (comme ChromeVox pour Chrome ou Fangs pour Firefox) et naviguez dans une page avec des images qui ont des attributs alt longs. Si vous avez beaucoup à dire sur une image, mettez-la en légende ou décrivez-la dans le texte de la page au lieu de l’alt.
Ne vous contentez pas de mots-clés – écrivez naturellement. Reprenons l’exemple du site web de l’assurance maladie avec des images décoratives de nuages. Un référencement peut voir cinq images de nuage décoratives sur une page de renvoi comme cinq possibilités de mettre « assurance maladie, outils d’assurance maladie, outils de santé » etc. dans les attributs alt. Ne le faites pas. Ce n’est pas seulement du bruit pour les lecteurs d’écran, cela peut être déroutant et ennuyeux. De plus, en réalité, personne ne fait de recherche d’image pour « assurance maladie » – et même si c’était le cas, les chances qu’ils cliquent sur une image de nuages dans les résultats de recherche en espérant obtenir ce qu’ils cherchent sont assez minces. De même, assurez-vous que vos attributs alt sont descriptifs et ont un sens – écrivez-les pour les gens, pas seulement un tas de mots-clés pour les robots.
Sous-titrage des images

Google peut segmenter le texte à proximité d’une image pour attribuer ce texte à l’image et même créer ses propres légendes ; par conséquent, le texte à proximité d’une image peut aider à fournir un contexte et pourrait affecter les classements. Le sous-titrage des images fournit également un contexte aux lecteurs d’écran, souvent en fournissant plus de contexte qu’un attribut alt ne le pourrait, ou à la place d’un attribut alt si celui-ci n’est pas connu au moment du téléchargement.

Le sous-titrage des images est à faire et à ne pas faire :
N’utilisez pas l’attribut alt s’il y a une légende de l’image. Comme pour le lien textuel d’ancrage, la description d’une image via les attributs alt et une légende peut être répétitive. Cela pourrait également être une pratique discutable, car les OMR voudraient probablement utiliser les deux. Dans ce cas, réfléchissez à la manière dont l’image sera lue par un lecteur d’écran qui lit à la fois une légende et un attribut alt, et essayez de prendre la meilleure décision qui fonctionnera pour les deux
Décrivez ce que vous sous-titrez. Par exemple, utilisez « Figure 1 : » pour que cette étiquette de sous-titrage soit bien comprise par les personnes utilisant des technologies d’assistance qui pourraient ne pas reconnaître l’étiquette.
Facultatif : Utilisez une balise

: Les balises

avec
peuvent être appliquées aux images ou à d’autres éléments de la page. Figcaption n’est pas nécessairement une balise connue à optimiser pour le référencement et n’est pas un must pour les lecteurs d’écran, mais il semble que Google essaie d’indexer le texte dans une balise, qu’il reconnaisse la balise ou non, et malgré la lisibilité variable de figcaption par les lecteurs d’écran, le texte peut être considéré comme un élément lié à une image pour les lecteurs d’écran et, espérons-le, utile néanmoins.
Texte en tant qu’images

Les raisons d’éviter le texte comme les images sont similaires pour le référencement comme pour l’accessibilité : Il suffit d’éviter le texte dans une image si vous voulez que le texte puisse être lu par une machine. Le texte sous forme d’image n’est pas non plus toujours idéal pour les personnes qui ont besoin d’utiliser des loupes, car le texte grossissant dans une image peut être pixélisé et difficile à lire.

Le texte en tant qu’image fait et ne fait pas :
N’utilisez pas le texte en tant qu’image pour des informations importantes. Si vous devez utiliser du texte en tant qu’image, utilisez un attribut alt pour décrire le texte de l’image si c’est quelque chose qui doit être lu par des robots de recherche et des lecteurs d’écran.
Envisagez de styliser le texte réel comme une alternative. Si vous voulez que votre texte ait une certaine apparence, stylisez-le en utilisant HTML + CSS ou utilisez SVG (Scalable Vector Graphics).
Infographie

L’infographie a toujours été populaire auprès des référenceurs pour attirer des liens qui améliorent les classements. Les référenceurs peuvent également souhaiter fournir aux moteurs de recherche le contexte de l’infographie et de ses parties sur la page.

Pour l’accessibilité, l’idée est de pouvoir déterminer facilement ce que l’infographique représente. Les lecteurs d’écran, contrairement aux moteurs de recherche, ne peuvent pas déterminer le contexte de la page infographique en utilisant le texte du lien et le contenu des centaines de pages qui renvoient à votre infographique. Pour les lecteurs d’écran, tout dépend des signaux du code de la page, et vous pouvez imaginer que la description d’un infographique complexe serait lourde pour un attribut alt. Considérez également l’utilisation de la couleur pour les utilisateurs daltoniens ou le problème que nous rencontrons avec le texte en tant qu’images (non « lisibles », échelles pixélisées) que nous avons couvert dans la partie 2.

Il n’existe pas de simple balise qui vous permette d’ajouter une description longue et complète de l’infographique comme un long attribut alt (bien que vous puissiez considérer longdesc ci-dessous). Je vous recommande plutôt de tester ces tactiques ci-dessous pour voir ce qui fonctionne le mieux pour vous et votre situation particulière :

Ce qu’il faut faire et ne pas faire en matière d’infographie :
Ne décrivez pas le tout dans un attribut alt. C’est terriblement peu convivial pour les lecteurs d’écran (impossible de naviguer dans le texte, de le copier ou de le coller, etc.) ). Utilisez les attributs alt comme ils sont censés être utilisés et choisissez une autre méthode pour les longues descriptions.
Respectez les exigences en matière de contraste des couleurs. Planifiez à l’avance lorsque vous pensez à la couleur de votre infographie et utilisez des couleurs qui répondent aux exigences minimales en matière de contraste des couleurs. Utilisez cet outil pour vous aider.
Considérez ARIA-describedby. Cet attribut ARIA (Accessible Rich Internet Application) est lu en plus du texte alt sur une image, et permet une longue description. Voici un exemple vidéo. Notez que comme describedby est annoncé en plus du texte alt de l’image, cela peut être répétitif.
L’attribut longdesc : Cet attribut d’image vous permet de fournir un lien lisible par la machine vers de longues descriptions d’images (soit dans la page, soit sur une page séparée), mais il n’est pas bien pris en charge et, à ma connaissance, n’est pas non plus une technique de référencement efficace.
Considérez les alternatives de texte caché : Voir l’exemple dans le post précédent d’une image infographique fournie comme un morceau facilement partageable dans un iFrame avec du texte indexable caché dans un clip CSS dans l’iFrame HTML.
Créez votre infographie en utilisant le CSS : C’est une excellente solution. Vous trouverez ci-dessous deux pages avec le même infogramme et la façon dont chacune d’entre elles semble mise en cache dans Google. L’une est un fichier image avec le texte et les liens de la page située en dessous. L’autre est un infographique avec du texte et des liens indexables créés via HTML + CSS.

À gauche : Infographique sous forme d’image (la page fournit également le texte infographique de la page).

A droite : Infographique fourni sous forme de HTML stylisé avec CSS (source ici).

Vous remarquerez qu’ils sont incroyablement similaires.

Regardons le code. Voici le cache de Google du contenu du texte infographique de chaque page.

En haut : cache Google (partiel) du texte infographique fourni sur la page infographique de l’image.

En bas : Google met en cache (partiellement) le texte infographique de la page infographique CSS.

Les deux offrent des solutions indexables et lisibles à l’écran. La version CSS le fait sans avoir à dupliquer également les informations dans le texte de la page pour les visiteurs voyants.

Vous avez peut-être remarqué que la version CSS ajoute également un affichage invisible utile : les en-têtes de section none, qui sont vus par les lecteurs d’écran mais ne sont pas visibles dans l’infographique. Pour en savoir plus sur le texte caché, voir le post précédent.

Outils et ressources pour les éléments image et non-texte
HTML5 : Techniques pour fournir des alternatives de texte utiles – Exemples plus approfondis pour rendre accessibles des éléments non textuels
HTML5 Accessibility Chops : les éléments figure et figcaption
Infographie accessible
Comment créer une base de données infographiques accessible
ARIA – décrit par l’infographie
W3 : Utilisation de la propriété aria-describedby pour fournir un label descriptif pour les contrôles de l’interface utilisateur
Outil d’analyse du contraste des couleurs (téléchargement)
Outil de vérification du contraste des couleurs (en ligne)
Transcription, sous-titrage et sous-titrage des vidéos
Transcription de la vidéo

La transcription de la vidéo est le texte de la vidéo fourni à côté de la vidéo. La transcription vidéo est utile pour les visiteurs malentendants qui ne peuvent pas entendre la vidéo, ou pour interpréter les mots pour les personnes qui regardent quelque chose dans une autre langue ou avec un accent prononcé. Elle est également utile à toute personne qui regarde une vidéo dont le son est difficile à entendre, lorsqu’elle regarde une vidéo dans une pièce bruyante ou lorsqu’elle doit la regarder sans son.

De même, pour les moteurs de recherche, les transcriptions vidéo décrivent le contenu d’une vidéo par un texte.

Sous-titrage et sous-titrage des vidéos

Les sous-titres et le sous-titrage permettent de synchroniser le texte avec la vidéo pendant sa lecture. Les sous-titres fournissent le dialogue, tandis que le sous-titrage fournit le dialogue et décrit également d’autres sons comme la musique, les effets sonores et l’identification du locuteur.

Les options pour fournir des textes d’accompagnement pour votre contenu vidéo comprennent :

Ajouter la transcription comme texte sur la page. Vous pouvez simplement ajouter la transcription sous forme de texte sur la même page que la vidéo, comme cet exemple de texte vidéo sur le récif corallien sous la vidéo sur la page. Vous pouvez taper la transcription vous-même ou utiliser des outils ou des services pour le faire à votre place (voir la section des ressources).
HTML5 et . La balise HTML5sur un élément ou

Ce qu’il faut faire et ne pas faire en matière d’accessibilité vidéo :
Fournir des transcriptions vidéo (et/ou audio). Le temps et l’effort nécessaires pour fournir des alternatives textuelles peuvent aider les moteurs de recherche et les divers spectateurs qui ont besoin d’un accompagnement textuel pour comprendre le contenu.
Téléchargez ou corrigez les transcriptions et les légendes de YouTube : Les transcriptions automatisées de YouTube sont pratiques mais généralement bizarres et erronées, et doivent donc être corrigées pour être correctes. Il est utile de disposer d’un texte correct pour les personnes qui consultent les transcriptions et, lorsque les moteurs de recherche indexent le texte des transcriptions, ce contenu textuel peut aider à faire apparaître la page vidéo dans les résultats de recherche.
Précisez le contexte. Lorsque cela a un sens (en particulier dans le cas de sous-titrage), indiquez les noms des locuteurs et d’autres contextes sonores comme la musique, les sons pertinents, les rires, les acclamations, les cris, les pleurs, etc.
N’envoyez pas de spam. N’utilisez pas de transcriptions pour le bourrage de mots-clés. C’est une expérience utilisateur terrible, et selon votre plateforme, une transcription peut ne pas être indexée par les moteurs de recherche de toute façon, alors restez réaliste.
Outils et ressources pour l’accessibilité des vidéos
Conseils pour la création d’un fichier de transcription (YouTube)
Ajout de légendes aux vidéos sur les pages web
Transcriptions sur le Web : Faire accéder les gens à vos podcasts et vidéos
Liste de contrôle pour l’accessibilité des médias
La surdité et l’expérience de l’utilisateur
Outil et services de transcription (il y en a beaucoup) :
Services de transcription bénévoles ou payants d’Amara
Sous-titrage Wistia
3Jouer le sous-titrage interactif
ProTranscript : transcription de base ou interactive
Transcriptions interactives CaptionBox (avec plugin WordPress)
Transcriptions intégrables, personnalisables et interactives de SubPLY
Sous-titrage et traduction Dotsub
YouTube : Téléchargez votre vidéo, téléchargez la transcription automatisée, puis modifiez la transcription pour l’utiliser là où vous avez l’intention de l’utiliser.
Logiciel de reconnaissance vocale. Il existe différentes solutions. N’oubliez pas qu’il est important que la sortie speech-to-text soit correcte.
Récapitulation et remerciements

Au cas où vous auriez manqué les postes précédents, voici ce que nous avons couvert :

Poste 1 : Aperçu de l’accessibilité du Web, téléchargements de lecteurs d’écran et chevauchements SEO/A11y avec les titres, les rubriques, le balisage des schémas, la navigation et les plans de site dans Optimizing for Accessibility + SEO : Chevauchements de la structure des sites et des pages
Poste 2 : SEO et A11y se chevauchent en ce qui concerne le texte caché, le bourrage de mots-clés, la taille du texte et le contraste des couleurs, ainsi que les liens et le texte d’ancrage dans Optimizing for Accessibility + SEO : Formatage et chevauchement des liens

Et je tiens à remercier chaleureusement les personnes ci-dessous d’avoir pris le temps de vérifier les faits, de fournir des références, d’avoir participé à d’excellentes discussions lors de la création de cette série et de s’être engagées à rendre le web accessible. MERCI !

Ted Drake (site web | twitter)

Ryan Burgess (site web | twitter)

Vincent François (site web | twitter)

Jennifer Sutton (site web | twitter)

(La photo d’en-tête est le résultat de la recherche de « scène » dans le pool de photos Flickr de Blind Photographers).

À propos de Laura.Lippay – accro au marketing et à la technologie, ancienne artiste de cirque, et accro au rire, à la violation des règles et à tout ce qui est bizarre.

38
52