SEO et accessibilité : SEO technique [Series Part 3]

Nous espérons que vous avez apprécié cette série sur le référencement et l’accessibilité. Dans le dernier volet, Cooper vous montre comment les stratégies de référencement technique que vous implémentez sur votre site peuvent aider à le rendre plus perceptible, opérationnel, compréhensible et robuste.

Transcription vidéo

Hé, fans de Moz. Bienvenue dans la dernière édition de Whiteboard Friday. Je suis Cooper Hollmaier. Je fais du SEO depuis 2016, et aujourd’hui je travaille pour un grand détaillant de plein air en aidant notre stratégie de référencement technique à prendre vie. Merci beaucoup d’avoir participé à cette série sur le référencement et l’accessibilité.

J’espère que vous avez acquis une perspective large et de nouveaux trucs et astuces pour créer du contenu qui non seulement résonne avec votre public, fonctionne bien dans la recherche, mais est également accessible à un plus grand nombre de personnes. Aujourd’hui, nous allons parler de SEO technique et d’accessibilité.

SEO technique et accessibilité

Plongeons-nous. La dernière fois que nous avons parlé Directives d’accessibilité du contenu Web, et vous vous souviendrez peut-être que les quatre principes de WCAG sont perceptibles, utilisables, compréhensibles et robustes.

Perceptible

En tant que référenceur technique, vous êtes probablement le plus concerné par le perceptible car vos opérations quotidiennes, votre flux de travail quotidien consistent à vous assurer que les pages, le contenu, les expériences que vous créez sont accessibles à la recherche. moteurs et perceptible par les moteurs de recherche.

Souvent, lorsque nous parcourons des recommandations de référencement ou des audits de référencement, j’entends beaucoup de thèmes communs, comme la balise d’en-tête est intégrée dans l’image et donc un moteur de recherche ne peut pas le voir, ou le contenu que je produis est visible par les robots mais non visible par les gens. Ce sont des problèmes de perception au niveau de base. Je veux que vous preniez cet état d’esprit et considérez si vous l’appliquez également à l’ensemble de votre public. Alors, tous vos employés qui espèrent s’engager avec votre service, votre produit ou votre expérience, sont-ils capables de percevoir tout ce que vous avez à offrir à un niveau de base ?

1. Modèles

Certaines choses que vous pourriez penser seraient similaires à ce que vous verriez dans cet audit, comme : est-ce que tout mon texte sur la page est visible ? Est-ce du texte actif ? Est-il natif de la page, puis-je le sélectionner et le copier et le coller, ou est-il intégré à l’image et inaccessible par la technologie d’assistance ou les navigateurs ou quoi de plus ? Vous pensez peut-être aussi: la couleur contraste-t-elle avec mon arrière-plan et mon texte, est-ce le bon contraste?

Y a-t-il suffisamment de clarté et de netteté entre mes éléments de mise en page? Si les choses semblent un peu floues ou s’il n’est pas tout à fait clair que quelque chose est accessible à un moteur de recherche et à un utilisateur, retournez à la planche à dessin et trouvez comment faire en sorte que ces deux choses fonctionnent bien.

2. Médias riches

Nous aimons également ajouter des images, du texte, de la vidéo et de l’audio aux pages que nous créons pour nos clients. Il est important que ces éléments riches, maintenant que nous avons dépassé le texte de base et les éléments de style, les éléments riches que nous mettons sur la page soient également perceptibles par tous vos utilisateurs. Il y a plusieurs choses que nous pouvons faire pour y arriver. Pour les images, leur donner une alternative textuelle et leur fournir quelque chose qui s’ajoute à ces images l’aidera à être vue par un lecteur d’écran et comprise par une personne ayant une déficience visuelle.

En outre, nommer des choses avec des noms conviviaux plutôt que « DSC1352.JPEG » aidera les moteurs de recherche ainsi que les technologies d’assistance à voir cette image et à comprendre de quoi il s’agit. Dans le contexte de la page, il est également important que vous mettiez des images sur des pages qui ajoutent de la valeur. Vous voulez éclairer un utilisateur avec du contenu supplémentaire pour lui donner un peu plus de sentiment ou lui donner un peu plus de contexte sur ce dont vous parlez. Ajoutez des images pour la valeur, pas seulement pour apparaître dans la recherche d’images Google.

