Blog SEO Référencement Le référencem...

Le référencement est lié à l’accessibilité Web

15
Image représentant une touche de clavier spéciale accessibilité.

Une des conférences qui m’aura le plus marqué lors du WordCamp Europe 2013 est celle de Bram Duvigneau sur l’accessibilité Web. Comment en 2013 ne sommes nous pas TOUS équipé pour fournir un contenu Web à des utilisateurs handicapés ?

Accessibilité Web par Définition

L’accessibilité, c’est un terme relatif au monde du handicap. L’accessibilité Web est reliée au monde d’Internet par définition, ce terme est utilisé pour désigner l’accès au web par les personnes handicapées comme les aveugles.

Les moteurs sont aveugles.

Nous l’oublions souvent, mais ce que nous laissons paraître en surface sur nos sites n’est pas forcement bien vu par les moteurs.  Si nous faisions l’effort de concevoir nos sites / articles / photoblog pour améliorer la lecture par un utilisateur handicapé (pas seulement non voyants), nous améliorerons par la même la compréhension par les moteurs.

Voici un extrait de la conférence de Bram Duvigneau à laquelle j’ai assisté, pour vous donner un exemple de l’utilisation d’un site pour les non voyants.

Dans cet article, je vais volontairement faire une comparaison entre l’accessibilité web et le référencement On-site sur les éléments principaux de la construction d’une page Web. Ceci vous laissera surement matière à réfléchir.

Les titres – balises Hn

Via mes annuaires, je vois beaucoup de personnes qui mettent en avant un titre avec une balise « bold » pour la mise en gras. Ceci n’est pas du tout approprié au titre. Revenons sur les balise Hn, qui doivent être clairement représentatif de la structure de votre contenu.

Une page Web non structurée c’est comme un livre sans titre et sans chapitre.

- Jennifer Noesser

L’une des premières similitudes avec le référencement, c’est le balisage :

H1 Titre de votre article

Paragraphe qui peut résumer votre article et son contenu

  • H2 sous titre
    • paragraphe
    • Liste à puces
  • H2 sous titre
    • H3 sous titre
      • paragraphe
    • H3 sous titre
      • paragraphe
  • H2 sous titre
    • paragraphe
    • Liste à puces
  • H2 sous titre
    • paragraphe
    • H3 sous sous titre
      • paragraphe
      • H4 sous titre
        • paragraphe

Voilà une structure où nous pouvons clairement identifier notre position au cours de la lecture.


Les autres balises sont la mise en gras (via strong) et l’italique, afin de porter l’accent sur tel ou tel mot. C’est un point très important dans l’accessibilité, et dans le référencement, attention de ne pas tomber dans la sur-optimisation, restez naturel dans vos balisages.

J’aimerais mettre l’accent sur ce mot

Restez cohérent dans votre utilisation, il ne faut pas que votre contenu devienne un vrai sapin de Noël avec des balises partout.


Note : Dans une page ou un article, il est très important de n’utiliser les attributs de titres ou de mise en gras que dans le contenu… Pour un blog par exemple, la balise H1 ne doit pas être le titre du blog, mais le titre de l’article, c’est aussi très bon pour le référencement… Beaucoup de design de blog utilisent encore des Widgets avec titres balisés en H2 ou H3…

Les balises Alt

La seconde similitude concerne les images. Il faut que celles-ci aient un titre en rapport avec le contenu de votre article, ce titre devra décrire les éléments présents sur la photo. La balise « Alt » sert à décrire le contenu de la photo. Si cette image est décorative, dans ce cas le contenu de la balise « Alt » restera vide.

Image représentant une touche de clavier spéciale accessibilité.

 

L’idée est de pouvoir décrire par les mots pour que l’on puisse visualiser le contenu de la photo sans même la regarder.

Pour le référencement, lorsque vous apposez un texte dans la balise « Alt », celui-ci sert au moteur afin d’indexer votre image parmi les résultats les plus pertinents, je vous laisse donc imaginer l’importance d’un contenu UTILE dans le champ « Alt » pour servir au mieux une image cohérente.

Les liens ancrés

