Developpez.com - Développement Web
X

Choisissez d'abord la catégorieensuite la rubrique :

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

Date de publication originale : 09 mai 2008

Date de la traduction : 22 mai 2008

Remerciements à MasterOfChakhaL et Yogui pour leur relecture.

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.

Sommaire

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

Eviter 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..."

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.

Capture d'écran d'une recherche google avec les feuilles de styles activées

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

Capture d'écran d'une recherche google sans feuilles de styles

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

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 d'unobstrusive Javascript est JavaScript discret. Nous parlerons de JavaScript non instrusif, expression plus usitée par les développeurs.

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éer 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.

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 :

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.

Posté par Maile Ohye sur l'Official Google Webmaster Central Blog

Copyright © Alexandre TRANCHANT. 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.

Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -