rechercher sur ergolab

s'abonner au fil rss
newsletter

Entrez votre adresse e-mail pour être informé de l'ajout de nouveau contenu :

 

» En savoir plus

24 Janvier 2004

Accessibilité visuelle
des interfaces web

TAGS : Accessibilité visuelle, Lisibilité

accueil > articles > principes > Accessibilité visuelle des interfaces web

« Liste des articles


Introduction
1. Les enjeux
2. Conventions et niveau minimal d'accessibilité
3. Les moyens d'optimiser l'accessibilité visuelle
Conclusion
Pour en savoir plus...

Introduction

Un objet accessible est par définition un objet que l'on peut atteindre. Si on applique cette définition au domaine de l'ergonomie informatique, optimiser l'accessibilité c'est concevoir ou modifier l'interface de telle sorte que le plus grand nombre d'utilisateurs puisse accéder aux informations.

Cet article a pour objectif d'introduire la problématique de l'accessibilité visuelle sur le web. On proposera aussi des moyens simples pour prendre en compte cet élément dans la conception de sites. La discussion est centrée sur la modalité visuelle, mais l'accessibilité est un concept plus global, qui réfère à toutes les façons de recevoir de l'information.

1. Les enjeux

Le web est un média essentiellement visuel. Puisqu'il représente une source d'informations indispensable, n'importe qui (quelles que soient ses capacités visuelles, son navigateur ou le système qu'il utilise) devrait pouvoir accéder aux informations contenues sur un site web.

Si on revient à la définition de l'ergonomie, il s'agit que ce soit l'outil qui s'adapte aux caractéristiques de l'utilisateur (et non l'utilisateur qui s'adapte aux défauts de conception de l'outil).

On doit donc essayer de concevoir les interfaces pour qu'elles soient accessibles a priori, et non compter sur des moyens techniques pour donner aux déficients visuels la possibilité de contourner un mauvais niveau d'accessibilité.

Quelle population d'internautes vise-t-on quand on parle d'accessibilité visuelle?

