la lisibilité typographique à l écran

Transcription

1 Améliorer la lisibilité typographique à l écran avec Accessiweb par Romy Duhem-Verdière 7e Forum Européen d Accessibilité Numérique 2013

2 Romy Duhem-Verdière Consultante web UX

3 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 :

4 8 à 12 % de la population mondiale serait dyslexique 8 à 10 % de la population masculine est daltonienne 4 Source : OMS et Wikipédia

5 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

6 Référentiel Accessiweb Voir en ligne :

7 Respecter les règles de la langue 7

8 UN GENDARME TUE 8

9 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 Accentuez les lettres capitales et majuscules :

10 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 :

11 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 :

12 Éviter les capitales 12

13 Pouvoir zoomer le texte 13

14 Pouvoir zoomer le texte à 200 % Critère Accessiweb 2.1 No 10.4 [Argent] Test RGAA 2.2 No 7.13 [AA] 14 Source : Améliorer l accessibilité par la typographie : traduction/ameliorer-l-accessibilite-par-la-typographie

15 15 Et le confort de lecture des sites Web?

16 16px 11pt Laisser le texte à 100 % 16 Relative readability, by Wilson Miner,

17 Laisser le texte à 100 % Responsive Typography: The Basics, by Oliver Reichenstein,

18 Ne pas justifier 18

19 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?

20 Augmenter l interlignage 20

21 Augmenter l interlignage à 1.5 Critère Accessiweb 2.1 No [Or] Test RGAA 2.2 No 7.17 [AAA] WCAG 2.0 No1.4.8 [AAA] Manifeste pour un interlignage minimum syndical : Source :

22 Espacer les paragraphes à 1.5 Critère Accessiweb 2.1 No [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

23 Caractères par ligne 23

24 24

25 60 à 80 caractères par ligne Critère Accessiweb 2.1 No [Or] WCAG 2.0 No1.4.8 [AAA] Source : Enlarge your police

26 Laisser 25 % à 50 % d espace «blanc» sur chaque page Aérer l information : Webdesign : difficile de vendre du vide, et pourtant 26

27 Contraster 27

28 Contraster suffisamment Critère Accessiweb 2.1 No 3.3 [Argent] WCAG 2.0 No1.4.3 [AA] 28 Source : NauB_4.html

29 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 :

30 Contraste négatif Préférer un contraste négatif (dit «noir sur blanc») Contraste positif 30 Contraste et lisibilité : /07/03/103-contraste-et-lisibilite

31 Préférer un fond blanc cassé 31

32 Couleurs et lisibilité 32 Source :

33 Le contraste suffit-il? Critère Accessiweb 2.1 No [Bronze] Test RGAA 2.2 No 7.10 [A] 33 Un contraste suffit-il à distinguer un lien? Source :

34 Combien identifiez-vous de liens sur cette page? 34 Source :

35 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 35 Soulignez vos hyperliens!

36 Police de caractères 36

37 37

38 Préférer une police conçue pour l écran CSS Typography: The Basics Stop Arial 11px! 38

39 Police pour les dyslexiques Police de caractères pour les dyslexiques : 39

40 Critères validés 40

41 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 [Or] Pour chaque page web, le texte ne doit pas être justifié. Cette règle est-elle respectée? [Or] Pour chaque page web, les blocs de texte ont-ils une largeur inférieure ou égale à 80 caractères (hors cas particulier)? [Or] Pour chaque page web, l espace entre les lignes et les paragraphes est-il suffisant? 41 Voir en ligne :

42 Des questions? Romy Duhem-Verdière Consultante web UX Voir en ligne :