Contactez-nous
Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81
Principes et normes de l'accessibilité web
Définition
L'accessibilité web est un ensemble de technologies, d'outils et de pratiques permettant à des handicapés d'accéder à des sites internet au mieux (c'est loin d'être définition officielle, je sacrifie volontairement l'exactitude à la clarté).
Cette page s'adresse à des développeurs web. Elle vous permet juste de défricher le terrain. Des tutoriaux plus pratiques devraient arriver au fil du temps dans cette rubrique.
En gros quand on parle d'accessibilité web, on parle principalement d'aides pour palier le mieux possible les handicaps suivants :
- handicaps visuels : mal voyants et non voyants
- handicaps auditifs : sourds et mal entendants
- handicaps cognitifs
- certains handicaps moteurs (notamment quand ils empêchent d'utiliser un clavier, une souris,...)
note : L'accessibilité est souvent abrégé a11y.
Principes
Handicaps cognitifs
En gros, un seul mot d'ordre : faire simple et clair.
Handicaps moteurs
Là on parle principalement d'un problème matériel (claviers adaptés, commandes vocales,...). L'impact sur le site web est ensuite proche des contraintes pour les handicaps visuels.
Handicaps auditifs
Ca concerne principalement les vidéos. L'idée est d'avoir une retranscription textuelle (idéalement des sous-titres synchronisés) de la vidéo.
Handicaps visuels
Notons que les handicaps visuels ne se limitent pas aux non voyants. Il y a de nombreux handicaps visuels (perception des couleurs dégradée, perception des contrastes, vision floue,...).
On a donc plusieurs mots d'ordre ici :
- Vérifier que les textes sont bien contrastés avec le fond
- Les textes doivent être suffisament gros et les textes doivent pouvoir être agrandis.
- L'ensemble de la page doit être compatible avec des lecteurs d'écran (soit vocaux soit en braille)
Normes et organismes
Les 3 "normes" importantes pour des sites français
La norme de référence est le WCAG 2.0 (Web Content Accessibility Guidelines).
WCAG (prononcer ouécague) est une norme très théorique et très générale ne s'adressant pas uniquement au web. En clair elle est illisible.
2 "normes françaises" donnent des règles pratiques à utiliser sur le web pour être compatibles WCAG 2.0 :
- RGAA : en gros les sites publics (mairies, ministères,...) doivent appliquer les règles RGAA.
- Référenciel Accessiweb : accessiweb est une association spécialisée dans l'accessibilité. Elle publie une liste de règles à suivre (le référenciel accessiweb) pour être compatible avec la norme WCAG 2.0
WCAG 2.0
Norme éditée par le W3C / WAI (Web Accessibility Initiative). C'est la "vraie norme" en cours sur l'accessibilité web.
C'est une norme très théorique, qui ne s'adresse pas qu'au web et qui est assez illisible. Norme WCAG 2.0
Elle dispose de 3 niveaux
- A (ou bronze) : correctement accessible
- B (ou argent) : niveau standard
- C (ou or) : très bonne accessbilité
A noter : le niveau B est déjà difficile à atteindre strictement. Le niveau C n'est pas toujours possible à atteindre.
RGAA
Norme française qui met en application WCAG 2.0 est la norme RGAA 2.2.
Elle est :
- pratique
- bien documentée
Référentiel Accessiweb
Le référenciel accessiweb est un "concurrent" de RGAA. A priori il est plus complet que RGAA. Si vous êtes compatible accessiweb, vous êtes compatibles RGAA.
De la même façon que RGAA c'est une mise en application de WCAG 2.0.
Qui est impliqué dans la création d'un site accessible ?
Dans la création d'un site web, les contraintes liées à l'accessibilité ne concernent pas que les développeurs. Voyons qui doit intervenir là dedans :
- Le graphiste doit veiller à la taille des caractères, les contrastes de couleurs, une ergonomie compatible
- Le développeur doit suivre toutes les recommandations techniques des normes RGAA ou Accessiweb, avec notamment des recommandations fortes à suivre sur les liens, les formulaires ou les navigations.
- Le rédacteur du site doit bien veiller à toujours mettre des contenus alternatifs à ses images (quand elles ont un sens autre que décoratif), faire des transcriptions textuelles de vidéo (ou mieux, des sous-titres)... Si vous êtes comme moi dans une agence web, il faut donc former votre client à l'accessibilité web.
En pratique, les premiers tests
En pratique, comment savoir si un site est au moins un minimum accessible :
- Essayer de surfer au clavier : mettez votre curseur dans la barre d'adresse et essayer de surfer juste avec la touche "tab" et "return" pour cliquer.
- Parfois le curseur se met à tourner en boucle entre 3 liens
- Parfois tous les liens ne sont pas possible à atteindre juste avec la touche tab
- Parfois il y a tellement de liens qu'avant d'arriver au contenu, c'est une galère sans nom
- Regarder s'il y a des textes alternatifs sur les images, notamment s'il y a un lien sur l'image. Il faut que tous les liens aient un nom explicite (éviter les boutons "ok", les "cliquez ici").
- Installer un lecteur d'écran (type NVDA) et réessayer de surfer avec en utilisant "tab"
Après il y a beaucoup d'autres critères, mais ces tests sont sans doute les premiers à faire.
Les outils de base
Quelques outils pour tester l'accessibilité (pour Firefox) :
- la web developper toolbar (permet de surligner les images sans alt, virer les CSS, ...)
- la Firefox Accessibility Extension : des outils pour checker automatiquement quelques règles
- NVDA : un lecteur vocal opensource (avec une voix atroce) qui permet de réaliser à quoi ressemble le web vu par un lecteur vocal. (là on réalise que l'organisation de la page, c'est important)
- Firebug : bon si vous êtes lecteur ici, vous devez connaitre...
- Tanaguru : un outil en ligne de test automatique de niveau d'accessibilité
- Color Contrast Analyser : analyse le contraste d'un texte par rapport au fond et indique si c'est suffisant ou non pour les normes.
Bon, il y a plein d'autres outils. Aucun n'est magique et ne couvre tous les besoins, notamment parce qu'une bonne partie des recommandations des normes concernent des points éminament humains (l'image a-t-elle un sens ou bien est-elle purement décorative ? des éléments rédactionnels,...).
Conclusion
Merci à Philippe Vayssière de Alsacreations pour sa formation sur l'accessibilité web.
Note : je sais que cette page n'est pas un modèle d'accessibilité... ça devrait progresser un jour...
Ce tutoriel a juste pour objectif de donner quelques bases qui vous permettront d'aller plus loin vous même. N'hesitez à ajouter des commentaires pour compléter ce tutoriel.
Commentaires
Ajouter un commentaire