Améliorer la lisibilité typographique à l écran avec Accessiweb par Romy Duhem-Verdière 7e Forum Européen d Accessibilité Numérique 2013
Romy Duhem-Verdière Consultante web UX http://romy.tetue.net @tetue
Les seniors : 1/3 des internautes français 85 % ont des problèmes de vue 3 Source : Ipsos, Datamonitor, Insee/Sesi Le boom des seniors tactiles : http://romy.tetue.net/962
8 à 12 % de la population mondiale serait dyslexique 8 à 10 % de la population masculine est daltonienne 4 Source : OMS et Wikipédia
1. Respecter les règles de la langue 2. Pouvoir zoomer le texte 3. Ne pas justifier 4. Augmenter l interlignage 5. Caractères par ligne 6. Contraster 7. Police de caractères 5
Référentiel Accessiweb 2.1 6 Voir en ligne : http://www.accessiweb.org/index.php/accessiweb_2.1_liste_generale
Respecter les règles de la langue 7
UN GENDARME TUE 8
Accentuer les capitales UN GENDARME TUÉ Lexique des règles typographiques en usage à l Imprimerie nationale, page 12 Notice AcceDeWeb No 6.1 WCAG 2.0 No 3.1 9 Accentuez les lettres capitales et majuscules : http://wiki.accede-web.com/notices/graphique-ergonomique/conserverles-accents-sur-les-lettres-capitales
FORTS DE LEURS CONQUÊTES, LES ROMAINS N HÉSITAIENT PAS À GRAVER DES TEXTES SUR DE LA PIERRE. TOUT EST ÉCRIT EN CAPITALES SANS AUCUNE PONCTUATION. POUR GAGNER EN LISIBILITÉ, LES MOTS ÉTAIENT SÉPARÉS PAR UN POINT MÉDIAN. AU FUR ET À MESURE, LES LETTRES SE SONT PROGRESSIVEMENT DÉFORMÉES EN RAISON DE LA RAPIDITÉ D ÉCRITURE. CE QUI A DONNÉ NAISSANCE AUX MINUSCULES QUE NOUS CONNAISSONS. 10 La capitale dans le texte : http://www.ornicar.be/capitale-texte/
Forts de leurs conquêtes, les Romains n hésitaient pas à graver des textes sur de la pierre. Tout est écrit en capitales sans aucune ponctuation. Pour gagner en lisibilité, les mots étaient séparés par un point médian. Au fur et à mesure, les lettres se sont progressivement déformées en raison de la rapidité d écriture. Ce qui a donné naissance aux minuscules que nous connaissons. Éviter les capitales 11 Des minuscules sinon rien : http://www.graphemes.com/enews/41/41minuscule.html
Éviter les capitales 12
Pouvoir zoomer le texte 13
Pouvoir zoomer le texte à 200 % Critère Accessiweb 2.1 No 10.4 [Argent] Test RGAA 2.2 No 7.13 [AA] 14 Source : http://www.voyages-sncf.com/guide/accessibilite Améliorer l accessibilité par la typographie : http://www.pompage.net/ traduction/ameliorer-l-accessibilite-par-la-typographie
15 Et le confort de lecture des sites Web? http://blog.webatou.info/post/et-le-confort-de-lecture-des-sites-web
16px 11pt Laisser le texte à 100 % 16 Relative readability, by Wilson Miner, 2008 http://wm4.wilsonminer.com/posts/2008/oct/20/relative-readability/
Laisser le texte à 100 % Responsive Typography: The Basics, by Oliver Reichenstein, 2012 http://informationarchitects.net/blog/responsive-typography-the-basics/ 17
Ne pas justifier 18
Ne pas justifier Critère Accessiweb 2.1 No 10.9 [Or] Test RGAA 2.2 No 7.12 [AAA] 19 Le texte se justifie-t-il? http://www.ergologique.com/conseils/conseils.php?id_tip=818
Augmenter l interlignage 20
Augmenter l interlignage à 1.5 Critère Accessiweb 2.1 No 10.12 [Or] Test RGAA 2.2 No 7.17 [AAA] WCAG 2.0 No1.4.8 [AAA] 1.2 1.5 21 Manifeste pour un interlignage minimum syndical : http://css.4design.tl/manifeste-pour-un-interlignage-minimum Source : http://www.lefigaro.fr/international/20060906.www000000341_bush_prison
Espacer les paragraphes à 1.5 Critère Accessiweb 2.1 No 10.12 [Or] Test RGAA 2.2 No 7.17 [AAA] WCAG 2.0 No1.4.8 [AAA] 22 Source : 7 Usability Mistakes That Will Kill Your Online Salesl http://blog.kissmetrics.com/7-usability-mistakes/
Caractères par ligne 23
24
60 à 80 caractères par ligne Critère Accessiweb 2.1 No 10.11 [Or] WCAG 2.0 No1.4.8 [AAA] 66 25 Source : Enlarge your police http://phollow.fr/2012/02/enlarge-your-police
Laisser 25 % à 50 % d espace «blanc» sur chaque page Aérer l information : http://www.ergologique.com/conseils/conseils.php?id_tip=17 Webdesign : difficile de vendre du vide, et pourtant http://blog.axe-net.fr/webdesign-difficile-de-vendre-du-vide/ 26
Contraster 27
Contraster suffisamment Critère Accessiweb 2.1 No 3.3 [Argent] WCAG 2.0 No1.4.3 [AA] 28 Source : http://www.typogabor.com/typographie-analyse/pages/lisibilite- NauB_4.html
Contraster suffisamment Critère Accessiweb 2.1 No 3.3 [Argent] WCAG 2.0 No1.4.3 [AA] 29 Outil : Colour Contrast Check Contrastes de texte : http://openweb.eu.org/127
Contraste négatif Préférer un contraste négatif (dit «noir sur blanc») Contraste positif 30 Contraste et lisibilité : http://s.billard.free.fr/referencement/index.php? 2005/07/03/103-contraste-et-lisibilite
Préférer un fond blanc cassé 31
Couleurs et lisibilité 32 Source : http://www.fangpo1.com/ja/content/view/64/48/
Le contraste suffit-il? Critère Accessiweb 2.1 No 10.6.1 [Bronze] Test RGAA 2.2 No 7.10 [A] 33 Un contraste suffit-il à distinguer un lien? http://storify.com/tetue/la-couleur-suffit-elle-a-distinguer-un-lien Source : http://www.philippe-donnart.com/lire-un-pdf-sur-kindle.html
Combien identifiez-vous de liens sur cette page? 34 Source : http://www.bouygues.com/developpement-durable/axes-strategiques/en
Rendre évident ce qui est cliquable Critère Accessiweb 2.1 No 10.6 [Bronze] Test RGAA 2.2 No 7.10 [A] Rendre évident ce qui est cliquable http://www.ergologique.com/conseils/conseils.php?id_tip=10 35 Soulignez vos hyperliens! http://romy.tetue.net/913
Police de caractères 36
37
Préférer une police conçue pour l écran CSS Typography: The Basics http://sixrevisions.com/css/css-typography-01/ Stop Arial 11px! http://romy.tetue.net/stop-arial-11px 38
Police pour les dyslexiques Police de caractères pour les dyslexiques : http://opendyslexic.org 39
Critères validés 40
3.3 [Argent] Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers)? 10.4 [Bronze] Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu à 200 %, au moins? 10.6 [Bronze] Dans chaque page web, chaque lien dont la nature n est pas évidente est-il visible par rapport au texte environnant? Référentiel Accessiweb 2.1 10.9 [Or] Pour chaque page web, le texte ne doit pas être justifié. Cette règle est-elle respectée? 10.11 [Or] Pour chaque page web, les blocs de texte ont-ils une largeur inférieure ou égale à 80 caractères (hors cas particulier)? 10.12 [Or] Pour chaque page web, l espace entre les lignes et les paragraphes est-il suffisant? 41 Voir en ligne : http://www.accessiweb.org/index.php/accessiweb_2.1_liste_generale
Des questions? Romy Duhem-Verdière Consultante web UX http://romy.tetue.net @tetue Voir en ligne : http://romy.tetue.net/965