Et la vidéo ? La vidéo est donc un peu différente. La vidéo contient une série d’images animées. Donc, chaque fois que je pense au mouvement, je me dis: « Comment puis-je m’assurer que si un utilisateur veut arrêter ce mouvement, il le peut? »

Avoir des commandes de lecture claires est crucial lorsque nous parlons d’accessibilité ainsi que d’avoir une excellente expérience de lecteur vidéo pour tout utilisateur. En outre, des équivalents synchrones pour ces alternatives textuelles. Nous avons parlé d’images ayant des alternatives de texte. Les vidéos doivent également avoir des alternatives textuelles, mais elles doivent être synchronisées avec cette vidéo. Sinon, ils n’auront aucun sens dans le contexte.

Ensuite, assurez-vous qu’ils sont distinguables. C’est la même chose entre la vidéo et l’audio. Nous voulons nous assurer que le premier plan et l’arrière-plan se distinguent facilement l’un de l’autre. Si votre vidéo semble boueuse, si votre audio semble boueux et qu’il me faut tendre l’oreille ou me fatiguer les yeux pour pouvoir voir ce contenu et comprendre ce qui se passe, vous devez être un peu plus net, un peu plus clair sur ces deux distinctions.

Puis transcriptions de texte. Tout comme vous avez besoin de sous-titres pour les vidéos, pour l’audio, vous voulez avoir une transcription de texte, donc si je suis peut-être dans un endroit bruyant et que je n’entends pas l’audio ou si je n’ai pas mon casque branché ou j’avais besoin pour utiliser la technologie d’assistance, je peux accéder à cet audio.

Ce sont toutes des choses que vous verrez lorsque vous examinerez le code en tant que référencement technique et dont vous devriez être conscient.

Si vous n’avez pas ces choses en cours, sur votre site Web, je vous autoriserais à poser ces questions, les questions difficiles comme: Hé, y a-t-il une alternative textuelle à cette image? Comment une personne ayant une déficience visuelle, comment une personne ayant une déficience auditive accédera-t-elle à ces choses?

3. Structure de la page

Trois et quatre concernent la structure des pages et le HTML sémantique. Il s’agit donc un peu moins de savoir si cela est perceptible et est-ce en quelque sorte compréhensible.

C’est une sorte de frôlement du compréhensible, mais cela devrait aussi être un peu une question de perception. Avoir un tas de H1 sur une page, comme vous pouvez l’imaginer, un moteur de recherche peut sembler très confus, non? Ils sont comme, d’accord, il y a un tas de H1 sur cette page. Je ne sais pas vraiment de quoi parle cette page. L’ajout de structures et de titres en cascade pour signifier les relations parent-enfant va aider votre contenu à être un peu plus perceptible. Il sera plus facile de comprendre ce qui se passe.

4. HTML sémantique

Même chose avec le HTML sémantique. Nous avons tendance à mettre beaucoup de divs, de span et d’éléments non identifiables dans notre HTML. Mais en les marquant de manière plus appropriée, afin que nous comprenions leur signification, comprenons ce que ces balises contiennent, qu’il s’agisse de navigation, de formulaires ou de tableaux, fournir cette couche supplémentaire d’informations et de compréhension va permettre aux moteurs de recherche et aux technologies d’assistance pour être en mesure d’analyser ces éléments, de leur permettre de percevoir les éléments que vous mettez sur votre page qui sont différents les uns des autres et de fournir une expérience plus riche.

Opérable

D’accord, nous sommes donc capables de percevoir le contenu. Mais comment pouvons-nous nous assurer qu’il est opérationnel?

1. Sitemaps HTML

Quelques recommandations SEO que je vois souvent des gens faire sont de créer un plan de site HTML et de mettre du fil d’Ariane sur votre page. La plupart du temps, cela peut vous contrarier. Le plan du site HTML est très important que nous connaissons pour le référencement, pour la découvrabilité de ces pages au plus profond de la hiérarchie de notre site Web.

Nous savons que les miettes de pain sont également tout aussi importantes pour la découvrabilité. Ces deux éléments aident les utilisateurs grâce à la technologie d’assistance à mieux naviguer sur le site Web. Le plan du site HTML permet de savoir si votre menu n’inclut pas toutes les pages de votre site Web ou s’il prête à confusion ou si vous utilisez JavaScript ou une autre technologie qui n’est pas accessible à ma pile technique.

2. Fil d’Ariane