- Malvoyants (qui disposent d'outils techniques pour mieux voir l'interface, souvent des systèmes de grossissement de l'écran)

- Non-voyants (qui disposent d'outils techniques pour transformer le message visuel à l'écran en message auditif - c'est le cas des synthèses vocales - ou tactile pour les plages brailles)

- Utilisateurs disposant de navigateurs textes

- Utilisateurs disposant de navigateurs avec les images désactivées

- Plus largement, tous les utilisateurs du web. En effet, on a besoin que l'information nous soit présentée de façon adaptée à la façon dont nous voyons. On doit donc prendre en compte tous les utilisateurs humains… qui pour voir correctement ont besoin d'un niveau optimal de contrastes de luminances entre les caractères et le fond. On doit aussi prendre en compte les utilisateurs atteints de défauts de perception des couleurs (ou dyschromatopsies).

(Note. les déficiences visuelles incluent la malvoyance, les dyschromatopsies et la cécité).

Tous les utilisateurs doivent pouvoir accéder aux informations présentées dans le site web, même si pour cela ils ne recourrent pas aux mêmes outils.





Graphique : 20% de la population française est atteinte de déficience visuelle.



Travailler sur l'accessibilité c'est donc suivre deux axes :


- Optimiser l'affichage à l'écran
- Concevoir l'interface de sorte que cet affichage puisse être traduit de façon efficace dans une autre modalité (auditive pour les synthétiseurs vocaux ou tactile pour les plages braille).

2. Conventions et niveau minimal d'accessibilité

Le seul cadre législatif qui existe aujourd'hui en France est la Circulaire du 7 octobre 1999, relative aux sites internet des services et des établissements publics de l'Etat (pour plus d'informations, consulter le lien dans les lectures complémentaires). Elle mentionne que "Les responsables des sites veilleront tout particulièrement à favoriser l'accessibilité de l'information à tous les internautes, notamment les personnes handicapées, non voyantes, malvoyantes ou malentendantes".

Il n'existe en France aucune obligation d'atteindre un niveau minimal d'accessibilité visuelle. Cependant, on peut faire le choix de respecter certains standards et conventions pour optimiser l'accessibilité visuelle d'un site web.

Les recommandations les plus connues sont éditées par le W3C sous le nom de Web Content Accessibility Guidelines (WCAG, cf. lectures complémentaires). Elles font référence au niveau mondial. La conformité à ces recommandations permet de garantir une qualité d'accessibilité selon plusieurs niveaux (priorités 1, 2 et 3).

Lorsqu'on dit d'un site qu'il est accessible, on ne réfère en général pas au concept d'accessibilité, mais on sous-entend que le site satisfait à ces conventions d'accessibilité.

C'est d'ailleurs la définition de l'accessibilité dans ce qu'on appelle la "Section 508" (cf. lectures complémentaires). Ce texte relatif aux standards d'accessibilité pour les technologies de l'information doit être appliqué pour toutes les interfaces à destination des entités fédérales des Etats-Unis.

La section 508 définit l'accessibilité comme suit: "The term accessible was defined in the proposed rule in terms of compliance with the standards in this part, as is common with other accessibility standards. As proposed, if a product complies with the standards in this part, it is "accessible"; if it does not comply, it is not accessible".

Que ce soit au niveau international ou français, les initiatives sont de plus en plus nombreuses pour permettre aux concepteurs de créer des sites web qui soient visuellement accessibles.

3. Les moyens d'optimiser l'accessibilité visuelle

3.1. Tester l'implémentation des recommandations

Toutes les méthodes qui suivent ne sont que des recommandations pour optimiser l'accessibilité. Il semble essentiel lorsqu'on travaille sur l'accessibilité visuelle d'une page web de connaître les contraintes de chaque cible d'utilisateurs.

Il est donc nécessaire de tester l'implémentation des recommandations en fonction du matériel d'accès au site :

> Tester avec un navigateur classique (Internet Explorer ou Netscape)

> Tester avec un navigateur texte (exemple Lynx ou BrailleSurf)

> Tester avec un navigateur alternatif (par exemple Opéra) et désactiver l'affichage des images

> Tester avec une synthèse vocale (exemple Jaws). Tester différents réglages qui modifient le comportement de la synthèse, les éléments qu'elle lit ou auxquels elle donne priorité.

3.2. Utilisation des couleurs

3.2.1. Contrastes

Le premier élément permettant d'optimiser l'accessibilité visuelle d'un site est de travailler sur les contrastes de luminances à l'écran.

On peut d'abord s'assurer que les contrastes entre les caractères et le fond sont suffisants et correspondent aux recommandations. Pour plus de détails, lire l'article Faciliter la lecture d'informations sur le web.

On utilise souvent les couleurs pour différencier les informations. Il faut donc s'assurer que l'information de différence est toujours présente lorsque la perception des couleurs est impossible.

» Tester en niveaux de gris




Copies d'écran de la navigation de premier niveau du site Ergolab et du site Chromino.

Sources : www.ergolab.net, www.chromino.com/contact

- La navigation de premier niveau du site Ergolab en couleurs RVB et en niveaux de gris.
- La navigation du site Chromino en couleurs RVB et en niveaux de gris.




» Tester avec des outils simulant la dyschromatopsie (Exemple : le CBC)

Le système de ColorBlindnessCheck (CBC, édité par Q42, cf. lectures complémentaires) est basé sur un algorithme permettant de simuler la perception d'un site web par un protanope.

La protanopie est le type de daltonisme le plus fréquent, correspondant à l'absence du gène permettant de voir le rouge. Le CBC recolore la page web avec la palette de couleurs qu'un protanope a à sa disposition pour voir le monde.

Ce système permet de tester la page selon 3 niveaux d'atteinte de la perception de la couleur rouge : 0, 70 et 100%.




Illustration du site Boursicocotte sans atteinte de la perception des couleurs et avec le niveau 100% du CBC (pas de pigment rouge).

Source : www.boursicocotte.com

Un extrait du site Boursicocotte sans atteinte de la perception des couleurs et
avec le niveau 100% du CBC (pas de pigment rouge).




3.2.2. Lorsque la couleur est utilisée pour signifier quelque chose, la doubler par un autre moyen de comprendre l'information

On se base souvent sur des changements de couleurs pour représenter des informations fonctionnelles. Par exemple dans le domaine des alertes, on utilise le vert pour signifier un état nominal et le rouge pour signifier un état critique.

8.5% des personnes ne perçoivent pas les couleurs de façon optimale. Cette proportion est si importante que l'on ne peut pas se permettre de transmettre une information uniquement par le biais de la couleur.

L'importance de cette recommandation est directement liée à l'importance de l'information à transmettre : si elle est capitale, on doit absolument la doubler par un autre canal. Si elle est secondaire, on peut se permettre de ne pas la doubler.

Les éléments qui permettent de doubler l'information apportée par la couleur sont :
- les textes
- les icônes
- le changement de forme d'un élément de l'interface ou du système
- le changement de comportement d'un élément de l'interface ou du système



Illustration de la navigation de premier niveau, site Camelot.

Source : www.camelot-lejeu.com

Les couleurs sont utilisées en tant qu'élément d'information. Elles ne sont cependant pas le seul vecteur d'information :

- La rubrique active est la rubrique "questions / réponses". Cette information nous est fournie à la fois par la couleur du bouton de navigation et par le titre de la page.

- La rubrique sur laquelle est positionnée la souris est la rubrique "téléchargements". Cette information nous est fournie à la fois par la couleur du bouton de navigation, la forme du pointeur et le texte affiché dans l'info-bulle.



3.3. Construire la page web de façon à faciliter sa lecture par les systèmes alternatifs aux navigateurs classiques

3.3.1. Définir pour chaque image un substitut textuel

Il est essentiel de permettre aux systèmes de comprendre tous les éléments non textuels mais qui transmettent de l'information.

Ces éléments imagés peuvent être de plusieurs types :

- images supportant la navigation (images de menus, boutons)
- images présentant un contenu textuel (un titre par exemple)
- images illustratives
- images supportant la construction de la page

En html, les substituts textuels sont déclarés dans l'image par l'attribut [alt] (voir les exemples ci-dessous). Ces attributs sont compris par les synthétiseurs vocaux, les navigateurs en mode texte, et sont affichés dans les navigateurs classiques par une info-bulle.


» Images supportant la navigation


Illustration de la navigation de premier niveau, site Elixir.

Source : www.elixir-lejeu.com/infospresse

> Télécharger la lecture du menu d'Elixir par une synthèse vocale (Jaws 4.02) - format mp3, 225 Ko.

Chaque rubrique du site est représentée dans le menu par une image. On a donné à chacune de ces images un attribut [alt], qui permet à Jaws de transmettre la même information que celle qui apparaît visuellement (les titres des rubriques) et pas le nom de l'image.

Pour la première image (bouton accueil), le code html prend la forme suivante:
<img src="../images/n1_a.gif" width="78" height="23" border="0" alt="accueil">




» Images présentant un contenu textuel

Au-delà des images de menu, on peut être amené à présenter du texte sous forme d'image… pour que ce soit plus joli.

Cependant, si on fait ce choix, on doit aussi proposer un attribut [alt] pour que la synthèse vocale ou le navigateur texte puisse interpréter la signification de l'image :



Illustration de l'attribution d'un [alt] à une image présentant un contenu textuel (site Ergolab, module prochain article).

Source : www.ergolab.net/articles

> Télécharger la lecture du module "prochain article" par une synthèse vocale (Jaws 4.02) - format mp3, 88 Ko.




» Images illustratives

Les images illustratives sont de deux types : celles qui sont représentatives et celles qui ne le sont pas… On doit décider de celles auxquelles on attribue un [alt]. En général, le choix se fait en fonction du type d'image. Les images représentatives sont celles qui bénéficient le plus de la déclaration d'un attribut [alt].

On peut ainsi associer un titre à des photos illustratives (et c'est ce titre qui sera transmis par la synthèse vocale, le navigateur texte ou l'info-bulle) :





Illustration de l'attribution d'un [alt] à une image illustrative (site Ergolab, couverture de Don't Make Me Think).

Source : www.ergolab.net/livres/dont-make-me-think.html


On doit donc décrire le contenu de l'image dans un [alt] lorsque c'est pertinent. Sinon, on recommande d'attribuer un [alt] vide. Certaines configurations de synthèses vocales sont censées comprendre ce type d'attribut et traiter l'image comme une image inutile, donc ne pas la prendre en compte. Tous les systèmes ne semblent cependant pas comprendre cette expression.


» Images servant la construction de la page

On recommande d'attribuer un [alt] vide.


3.3.2. Conception des liens


» Eviter les liens généraux ou définir des titres pour ces liens non explicites

On recommande de ne pas concevoir de liens qui en dehors du contexte n'ont pas de signification précise (de type : "cliquez ici", "plus", "lire la suite", "voir plus"…).
Lorsque ce type de lien est adopté, on devra définir une balise [title] permettant au même titre qu'un [alt] d'ajouter une information à l'élément.

Cette balise de titre sera lue par les synthèse vocales (on peut même régler la synthèse pour qu'elle donne la priorité à ces balises), affichée par les navigateurs textes et présentée par une info-bulle par les navigateurs classiques.



Illustration de l'attribution d'un [title] à un lien non explicite (site Ergolab : au lien lire la suite est attribué le title Lire la chronique de Don't Make Me Think).

Source : www.ergolab.net/livres

> Télécharger la lecture par une synthèse vocale (Jaws 4.02) - format mp3, 241 Ko.

Pour le lien "lire la suite", le code html prend la forme suivante:
<a href="dont-make-me-think.html" class="lk1" title="Lire la chronique de &quot;Don't make me think&quot;">» lire la suite</a>




3.3.3. Utiliser des moyens techniques permettant de séparer contenu et forme

A l'heure actuelle, le langage standardisé le plus utilisé pour séparer contenu et forme est le CSS 2 (Cascading Style Sheets, niveau 2, cf. lectures complémentaires).

Il consiste à travailler avec des feuilles de styles, à la fois pour la mise en page (organisation spatiale des éléments dans la page) et pour l'apparence, le format de chacun des éléments dans cette page.

On contourne ainsi tous les problèmes du langage html dus aux contraintes de présentation. Les systèmes alternatifs sont en mesure de comprendre les CSS et d'extraire le contenu qui leur est utile.


3.3.4. Fournir des moyens aux utilisateurs de sauter les éléments répétés sur toutes les pages

Cette problématique concerne en général le parcours des éléments de navigation. Il s'agit de fournir aux utilisateurs la possibilité d'aller directement consulter le contenu de la page, comme on le fait lorsqu'on consulte une page visuellement.

Ce type de lien (souvent appelé skip link) a une utilité plus ou moins grande selon le type de pages. En effet, il servira surtout sur les pages de contenu pur, lorsque l'utilisateur a déjà navigué pour trouver ce contenu.

Cependant, il est important de garder une cohérence dans les choix : soit on utilise ce type de liens sur tout le site, soit on ne l'utilise pas.


» Lecture d'un skip link par une synthèse vocale


> Télécharger la lecture du menu d'Ergolab par une synthèse vocale (Jaws 4.02) - fichier mp3, 161 Ko.

Les éléments de navigation sont précédés par ce qu'on appelle un "skip link", et qui correspond à un lien ancre permettant d'accéder directement au contenu.




» Traitement d'un skip link par Braille Surf

BrailleSurf est un navigateur web qui permet une lecture simplifiée des pages web en les affichant sous forme textuelle.

Le système permet de traiter ce texte en le transférant à une plage braille ou à une synthèse vocale.

Un skiplink dans BrailleSurf apparaît comme un lien classique, intitulé par le nom que lui a donné le concepteur de la page web. Un exemple :


Illustration de l'affichage d'un skip link dans Braille Surf.


Conclusion

L'accessibilité visuelle du web est un enjeu considérable. Les solutions qui existent aujourd'hui pour l'optimiser sont pour la plupart des solutions simples, qui peuvent être appliquées par tout concepteur de sites web.

La problématique est cependant récente, et il reste beaucoup de travail à effectuer, à la fois au niveau normatif (quels standards doivent être respectés, qui doit les respecter ?) et au niveau des moyens techniques pour améliorer cette accessibilité (évolution des langages).

Pour en savoir plus

» Ressources en ligne

Pilgrim, M. Dive Into Accessibility - 30 days to a more accessible web site. Un document original, complet et concret. Possibilité de consulter les recommandations selon les personnages virtuels du livre (qui présentent chacun des caractéristiques particulières), le type de handicaps, le principe de conception, le type de navigateur ou l'outil de publication (réfère aux outils de gestion de contenu).

> Dive Into Accessibility en anglais (Mark Pilgrim)
> Dive Into Accessibility en français (traduction de Karl Dubost) :

Rubrique accessibilité du site Microsoft France.

Accessible web authoring resources and education center. Notamment une section "resources" incontournable.

Section Cascading Style Sheets du site du W3C.

Accessiweb, Centre de ressources et de recherche sur l'accessibilité du Web.

Safe Web Colours for colour-deficient vision, section du site BTexact.

Textes légiférant sur l'accessibilité des sites web (Recensement par pays, W3C).

Circulaire du 7 octobre 1999 relative aux sites internet des services et des établissements publics de l'Etat.

BrailleNet, "une porte sur le Web pour les personnes handicapées visuelles".

VisuaFriendly, société française spécialisée dans l'accessibilité visuelle du web, propose un service de personnalisation et simplification d'utilisation des sites, LabelVue.

L'accessibilité du web aux personnes mal-voyantes. Ernu, J. & Garcia, D. (2002). Veblog.

L'ergonomie des interfaces à l'usage des publics déficients visuels. Ernu, J.

Rapport Descargues : L'accessibilité des nouvelles technologies de l'information et de la communication aux personnes aveugles et malvoyantes. Ministère de l'Emploi et de la Solidarité. R. Descargues (2000).

AnyBrowser, une initiative pour que le maximum de sites web soient accessibles avec n'importe quel navigateur.

OUTILS :

Version d'essai de la synthèse vocale Jaws

(commercialisé par Freedomscientific). Utilisation possible pendant 40 min consécutives.

Version d'essai de la synthèse vocale Jaws en français (commercialisé par VisuAide). Utilisation possible pendant 40 min consécutives.

Page de téléchargement de BrailleSurf 4.

Le ColorBlindnessCheck, proposé par Q42.

Ncolor, un outil pour étudier les contrastes de couleurs à l'écran et les visualiser en fonction de plusieurs types d'atteintes de la perception des couleurs.

Cynthia Says, outil de validation de l'accessibilité des contenus web (références : section 508 et WCAG)




« Liste des articles

à voir aussi sur Ergolab
Créer des sites web accessibles à tous

Alexandre Afchain & Julien Lanceraux

» Lire la chronique


Web Content Accessibility Guidelines Working Group (WCAG WG)

Les guidelines de la WAI, la "section" accessibilité du W3C.

» Visiter le site


Building Accessible Websites - Joe Clark

Version pdf du chapitre 9 (Type and Colour) sur le site de New Riders. Pourquoi et comment traiter les textes et les couleurs dans l'optique de l'accessibilité visuelle d'un site.
(Cliquer sur l'onglet Sample content)

» Visiter le site


ergolab