Les bonnes pratiques de l'accessibilité

Adrien, dimanche 20 janvier 2008 à 00:33 - Découverte

Cette semaine, Philippe Lecoq de chez Digitas est venu à Gobelins pour nous donner un cours sur l'accessibilité et le XHTML/CSS.
Je ne prétendrais pas tout vous dire, ni vous apprendre les secrets cachés (puisqu'ils sont cachés) à propos du référencement et de l'accessibilité mais nous allons voir ensemble quelles sont les bonnes pratiques. Cela vous permettra peut-être d'optimiser vos futures réalisations ou de donner vos "tips" en commentaire de ce billet.



Pour commencer, voici une définition de l'accessibilité :

Citation:

En 1998, le W3C lance le projet WAI (Web Accessibility Initiative) dans le but de promouvoir l'accessibilité du Web. En mai 1999, le WAI propose trois recommandations majeures dont une sur l'accessibilité des contenus Web : Web Content Accessibility Guidelines (WCAG). Il s'agit de 14 règles d'accessibilité qui se détaillent en 65 points de contrôle classés en 3 niveaux de priorité (A, AA et AAA).

Le site Accessiweb a créé une liste de 92 critères basés sur les WCAG.



Parmi ces critères voici les principaux, faciles à mettre en place et particulièrement importants.

XHTML et CSS :

- Mettre un attribut ALT sur chacune de vos images pour en décrire le contenu. Idéalement, la description doit être inférieure à 60 caractères.
- Utiliser le moins possible ou bannir les frames et iframes.
- Mettre un titre H1 par page et bien choisir ce qui doit être mis en avant pour chaque page.
- Créer des liens explicites ou remplir la balise TITLE pour le décrire.
- Prévoir des alternatives aux scripts, Javascript ou Flash. Le site doit fonctionner si le langage n'est pas compris par le navigateur qu'elle qu'en soit la raison.
- Ajouter un DOCTYPE. Obligatoire pour définir le langage et la version utilisée. Si vous n'ajoutez pas de DOCTYPE, IE6 se mettra en mode Quirk (et pas en mode Jerk, hein Cédric).
- Renseigner la langue utilisée dans votre page et la langue des liens.
- Renseigner le CHARSET (type d'encodage) utilisé.
- Réfléchir au titre de la page, balise TITLE.
- Séparer le fond de la forme, le contenu XHTML de la présentation CSS.
- Avec les feuilles de style désactivées, l'information est-elle toujours présente ?
- Avec les feuilles de style désactivées, l'ordre d'apparition de l'information est-il respecté ?
- Utilisez des listes (UL, LI) ou des listes de définitions (DL, DT, DD) pour toutes vos listes (menus y compris) plutôt que des BR.



Pour vos formulaires :

- Utilisez des LABEL et liez-les via un FOR avec votre champs de formulaire.
- Utilisez des FIELDSET pour appliquez vos styles plutôt que directement sur l'élément FORM.
- Donnez un nom pertinent à vos boutons ou ajoutez l'attribut ALT.
- Optez pour un contrôle de saisie sans Javascript, au cas où il serait désactivé.


Pour les personnes handicapées :

- En haut de votre site, ajoutez des "liens d'évitement" ou "skip links" permettant d'accéder au contenu, au moteur de recherche ou à une partie du site sans avoir à passer par toute la structure.
- Utilisez des raccourcis clavier ou ACCESSKEY.
- Pas de rafraichissement automatique de vos pages.
- Avertissez l'utilisateur si une nouvelle fenêtre doit s'ouvrir lors du clic sur un lien.
- Donnez des informations sur les fichiers que vous proposez en téléchargement tel que le poids du fichier.

Ces critères ont pour but de vous aider à optimiser vos pages pour qu'elles soient plus accessibles. Mais cette contrainte n'est pas uniquement destinée aux utilisateurs handicapés. En effet, Google et les autres navigateurs de recherche voient votre site en mode texte comme le ferait HomePage Reader (HPR, navigateur doté d'un outil de synthèse vocale pour les malvoyants) ou Lynx.
L'optimisation de votre référencement dépend également de la structure du site et de la bonne définition des balises indispensables (H1, ALT, TITLE etc.).



Je tiens également à dire que mon blog/site n'est pas tout à fait optimisé mais que j'ai fait quelques modifications et que j'en ferais encore suite à ce cours. Il faut savoir que l'accessibilité c'est bien, mais ce n'est pas obligatoire la plupart du temps. Prenez donc en compte les critères qui vous semblent les plus faciles à mettre en place et petit à petit vous modifierez le reste.
Dans certains cas, il est obligatoire de rendre un site accessible (sites gouvernementaux, ministériels, associations d'handicapés) à différents niveaux (A, AA, ou AAA, selon le WCAG).

Quoi qu'il en soit, essayez dès le début de respecter les standards et de vous contraindre à rendre votre site accessible à un niveau de base pour le confort de tous (Google y compris).



Pendant cette semaine nous avons fait deux exercices d'intégration en XHTML/CSS pour appliquer ces différents points.
Je vous propose les fichiers sources en PSD des deux projets (XG Press 24,2 Mo et Gobelins 6,01 Mo) ainsi que le résultat que j'en ai tiré (la page XG Press et la page Gobelins). Vous pouvez vous en servir pour vous exercer. Sachez tout de même que ces exemples ne sont pas parfaits mais suffisamment avancés pour permettre aux plus novices de s'entrainer.
A titre d'information, le layout de XG Press a été développé en 1 jour et celui de Gobelins en 4 heures.

Et vous, quels sont vos trucs et astuces en matière d'accessibilité, de référencement et de XHTML/CSS ?

Partager sur Facebook