Bonnes pratiques pour un contenu accessible, navigable et référencé

T.V. Raman

Traducteur

Alexandre Tranchant

Comme écrit dans les précédents billets [NDLT : de T.V. Raman] traitant de l’accessibilité, voici quelques recommandations pour créer des pages web lisibles par la plus large audience possible et qui assure que leur contenu sera correctement référencé et facilement navigable.

- Titre : Bonnes pratiques pour un contenu accessible, navigable et référencé

- Auteur : T.V. Raman

- Traducteur : Alexandre Tranchant

- Parution : 22 mai 2008

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2020 T.V. Raman. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Bonnes pratiques pour un contenu accessible, navigable et référencé.

- I-A. Éviter les mauvais XMLHttpRequest

- I-B. Sprites CSS et liens

- I-C. Utilisation discrète des JavaScripts

- I-D. Maintenez une version imprimable clairement lisible et accessible

- I-E. Créer une URL pour chaque ressource utile

I - Bonnes pratiques pour un contenu accessible, navigable et référencé.

I-A - Éviter les mauvais XMLHttpRequest

Les pages dynamiques qui permettent aux utilisateurs de rechercher de l’information utilisent souvent XMLHttpRequest. Ces informations complètent donc la page après son chargement initial. Si vous utilisez cette méthodologie, assurez-vous que votre page initiale possède déjà suffisamment d’informations -- Sinon, GoogleBot, comme les utilisateurs qui désactivent les scripts dans leur navigateur, pourrait croire que votre site ne contient que le message « Chargement en cours… »

I-B - Sprites CSS et liens

Avoir un texte complet avec des liens pour naviguer est important pour GoogleBot comme pour les utilisateurs qui ne peuvent pas percevoir le sens des images. Lors de la conception du design de votre site, vous avez la possibilité d'utiliser des images qui fonctionnent comme des liens. Concrètement, vous devriez le faire en imbriquant des balises <img> dans des liens <a>. Cette conception vous permet de placer du texte descriptif comme un attribut alt (NDLT : acronym de ALTernat) sur la balise d’image.

Mais que se passe-t-il quand vous optez pour des sprites CSS pour optimiser le chargement de vos pages ? Eh bien, il est toujours possible d’inclure ces indispensables textes de description quand vous appliquez les sprites CSS. Comme solution possible, regardez comment sont codés le logo de Google et les différents liens de navigation des résultats Google. Pour faire simple, le texte de description a été placé juste après l’image utilisant les sprites CSS.

Résultat d'une recherche Google avec les feuilles de styles activées

Résultat d'une recherche Google avec les feuilles de styles désactivées. Le logo "Google" a disparu. Les liens descriptifs "Google" demeurent.

I-C - Utilisation discrète des JavaScripts

Nous avons parlé de la notion de mise en valeur progressive lors de la création d’un site très interactif. Quand vous ajoutez ces fonctionnalités interactives, utilisez les techniques dites de l’ « Unobstrusive JavaScript » pour créer des pages qui se modifient progressivement. Ces techniques garantissent que votre contenu restera accessible par le plus grand nombre possible d’utilisateurs sans qu’il soit nécessaire de sacrifier les fonctions interactives des applications Web2.0.

*[NDLT]La traduction littérale de « unobstrusive Javascript » est JavaScript discret. Nous parlerons de JavaScript non intrusif, expression plus utilisée par les développeurs.

I-D - Maintenez une version imprimable clairement lisible et accessible

Les sites web avec une interface visuelle fournissent une version imprimable de l'ensemble de leur contenu. Générée à partir du même contenu que la version interactive, c'est une excellente source de contenu pour GoogleBot comme pour les utilisateurs souffrant d'une déficience visuelle les empêchant d'utiliser les fonctionnalités interactives du site. Mais trop souvent, ce contenu imprimable est inaccessible car caché par des liens JavaScript de la forme :

<a href="#" onclick="javascript:print(...)">Imprimer</a>

Créez des URL vers une autre page HTML, non dynamique cette fois, via un lien traditionnel améliorera grandement la qualité du contenu qui sera d’autant mieux parcouru :

<a href="http://example.com/page1-imprimable.html" target="_blank">Imprimer </a>

Si l’idée de dupliquer le contenu entre la page interactive et la version imprimable ne vous plaît pas, alors vous pouvez opter pour proposer un « SiteMap » contenant ces URL (vers des versions imprimables) au lieu d’essayer de modifier chacun des liens de cette version. Cela peut aider Google s’il observe les mêmes articles sur des URL différentes.

I-E - Créer une URL pour chaque ressource utile

En tant que webmaster, vous avez le pouvoir de créer une URL pour chaque ressource du site que vous publiez. Exercer ce pouvoir est ce qui fait tourner le web ! Créer des URLs (NDLT : l’auteur sous-entend des pages-ressources directement accessibles via une URL) pour chaque ressource que vous publiez et les lier entre elles avec les traditionnels hyperliens vous garantit que :

- Googlebot référencera l’ensemble de ce contenu ;

- les utilisateurs pourront trouver ce contenu ;

- les utilisateurs pourront ajouter chaque ressource à leurs favoris.

Ne pas créer d’URL pour chaque ressource, forcera vos utilisateurs à se souvenir de tous les clics à faire pour atteindre votre ressource qu’ils savent avoir précédemment vue sur votre site.