La dernière similitude est la construction des liens dans votre contenu. En effet, l’ancre d’un lien doit permettre une cohérence évidente avec sa destination, et le rapport avec le référencement, on est en plein dedans non ?

Pour qu’un lien soit bien interprété, nous devons donc le construire de la sorte :

<a href="urldedestination">Ancre de mon lien</a>

ou si il s’agit d’une image

<a href="urldedestination"><img src="urldemonimage"></a>

Si votre lien est un texte générique

<a href="urldedestination" title="Titre de la page de destination">Voir le site</a>

Le target « _blank » est à éviter, car l’ouverture d’une nouvelle page peut déstabiliser.

L’attribut « title » n’améliore pas le bon positionnement d’une page à l’instar d’une ancre, mais j’ai réalisé des tests sur un autre de mes annuaires qui me confirment que l’utilisation de cet attribut est quand même interprété par les moteurs et l’utilisation n’est aucunement néfaste.

SEO Vs accessibilité : encore des arguments !

Les points ci dessus sont très simple à mettre en place, mais il en reste d’autre que vous pouvez appliquer sur vos sites, à savoir …

Lien d’accès direct au contenu de l’article

Bien que l’ajout du lien «aller au contenu » ne vous aidera pas à placer votre site premier, l’expérience utilisateur sera plus agréable. Amener les gens à passer un bon moment sur votre site est important. Cela permet une meilleur conversion.

Le scroll peut être un obstacle majeur pour les utilisateurs handicapés, la présence de ce lien d’accès direct peut grandement améliorer leur confort d’utilisation.

Identifier le but d’un lien

Les moteurs de recherche classent les pages en fonction de leur pertinence. Plus vous laisserez d’indices sur le plan sémantique, plus les moteurs de recherche peuvent assimiler la thématique de votre page de destination.

Les utilisateurs handicapés ne peuvent pas se payer le luxe d’indices visuels sur une page (ou un lien). Pour s’assurer que ces utilisateurs saisissent le sens d’un lien, l’ancre doit correspondre au mieux au contexte.

Générer le sitemap

Le Sitemap est comme une feuille de route pour les moteurs de recherche. Il influe sur l’indexation de votre site web et jouent un rôle important pour le référencement.

Le Sitemap permet une navigation simple pour les utilisateurs qui utilisent des technologies d’assistance. En fournissant des liens vers chaque page d’un site Web. C’est donc super important -aussi- pour l’accessibilité.

Le fil d’Ariane

Le fil d’Ariane est particulièrement utile pour vos pages, surtout pour celles qui sont les plus profonde de votre site. Vos utilisateurs apprécieront un moyen de sortir de ce labyrinthe. Ce fil d’Ariane est lu aussi par les technologies d’assistance afin d’expliquer aux utilisateurs le chemin de navigation qu’ils utilisent.

Sous titres de vos vidéos

Les sous titres permettent aux moteurs de recherche la compréhension du contenu d’une vidéo. Pour le référencement, vous offrez donc du contenu aux moteurs.

Le sous-titrage permet aux utilisateurs qui ne peuvent pas entendre de comprendre ce qui est dit dans la vidéo.


J’espère que ces quelques exemples vous ferons réagir, et penser de moins en moins « SEO » mais plutôt « expérience utilisateur ». En tout cas je suis persuadé qu’au niveau optimisation interne, c’est dans ce sens qu’il faut agir et que l’effet sera double.

Et vous, avez-vous un site accessible ? Faites le test

En complément, voici une conférence complète sur l’accessibilité, avec Bram Duvigneau.

