Webmaster Hub - Format normal - Les publications

L’informatique (matériel et logiciel) offre un fabuleux support des informations et connaissances. Internet permet de les véhiculer et de les partager. L’idée de base est de rendre ces informations accessibles à chacun, indépendamment du type de navigateur, du système d’exploitation...

Un langage de description, le HTML, a été créé dans ce but (voir l’article Les standards du Web). Mais, d’une part Netscape et Microsoft se sont livré à "la guerre des navigateurs" à grand renfort de balises propriétaires (interprétées uniquement par leur navigateur respectif), d’autre part les concepteurs ont détourné l’usage de diverses balises pour le design de leurs sites. Beaucoup de sites sont donc inaccessibles à un grand nombre de personnes.

Le support numérique a ouvert de nouvelles portes aux personnes handicapées par un problème visuel (mal-voyants ou non-voyants) : accès facilité à la culture et à l’actualité, nouveaux emplois, indépendance accrue... Les sites Web, par leur mise à jour rapide, devraient y jouer un grand rôle. Malheureusement beaucoup sont très difficiles à parcourir, et même parfois tout à fait inaccessibles, par méconnaissance de quelques règles simples.

Un site accessible ?

Un site dont le code est conforme aux spécifications du W3C et qui fait appel aux feuilles de style présentera déjà des conditions d’accessiblité de base :

• Indication de la langue, nécessaire aux navigateurs vocaux pour une prononciation adaptée html lang="fr"
• Utilisation correcte de l’attribut alt de la balise img (explications ci-dessous)
• Utilisation des feuilles de style pour séparer le contenu et la mise en forme (un lecteur vocal ne devra pas lire toutes ces indications inutiles pour le visiteur comme les font-size...)
• Utilisation de la balise ul pour les listes de liens (les menus par exemple, peuvent être affichés verticalement ou horizontalement à l’aide des css)
• Ne pas ouvrir de lien dans une nouvelle fenêtre avec la balise target="_blank (l’utilisation du bouton de retour aux pages précédentes doit rester opérationnel)

Quelques autres règles simples permettent d’aller plus loin encore :

• Ne pas utiliser de liens JavaScript (ils ne sont pas supportés par les navigateurs textes)
• Définir des titres de pages significatifs dans la balise title (avec un navigateur vocal, un raccourci clavier permet de lister les pages ouvertes par exemple, il est évident que seul un titre significatif permettra de choisir la page recherchée)
• Utiliser l’attribut title des liens (surtout si le texte du lien n’est pas significatif)
• Pour les données tabulaires, utiliser les balises th (cellules en-tête du tableau), caption (titre du tableau), les balises thead, tfoot et tbody (qui regroupent les rangées), (l’attribut headers (spécifie la liste des cellules de rubrique)
• Pour les formulaires, utiliser la balise label qui fournira une étiquette cliquable à chaque élément
• Présenter le contenu principal au début de la page (facile à réaliser avec les feuilles de style), à défaut utiliser un lien permettant de sauter les liens de navigation (ce lien peut être caché aux navigateurs graphiques en utilisant css)

Le cas particulier des images

• Pour une image complémentaire au contenu ou apportant une information utile, le contenu de l’attribut alt doit être aussi court que possible mais significatif
• Pour une image complexe (un graphique, par exemple), l’attribut longdescr permet de transmettre les informations apportées par l’image
• Une image destinée uniquement à améliorer le design de la page, peut être utilisée comme image de fond avec la propriété background-image (grâce aux feuilles de style) chaque fois que cela est possible
• Pour une image non significative, l’attribut alt doit être présent mais laissé vide
• Pour une image de liste à puces, l’utilisation de l’astérix * dans l’attribut alt permet de donner un rendu de la liste (pour éviter que ce contenu ne s’affiche en bulle dans les navigateurs graphiques, il suffit d’ajouter un attribut title vide) mais la meilleure technique reste l’ajout de l’image dans la feuille de style

Faciliter la lecture aux mal voyants

• Le choix des couleurs, et plus particulièrement du contraste fond/texte, est important (pour les daltoniens, par exemple un texte bleu sur fond rouge scintille)
• Les différents états d’un lien sont souvent distingués par des couleurs, il est utile d’y associer une distinction indépendante de la couleur (gras, souligné, italique...)
• Les tailles de polices en unités relatives permettent d’agrandir la taille du texte (très utile quand l’accuité visuelle diminue avec l’âge)
• Le texte est plus facile à lire si les lignes ne sont pas trop longues et s’il est présenté en plusieurs paragraphes (donc plus aéré)
• Eviter "tout ce qui bouge" comme les textes défilants ou les gifs animés (le regard est attiré par ces éléments, ce qui rend la lecture plus pénible)

Les problèmes visuels ne sont pas les seuls obstacles à la navigation sur le Net, il y a aussi les problèmes moteurs qui empêchent l’utilisation efficace de la souris (ce qui peut arriver à n’importe qui, il suffit d’un bras cassé).

Dans ce cas, les aides à la navigation sont indispensables :

• La mise en place de raccourcis clavier (accesskey) pour atteindre les éléments importants du site
• La définition de l’ordre dans lesquels seront cliquables permet une utilisation efficace de la touche Tab pour passer de lien en lien (attribut tabindex)
• Si le site comprend un grand nombre de pages, il est utile de proposer un moteur de recherche interne facilement accessible

Le 5 mai 1999, la WAI (Web Accessibility Initiative) du W3C (World Wide Web Consortium) publiait la version 1.0 des directives pour l’accessibilité aux contenus Web (WCAG).

Plusieurs organismes ont mis au point une liste de critères. Ces derniers sont classés par niveaux de priorité, depuis l’accessibilité de base facile à mettre en oeuvre (un minimum que tout site devrait respecter) jusqu’au niveau 3 (site totalement accessible). Un label d’accessibilité peut être attribué au site.

Dans plusieurs pays (Belgique, France, Suisse, Allemagne...), les nouveaux sites officiels sont obligés de respecter un niveau minimum d’accessibilité et les anciens doivent se mettrent progressivement en règle. Rien n’existe encore pour les autres sites, mais pourquoi attendre des lois pour rendre votre site accessible ?

Quelques liens utiles

Les recommandations du W3C (en français)

Des informations pratiques :
 Plongez dans l’accessibilité
 acces-pour-tous
 les tableaux
 Introduction à l’accessibilité Les différents types d’handicap, des solutions...

Des outils :
 Opquast Bonnes pratiques qualité pour les services en ligne
 Ocawa
 Wave Web Accessibility Tool (en anglais)
 Bobby (en anglais)

Les portails : label, liens...
 AccessiWeb
 BrailleNet
 BlindSurfer
 Voir+

Une présentation du matériel utilisé :
 L’accessibilité des sites Web pour les personnes malvoyantes Site à découvrir absolument, notamment un exemple concret de réalisation d’un site accessible

[ Commentez l’article "L’accessibilité" sur le forum Webmaster-hub