Accessibilité web : parce qu’il le faut !

Je vais vous parler un peu d’accessibilité web, de mes différentes recherches, mes tenants et aboutissants et comme d’habitude, la mise en oeuvre sur ce site web de ce que j’ai trouvé.

Introduction

Mais l’accessibilité c’est quoi ? De manière générale, le fait de pouvoir avoir quelque chose, de pouvoir y accéder, d’en jouir plus simplement. Selon Wikipedia : c’est la problématique de l’accès aux services et contenus en ligne pour les handicapés et les seniors.

Mais quel rapport avec le web ? Vous êtes-vous déjà retrouvé dans une situation où vous ne pouviez avoir quelque chose, pas parce que vous ne le voulez pas mais parce que vous êtes dans l’incapacité de l’avoir ? Et bien c’est la même chose sur Internet, bon nombre de gens peuvent me lire sans soucis mais il y en a peut-être qui ne le peuvent pas et pour tous ces gens-là, des solutions existent. Il n’est en aucun cas question d’augmenter son audience, c’est une question de bon sens et de servitude. On ne construit pas des rampes d’accès dans les cinémas pour qu’il y est plus de monde, on en construit pour que les gens qui les utilisent puissent déjà venir…

Bénéfices collatéraux

D’après mes recherches, l’accessibilité tout le monde en parle mais c’est bien tout. Les recommandations sont récentes, des agences web s’y sont mises mais pour la plupart tout reste à faire (ou du moins beaucoup).

Fait intéressant, l’accessibilité touche des points importants dans les domaines du référencement et de la navigation mobile :

- Pour ce dernier, je ne sais pas vraiment si on peut le ratacher à l’accessibilité en tant que telle. On peut se demander si l’accessibilité mobile d’un site est une forme d’accessibilité ? Je dirai que l’accessibilité à proprement dite touche en premier lieu les personnes deficientes.

- Pour le référencement, Google est le premier internaute aveugle ! C’est loin d’être négligeable, voilà pourquoi il est important de s’y mettre.

Nécessaires mais pas suffisants

Un site bien construit : c’est-à-dire un site où la disposition du contenu est correcte (sans feuilles de style bien evidemment, lynx est un très bon navigateur pour ça).

Un site valide : un site valide est un bon site, dans la mesure où il est obligatoire de renseigner les attributs alt, longdesc, title, etc… Des attributs utilisés par les logiciels à synthèse vocale par exemple.

Un design avec des couleurs suffisamment différentes pour pallier certaines déficiences visuelles. Du beige pâle sur du blanc, ça n’aidera pas les personnes à vue faible.

Rendre son site un minimum accessible

Ce qui est nécessaire tout le monde le fait ou presque. Ce qui va faire la différence ce sont les moyens ajoutés pour l’accessibilité. Ainsi on peut ajouter un menu dit d’évitement qui permet d’aller aux emplacements « vitaux » du site Internet. Ce qui est utile dans ce menu :

- un accès rapide à la racine du site

- un accès rapide au menu principale

- un accès rapide au formulaire de recherche

Pour terminer, on doit ajouter un lien en bas de page qui permet de remonter rapidemment en haut du document.

Quid de la navigation clavier ?

Après avoir ajouter un menu d’accès rapide, on va s’intéresser à la navigation clavier.

Le problème ? Et bien en se déplaçant au clavier, la plupart du temps, on ne sait pas vraiment où on se trouve… C’est très génant, il faut donc indiquer à l’internaute où il se situe lorsqu’il navigue avec son clavier.

La solution ? En utilisant CSS et en particulier :focus :

element:focus {
// style de l'element lorsqu'on arrive dessus au clavier
}

La propriété outline est également intéressante, elle définit un cadre autour de l’élément, indépendamment du reste de la page.

Plus loin avec le clavier ! On peut ajouter des raccourcis claviers à notre site. Ceux-ci sont normalisés. A noter qu’on ne doit jamais utilisé autre chose que des chiffres (exceptée pour aller au contenu…). Ces raccourcis claviers sont mis en place avec l’attribut HTML accesskey.

Sur ce site les raccourcis claviers disponibles sont les suivants (sous Windows on utilisera ctrl + alt + touche) :

- Touche s : Passer le menu et d’aller au contenu.

- Touche 0 : Montrer la liste des touches claviers utilisées.

- Touche 1 : Page d’accueil du site.

- Touche 4 : Moteur de recherche du site.

- Touche 7 : Contacts du site, mon CV en somme.

Pour plus de détails, je vous laisse lire l’excellent article d’Alsacréations (avec le « s » !).

Précision sur JavaScript & co

On ne le dira jamais assez mais JavaScript, CSS et toutes autres futilités sont des plus, des détails qui ne livrent pas l’information (encore appellée donnée ou valeur réelle du site). Ainsi le site doit être accessible coûte que coûte et l’information doit être parfaitement lisible.

J’ai récemment ajouté un système de lecture type Facebook sur ce site, en bas de page les articles précédents se chargent automatiquement et s’ajoutent à la suite. Une question pertinente m’a été posée : « Qu’en est-il du référencement ?« , j’ai répondu « Il suffit de regarder le site sans Javascript.« . En effet, vous verrez ce site de la même manière avec ou sans JavaScript.

Attention donc lors du développement !