Il y a quelques années, les propriétaires de site Web se préoccupaient d’avantage d’avoir un site qui accroche l’oeil soit par un design très illustré ou par l’utilisation d’animation Flash. De nos jours, ceux-ci se préoccupent d’avantage de la question de référencement dans les moteurs de recherche. Bientôt, ils seront également sensibles aux questions d’accessibilité. Pourquoi? À quoi bon faire un site pouvant être consulté par les personnes ayant des difficultés visuelles? C’est simple! Les robots des différents moteurs de recherche sont des visiteurs aveugles. Ils ne considèrent pas vos couleurs ni vos images ni vos animations. Ils sont là sur votre site pour l’information. Est-ce qu’ils ont accès à votre information? C’est ce que nous allons voir!

Premièrement, définissons « accessibilité ». La définition de Wikipédia est la suivante :

«Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.»

Source : Wikipédia - Accessibilité du Web

Maintenant, comment savoir rapidement si son site est accessible ou non? Il existe une multitude d’outils permettant l’analyse d’un site. Pour ma part, la première étape est de valider une page de son site avec le validateur d’accessibilité francophone d’Accessibilité pour tous disponible à l’adresse suivante : http://validateur-accessibilite.apinc.org/

Le validateur vous permet rapidement de valider plusieurs bonnes pratiques d’accessibilité automatiquement en vous présentant les résultats sur 3 niveaux de priorité définis par le WCAG (Web Content Accessibility Guidelines). Voici la version originale anglaise des trois niveaux de priorité :

[Priority 1]

A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.

[Priority 2]

A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.

[Priority 3]

A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

Source : Web Content Accessibility Guidelines - Priorities

La validation automatique est intéressante mais elle n’est pas suffisante. Voici un top 10 dans le désordre des bonnes pratiques pour l’accessibilité Web :

• Assurez-vous que tous vos élements non-textuels présentent un texte alternatif. Si votre description est longue, inscrivez celle-ci dans l’attribut LONGDESC et résumé dans l’attribut ALT.

• Évitez les liens de type « Cliquez ici ». Le texte sur le lien devrait toujours être représentatif de la cible vers lequel il pointe. De plus, dans le cas d’un menu présenté avec des images ou tout autre lien sur une image, utilisez l’attribut TITLE dans votre élément A pour indiquer une valeur textuelle de la cible et ce même si l’image contient un texte alternatif. Si votre lien pointe vers une page dans une autre langue, utilisez l’attribut HREFLANG.

• Spécifiez vos tailles de polices de façon variable. Évitez les PX et les PT, utilisez plutôt EM ou %.

• Tentez de naviguer sur votre site en utilisant seulement le clavier. Vous devriez avoir accès à l’ensemble du contenu.

• Évitez l’utilisation des FRAMES. Du même coup, vous aurez la certitude qu’aucun résultat de recherche pointera vers une page qui ne présente pas votre entête et/ou navigation.

• Si votre site utilise des tableaux pour la présentation du contenu, assurez-vous que ceux-ci utilisent l’attribut SUMMARY pour permettre aux visiteurs non-voyants d’avoir une idée d’ensemble du tableau.

• Utilisez l’élément LABEL avec l’attribut FOR lors de la conception de vos formulaires. Ceci permettra à un visiteur non voyant d’associer plus facilement l’intitulé de la case avec la case elle-même. L’élément LABEL permet également de cliquer sur le texte pour activer une case à cocher plutôt que d’avoir à cliquer directement sur la case.

• Testez votre site avec plusieurs navigateurs, versions et systèmes d’exploitation. Testez également avec un navigateur spécialisé pour personne non-voyante : MozBraille ou JAWS.

• Faites des cas d’utilisation et demandez à un inconnu dans la rue d’utiliser votre site pour trouver certaines informations. Donnez-lui une petite récompense…

• Tentez toujours d’utiliser le bon élément pour représenter l’information. S’il ne s’agit pas d’information “tabulaire”, n’utilisez pas de tableau. Mettez vos titres dans les éléments H1 à H6. Vos paragraphes dans l’élément P. Vous menus dans une liste UL LI. Ensuite, utilisez le CSS pour définir la présentation de tous ces éléments.

Si le sujet de l’accessibilité Web vous intéresse, un forum se tiendra à Longueuil le 12 février 2007. L’inscription est gratuite mais obligatoire et peut se faire en ligne sur le site d’Accessibilité Web avant demain…!

Pour plus d’information sur le sujet voici une liste de ressources intéressantes :

• Web Content Accessibility Guidelines
• Accès pour tous
• Opquast
• Accessibilité Web
• W3Québec

Articles relatifs :

• 17 conseils pour développer des applications Web
• L’accessibilité et les handicaps techniques
• 19 conseils SEO qu’un développeur ou référenceur ne peut ignorer lors d’un lancement de site
• Le B.A. BA de la conception Web (1)
• Ton chat a mangé ta souris… peux-tu encore naviguer?

Tags :

accessibilité, design