Chapitre : Construire un site " user centric " respectant les critères d'accessibilité

Être accessible, c'est augmenter la satisfaction des utilisateurs

En résumé

Un site doit être accessible à tous en prenant en compte les handicaps des utilisateurs. Voyants ou malvoyants doivent accéder à l'ensemble des contenus du site : textes, images ou vidéos. Les personnes avec un handicap visuel utilisent des lecteurs d'écran et/ou des fonctionnalités permettant d'agrandir, de contraster les contenus. Microsoft a intégré aux systèmes d'exploitation Windows, l'utilitaire Narrateur et une Loupe pour écran. Un site web accessible est souvent pour les internautes plus facile d'utilisation et plus rapide. L'accessibilité n'est pas uniquement un acte de citoyenneté, c'est aussi un facteur de référencement naturel et un levier de croissance du chiffre d'affaires en ligne.

www.w3.org/TR/WCAG

Accédez aux Web content accessibility guidelines 2.0 (WCAG, en anglais)

Pourquoi l'utiliser ?

Objectif

Il s'agit pour le digital entrepreneur de concevoir un site web qui respecte les principaux critères d'accessibilité. Le site sera ainsi facilement décrypté par les technologies utilisées par les malvoyants pour naviguer sur internet.

Contexte

Prendre en compte l'accessibilité est une nécessité afin de développer le nombre de visites sur un site. 1 Français sur 100 est malvoyant. Les déficiences visuelles augmentent avec l'âge à partir de 60 ans. 30 % des internautes sont des seniors avec une forte augmentation de la tranche des + 65 ans

Sources : Médiamétrie et la FAF.

Comment l'utiliser ?

Étapes

Pour faciliter le déchiffrage des lecteurs d'écran il est souhaitable de :

• Indiquer la langue de la page LANG = " fr " en haut du code HTML au-dessus de la HEAD.
• Décrire les images : attribuer un texte alternatif de moins de 10 mots. Dans le cas, d'une image complexe qui a besoin d'explications longues comme un histogramme, faire un lien vers une page décrivant l'image.
• Structurer le texte en utilisant des titres, paragraphes, puces et numéros.
• Construire clairement les tableaux. Donner leur un titre court en utilisant la balise <caption>. Relier les contenus des cellules aux titres des colonnes en utilisant les balises <th> <td> et les attributs Id et Headers.
• Nommer les liens. Chaque intitulé doit être différent et de moins de 80 caractères pour que le temps de découverte ne soit pas trop long. Pour donner un complément d'information, il est possible d'utiliser l'attribut Title sans dépasser 120 caractères.
• Faciliter le remplissage des formulaires en faisant un lien entre les champs à renseigner et les informations demandées en utilisant la balise <label>. Donner un titre à chaque bloc d'information en utilisant la balise <legend>. Faciliter la navigation avec le clavier en attribuant un ordre de tabulation en utilisant les balises <tabindex>.

Méthodologie et conseils

Attribuer un texte aux boutons de validation des formulaires : indiquer " envoyer " dans l'attribut Alt.

Indiquer le temps nécessaire pour remplir le formulaire.

Indiquer les champs obligatoires par des astérisques et non des couleurs.

Éviter d'utiliser les couleurs comme code de navigation. Les personnes malvoyantes ne les distinguent pas. Utiliser à la place des formes.

Jouer sur les contrastes entre couleurs des textes et des fonds.

Intégrer un plan de site. Il aide l'utilisateur à comprendre la structure du site.

Tester l'accessibilité du site avec l'" Accessibility Evaluation Tool Bar " (plugin Firefox).¦