Ensuite, le fil d’Ariane me permet d’analyser de haut en bas le particulier, disons qu’il s’agit d’une page de recherche de produit sur un site Web de commerce électronique sans avoir à revenir au menu, puis à analyser à nouveau chaque élément de menu. Ces deux éléments sont donc très importants pour la navigation, mais aussi surtout pour les personnes qui naviguent avec un clavier et utilisent des technologies d’assistance.

3. Développer le clavier d’abord

Ensuite, une chose non-SEO mais néanmoins importante et pertinente, développez d’abord votre site Web et votre clavier d’expérience. Tout le monde n’a pas une souris ou la capacité d’utiliser une souris en raison d’un handicap moteur ou d’une déficience ou en raison d’un manque de technologie ou de matériel. Assurez-vous donc de développer d’abord le clavier, et vous allez en quelque sorte encapsuler plus de personnes que vous cherchez à encapsuler avec votre public.

Compréhensible

1. Langue

Compréhensible. Nous parlons donc en référencement international, lorsque nous avons affaire à différents pays et différentes langues, à quel point il est important d’utiliser le HTML sur notre page pour signifier quelle est la langue de la page. Il aide les moteurs de recherche à fournir les bons résultats dans le bon contexte national ou international. Il aide également les lecteurs d’écran à lire votre contenu à voix haute dans la bonne langue.

2. Disposition de navigation

Ensuite, je pense que la mise en page de navigation et les interstitiels sont assez courants, mais personne n’aime une navigation ou une mise en page d’un site Web qui prête à confusion. Plus vous le rendez facile, plus il est facile pour les gens de se convertir ou de faire ce que vous voulez qu’ils fassent avec ce site Web, que ce soit apprendre, acheter, s’engager dans un service. C’est plus facile lorsque la navigation et la mise en page sont rationalisées et que nous n’utilisons pas des mots différents à des endroits différents pour signifier la même chose. C’est encore plus important pour les personnes ayant une technologie d’assistance.

3. Interstitiels

Interstitiels, personne n’aime ces pop-ups sur notre visage, qui ne nous permettent pas de parcourir le reste du site. Google ne les aime pas non plus. Mais surtout les personnes ayant une technologie d’assistance, si nous ne traitons pas ces pop-ups de la bonne manière, nous allons nous retrouver dans un scénario où les utilisateurs peuvent être dans un piège à clavier et ils ne peuvent pas sortir de l’interstitiel , ou ils ne comprennent pas qu’un interstitiel est même affiché sur la page. Il est donc important d’être très attentif lorsque vous utilisez des interstitiels.

Robuste

Le dernier mais non le moindre est robuste. Comment pouvons-nous nous assurer que le contenu que nous mettons sur la page est compatible avec une grande variété d’appareils et de scénarios?

1. Validation

Le simple fait d’utiliser du code HTML approprié est un excellent moyen de le faire. Vous pouvez utiliser un validateur et vous pouvez regarder votre HTML, votre CSS et votre JSON-LD. En créant le bon code et en particulier lorsque vous utilisez du HTML sémantique tout en donnant un sens à ce code, vous aurez une bien meilleure expérience et tout ce que votre bâtiment sera plus digeste.

2. Réactif

Votre site Web est-il réactif? Vous devriez déjà le faire. Mais si ce n’est pas le cas, assurez-vous qu’il fonctionne sur un mobile, un ordinateur de bureau et une tablette et que la mise en page reste la même, il est peut-être simplement redimensionné ou réimagé d’une manière différente.

3. Interagissant

Assurez-vous qu’il est interactif. Si un utilisateur veut pouvoir zoomer parce qu’il a une déficience visuelle ou s’il veut pouvoir changer les couleurs, votre technologie sur votre site Web lui permet-il de le faire? Cela devrait. Si vous faites ces trois choses en bas, je pense que ça va faire beaucoup de travail et vous allez devoir faire beaucoup moins de travail parce que vous avez en quelque sorte construit dans le cadre, la fondation pour être accessible .

C’est le référencement technique et l’accessibilité. Si vous avez d’autres questions ou souhaitez des outils de validation, il y en a sur le côté droit ici, ou vous pouvez me contacter sur Twitter @cooperhollmaier pour plus de conseils. Mais merci beaucoup d’avoir écouté Whiteboard Friday et l’accessibilité ainsi que le référencement. J’espère que vous prendrez cela et que vous deviendrez de plus en plus inclusif dans la façon dont vous faites du référencement à l’avenir.

Transcription vidéo par Speechpad.com

---

Ressources