O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Best practices accessibilité

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 16 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Anúncio

Mais de OCTO Technology (20)

Mais recentes (20)

Anúncio

Best practices accessibilité

  1. 1. 1 There is a better way OCTO Part of Accenture © 2020 - All rights reserved Accessibilité Les grandes lignes
  2. 2. 2 There is a better way OCTO Part of Accenture © 2020 - All rights reserved Accessibilité Pour permettre à nos supports digitaux d’être accessibles au plus grand nombre, certaines bonnes pratiques sont à observer. Choix de typo Principes de mise en page Gestion des couleurs
  3. 3. There is a better way 3 OCTO Part of Accenture © 2020 - All rights reserved La typo 1
  4. 4. There is a better way 4 OCTO Part of Accenture © 2020 - All rights reserved Plusieurs contraintes pèsent sur la lisibilité d’une police sur le web : - Une hauteur d’œil conséquente - Un tracé ouvert (contreformes-ouvertures) - De larges approches - Des caractères aux formes distinctives - Un hinting* et un crénage** de qualité La typo Notre Century Gothic répond à tous ces critères, elle fait partie de la courte liste de typos considérées comme les plus accessibles et en plus c’est une typo websafe*** #EcoResponsable !
  5. 5. There is a better way 5 OCTO Part of Accenture © 2020 - All rights reserved La mise en page 2
  6. 6. There is a better way 6 OCTO Part of Accenture © 2020 - All rights reserved Les bonnes pratiques de mise en page. Le bon choix de typo ne fait pas tout, la manière de la mettre en page est cruciale pour la bonne lisibilité de nos supports digitaux. Interlignage Alignement Style de caractère Zone de texte Respecter un interlignage d’au minimum 1.5. Cela facilite la lecture aux myopes et aux Dys. Éviter la justification et le centrage des textes, préférer le ferrage à gauche ou à droite. Le décrochage de fin de ligne permet de créer des repères dans le texte et évitera aux Dys de se tromper de ligne. La justification crée des espacements non réguliers entre les mots qui peuvent gêner certains lecteurs. Éviter d’écrire en majuscule et/ ou en italique, préférer le gras. Réserver le soulignement aux liens uniquement. De plus, le soulignement, comme l’italique, a un effet « Myopisant », préférer l’encadrement ou le surlignement, en utilisant des teintes contrastées qui mettent en valeur le texte. Limiter la longueur des lignes (pas plus de 80 caractères par ligne) pour faciliter la lecture. Préférer faire 2 colonnes de textes plutôt qu’une.
  7. 7. There is a better way 7 OCTO Part of Accenture © 2020 - All rights reserved Les couleurs 3
  8. 8. There is a better way 8 OCTO Part of Accenture © 2020 - All rights reserved Tout le monde ne distingue pas les couleurs de la même façon. Certains utilisateurs peuvent être daltoniens, d’autres utilisatrices peuvent être malvoyantes. D’autres encore peuvent se trouver dans différents environnements ou situations qui rendent la perception des couleurs et des contrastes complexes.
  9. 9. There is a better way 9 OCTO Part of Accenture © 2020 - All rights reserved Deux points d’attention sur les couleurs d’un support digital. Veiller à ce que le rapport de contraste entre le premier plan et le fond soit suffisant. Ne pas utiliser la couleur comme seul moyen visuel de véhiculer une information, une action, etc.
  10. 10. There is a better way 10 OCTO Part of Accenture © 2020 - All rights reserved Plus en détail : Une couleur n’est pas accessible en soit, c’est le contraste entre elle et le fond sur lequel elle est utilisée qui détermine son degré d'accessibilité. D’après la norme WCAG, pour être dite lisible, un texte doit présenter un ratio de contraste fort avec le fond sur lequel elle est apposée (soit un ratio de 4,5 minimum pour un texte courant et un ratio de 3 minimum pour un titre). ● Pour un ratio de contraste supérieur ou égal à 4,5 vous pouvez écrire avec n’importe quelle taille de texte et de graisse, cela considéré comme lisible. ● Pour un ratio de contraste de 3 à 4,4 vous devez écrire au minimum en 14pt bold ou en 18pt regular pour être considéré comme lisible. ● Pour un ratio de contraste inférieur à 3 (oubliez vous n’ êtes pas dans les clous, le texte sera considéré comme non lisible). Ratio de contraste
  11. 11. There is a better way 11 OCTO Part of Accenture © 2020 - All rights reserved Calculer un ratios de contraste pour des couleurs non OCTO Le site contrast-ratio.com Permet en quelques secondes de calculer un ratio de contraste avec les références hexadécimales de vos couleurs. https://contrast-ratio.com/#
  12. 12. There is a better way 12 OCTO Part of Accenture © 2020 - All rights reserved Connaître la ref hexadécimale d’une photo derrière un texte. Le site html-color-codes.info Permet en quelques secondes de connaître la référence hexadécimale d’une photo qui se trouve derrière votre texte, et ainsi de vous permettre de vérifier le ratio de contraste. https://html-color-codes.info/colors-from-image/
  13. 13. There is a better way 13 OCTO Part of Accenture © 2020 - All rights reserved Calcul d’un interligne Uniquement pour les designers utilisant Indesign, Photoshop, Illustrator, Figma... Texte 7 pt = interlignage 10,5 Texte 8 pt = interlignage 12 Texte 8,5 pt = interlignage 12,75 Texte 9 pt = interlignage 13,5 Texte 9,5 pt = interlignage 14,25 Texte 10 pt = interlignage 15 Texte 10,5 pt = interlignage 15,75 Texte 11 pt = interlignage 16,5 Texte 11,5 pt = interlignage 17,25 Texte 12 pt = interlignage 18 Texte 12,5 pt = interlignage 18,75 Texte 13 pt = interlignage 19,5 Texte 13,5 pt = interlignage 20,25 Texte 14 pt = interlignage 21 Si vous utilisez ces logiciels, l’unité de mesure de l'interligne est différent, il nécessite de multiplier la taille de la typo par 1,5 pour obtenir l’interlignage minimum. ex : 13 pt (taille de votre typo) x 1,5 = 19,5 pt (interlignage minimum à appliquer) Texte 14,5 pt = interlignage 21,75 Texte 15 pt = interlignage 22,5 Texte 16 pt = interlignage 24 Texte 17 pt = interlignage 25,5 Texte 18 pt = interlignage 27 Texte 19 pt = interlignage 28,5 Texte 20 pt = interlignage 30
  14. 14. There is a better way 14 OCTO Part of Accenture © 2020 - All rights reserved Normes et références 6
  15. 15. There is a better way 15 OCTO Part of Accenture © 2020 - All rights reserved Les normes 1.4.3 Contraste (minimum) : la présentation visuelle du texte et du texte sous forme d'image a un rapport de contraste d'au moins 4,5:1, sauf dans les cas suivants : (Niveau AA) Texte agrandi* (avec au minimum 18 points ou 14 points gras): le texte agrandi et le texte agrandi sous forme d'image ont un rapport de contraste d'au moins 3:1. Texte décoratif : aucune exigence de contraste pour le texte ou le texte sous forme d'image qui fait partie d'un composant d'interface utilisateur inactif, qui est purement décoratif, qui est invisible pour tous ou qui est une partie d'une image contenant un autre contenu significatif. Logotypes : aucune exigence de contraste pour le texte faisant partie d'un logo ou d'un nom de marque.
  16. 16. There is a better way 16 OCTO Part of Accenture © 2020 - All rights reserved Quelques articles nous confirmant ce constat https://fr.calameo.com/read/0058343 7508d343b57cac https://fr.calameo.com/books/00021 9963bb28f8dfbd41 Règles d’accessibilité Livre Typo et web https://www.webhostingsecretrevea led.net/fr/blog/web-business-ideas/ 25-gorgeous-web-safe-fonts-for-yo ur-website/ Polices websafe

×