15 Commentaires

  1. […] J’espère que cet article vous fera réagir, et penser de moins en moins « SEO » mais plutôt « expérience utilisateur ». En tout cas je suis persuadé qu’au niveau optimisation interne, c’est dans ce sens qu’il faut agir et que l’effet sera double.  […]

  2. Je trouve qu’on ne parle pas assez de l’accessibilité et les articles en français se font trop rares. Merci pour ces infos c’est très intéressant et pertinent le parallèle avec le SEO.
    C’est vrai, les moteurs sont aveugles, et nous sommes capables d’optimiser pour eux. Après l’accessibilité est un poil plus complexe (normes RGAA et Cie) mais les pistes que tu nous donnes sont un bon début, qui permettent d’être gagnant en retour côté référencement !

  3. Le mec il te parle d’accessibilité et il change tout son design en conséquence. Chapeau bas :-)

    Je pense que tu as raison et j’irais jusqu’à dire que l’accessibilité « c’est de l’opti SEO », ou le SEO ça commence par le respect de l’accessibilité.

    Pas de fioriture graphiques, structuration de document logique, description des alt pour compléter ce que le moteur ne voit pas.

    On a beau le savoir, mais on l’applique assez peu.

    D’ailleurs il me semblait qu’il y avait aussi une section ou il est dit que si 2 liens pointent vers la même page, il ne devrait y avoir qu’une ancre unique pour y accéder sur la même page (lointain souvenir d’intégration).

    A ce sujet quelqu’un à dit récemment que c’était la première occurence qui était prise en compte (Philippe Yonnet il me semble) au webis

    • @Amelie : Je parle ici des optimisations qui sont les plus facilement réalisable, mais avant d’être 100% Accessible, pas mal d’autres opti sont à prévoir !

      @Christian : Sur ton site il m’arrive de tomber sur des articles 100% en gras (je parle de la balise hein) et cette petite modification pourrait avoir un impacte positif pour l’accessibilité de tes articles. Là nous ne sommes pas dans du SEO, mais de la bonne pratique que beaucoup (dont moi même) n’appliquent pas assez.

      @JessySeoNoob : Pour les liens tu as raison j’en ai entendu parler moi aussi. Pour le reste on peut très bien avoir un pur design et respecter les guideline d’accessibilité, seulement il y a du boulot et faut avoir les compétences… La graphiste que je cite dans l’article est d’ailleurs spécialisée là dedans chez AlsaCréation.

  4. « Pour le référencement, lorsque vous apposez un texte dans la balise « Alt » »…. heu ou pas ! La balise Alt doit être présente mais peut rester vide si l’illustration ne porte pas d’information pertinente. Seules les images portant du texte stylisé doivent contenir un texte alternatif reprenant ledit texte intégralement. Le alt de l’image d’exemple ci-dessus n’apporte aucune plus-value (« Image représentant une touche de clavier spéciale accessibilité. »). Accessibilité ne signifie pas surcharger ! Au delà de cette remarque, merci pour cet article d’équilibriste CEO/Accessibilité plutôt bien réalisé.

    • @Bertrand : Je suis d’accord avec toi l’image sur l’article peut se passer d’une balise, d’ailleurs je le dit plus haut « Si cette image est décorative, dans ce cas le contenu de la balise « Alt » restera vide. » On va dire que c’était pour l’exemple ;)

  5. Bonjour,
    c’est une bonne idée d’avoir pris l’angle Accessibilité et SEO, pour plus d’informations vous pouvez consulter le site Accessiweb notament les différents référentiels en matière d’accessibilité.

    Vous pouvez tester votre site sur WAVE

    La structure du contenu, un code propre et le remplissage des alt sont des points cruciaux pour le bon fonctionnement des screenreaders clients. Vous trouverez les infos dans les référentiels ci-dessus.

    Pour ma part, je cherche un bon screenreader en plugin WordPress pour un site sur les structures accessibles du Limousin mais les seules solutions viables côté serveur sont très ( trop) chères. Pourquoi ? On en trouve sur Joomla, WordPress aurait décidé de laisser ce travail au clients ? Si qqun à des infos.

    @ +

  6. Un point essentiel de l’utilisabilité d’aujourd’hui et de demain est l’accessibilité mobile, avec des sites pensés pour les tablettes et les smartphones. Le Mobile First prime de plus en plus en ergonomie web, avec notamment la montée en puissance du responsive design qui permet de créer un site optimisé pour l’utilisateur et les moteurs de recherche.

  7. Le référencement surtout la partie optimisation on-site présente un nouvel intérêt pour une autre catégorie d’audience à savoir les non-voyants. Je viens de découvrir cette voie pour le référencement et je l’ai bien appréciée.