7e Forum Européen de l'Accessibilité Numérique :

Faire de l'e-accessibilité une compétence professionnelle

18 Mars 2013, 9h-18h
Cité des sciences, Paris

 
  English version
Version imprimable

Atelier : Améliorer la lisibilité typographique à l'écran avec Accessiweb

Romy Duhem Verdière (Paris, France)
Alter Way
romy.duhem-verdiere (at) alterway.fr

Information sur l'auteur


logo Alterway

Romy Duhem-Verdière est consultante web UX pour Alter Way. Elle apporte son expertise en conception web, où elle privilégie la simplicité et l’efficacité. Romy intervient aussi pour auditer et mettre en accessibilité, selon la méthode d’application Accessiweb. Soucieuse de qualité, de sémantique et d’utilisabilité, Romy documente et partage ses réflexions sur son blog (romy.tetue.net) depuis 2000.

 

Résumé


Un tiers des internautes français ont plus de 50 ans et 85 % d’entre eux ont des problèmes de vue. Le principal reproche que les seniors font aux sites web est leur manque de clarté et la taille des caractères est déterminante. Améliorer le confort de lecture à l’écran est donc primordial pour eux, mais aussi pour les dyslexiques. De plus en plus de gens se connectent à Internet depuis leurs appareils mobiles et cette tendance ne fait que s’accentuer. Le moindre débit des connexions en mobilité placent le texte comme contenu principal, incontournable. La grande diversité des tailles et qualités d’écran des terminaux actuels et les différentes situations de consultation, réclament de veiller au rendu textuel. On l’a toujours dit : le webdesign, c’est 95 % de typographie.

Quels sont les critères d’accessibilité qui se préoccupent de lisibilité typographique ?

Dans le référentiel Accessiweb 2.1 : 3.3, 10.4, 10.6, 10.9, 10.11, 10.12. Ce sont plutôt des critères de confort, puisque la moitié sont de niveau AAA, mais ils sont faciles à mettre en oeuvre, pour un résultat mélioratif immédiat. Cela peut constituer les premières petites victoires d’une démarche d’accessibilité où l’on progresse pas à pas.

Tels qu’ils sont énoncés, ces critères nous indiquent les points à atteindre, mais pas vraiment comment faire. C’est le but de cette présentation illustrée dont voici le plan et le résumé :

  1. Respecter les règles de la langue dans laquelle on s’exprime, tant l’orthographe que la typographie, notamment veiller à conserver les accents sur les lettres capitales.
  2. Pouvoir zoomer le texte à 200 % est une nécessité. Le plus simple est encore de laisser le texte principal à 100 %, pour qu’il s’affiche d'emblée dans une taille suffisante, celle paramétrée par l'utilisateur pour chaque terminal.
  3. Ne pas justifier le texte car cela freine la lecture, d'autant plus sur le Web, où il est impossible de gérer correctement l’approche ni les césures.
  4. Augmenter l’interlignage, par défaut insuffisant, à 1.5 minimum : les textes deviennent tout de suite plus lisibles. Espacer les paragraphes d'autant.
  5. Caractères par ligne : la largeur du texte est fonction de la largeur d’écran, particulièrement en responsive webdesign, mais on veillera à ne pas dépasser 80 caractères par ligne.
  6. Contraster suffisamment le texte par rapport à son arrière-plan, mais aussi les liens par rapport au texte environnant.
  7. Police de caractères : prévoir des alternatives, en privilégiant les polices optimisées pour l’écran.

Ces bonnes pratiques, qui s'appliquent majoritairement au moment de la conception et de l’habillage graphique, garantissent une bonne lisibilité de la page web et valident les critères Accessiweb précités.

À vous de jouer maintenant !

Documents



Retour à la liste des articles
Aide - Plan du site - Contactez-nous
Valid XHTML 1.0 TransitionalCSS Valide !