1174 sujets
Accessibilité du Web
Et l'eau,
Vaste sujet....
- Typographie
- Typographie web : gérer la taille du texte avec les «em»
- Polices, quelle taille choisir ?
- Normalize.css
- reset
- etc.
Modifié par niuxe (09 Jun 2019 - 19:38)
Vaste sujet....
- Typographie
- Typographie web : gérer la taille du texte avec les «em»
- Polices, quelle taille choisir ?
- Normalize.css
- reset
- etc.
Modifié par niuxe (09 Jun 2019 - 19:38)
Bonjour,
Par défaut, pour un paragraphe, 1em est environ égal à 16px. Ca tombe bien car cette valeur par défaut est celle qui est préconisée pour la lecture d'un texte. Maintenant, en y regardant de plus près, 14px c'est souvent mieux pour lire un paragraphe, d'ailleurs souvent sur les blog/forum avec beaucoup de contenu c'est cette taille qui est retenue (à une époque c'était le 12px, mais la résolution des écrans n'était pas la même).
Attention aux interlignes, et aux margin/padding avant et après les éléments, très important à étudier aussi.
En plus des lectures préconisé par Niuxe ne pas oublier de se pencher sur les choix par défaut des frameworks, tel que Bootstrap.
Par défaut, pour un paragraphe, 1em est environ égal à 16px. Ca tombe bien car cette valeur par défaut est celle qui est préconisée pour la lecture d'un texte. Maintenant, en y regardant de plus près, 14px c'est souvent mieux pour lire un paragraphe, d'ailleurs souvent sur les blog/forum avec beaucoup de contenu c'est cette taille qui est retenue (à une époque c'était le 12px, mais la résolution des écrans n'était pas la même).
Attention aux interlignes, et aux margin/padding avant et après les éléments, très important à étudier aussi.
En plus des lectures préconisé par Niuxe ne pas oublier de se pencher sur les choix par défaut des frameworks, tel que Bootstrap.
@olivier C:
Au départ, j'ai répondu de la même manière. Mais après réflexion, j'ai réédité mon post car le sujet est plus vaste qu'il n'y parait. La question n'est pas de savoir quel corps de police à attribuer à un h1, h2, p, li, etc. mais plutôt, quelle est la meilleur façon pour que l'utilisateur lise mon document convenablement ou du moins que je l'incite à me lire. C'est la raison pour laquelle, j'ai donné en tout premier le lien de la typo. La typographie et ses règles sont essentielles !
@Soldat8889 : Non, il n'y a pas véritablement de standard. Mais les règles sont assez clair pour le niveau de lecture....
Modifié par niuxe (10 Jun 2019 - 14:11)
Au départ, j'ai répondu de la même manière. Mais après réflexion, j'ai réédité mon post car le sujet est plus vaste qu'il n'y parait. La question n'est pas de savoir quel corps de police à attribuer à un h1, h2, p, li, etc. mais plutôt, quelle est la meilleur façon pour que l'utilisateur lise mon document convenablement ou du moins que je l'incite à me lire. C'est la raison pour laquelle, j'ai donné en tout premier le lien de la typo. La typographie et ses règles sont essentielles !
@Soldat8889 : Non, il n'y a pas véritablement de standard. Mais les règles sont assez clair pour le niveau de lecture....
Modifié par niuxe (10 Jun 2019 - 14:11)
Bonjour,
du strict point de vue de l'accessibilité (on est dans cette catégorie du Forum), il n'y a plus depuis 15 ans en France de minimum de taille (ça faisait partie d'AccessiWeb 1.0, de mémoire et on en est 2-3 versions plus loin avec le prochain RGAA 3 collant aux WCAG 2.1).
Ça n'aurait pas de sens dans la mesure où on peut bricoler sa fonte remplissant un 27" avec une taille de 0.01em ou minuscule avec 100em,
où Segoe UI Light est illisible pour moi à une taille où toutes les autres fontes sont bien lisibles (la sortie de Windows 8 m'avait bien fait ch… vu que c'était la dernière mode d'utiliser cette fonte pour autre chose que des titres de tuile).
Entre temps, les navigateurs ont ajouté de base une option (par défaut ou simplement activable ?) pour imposer une taille minimum de texte.
Ce qui est important, c'est de pouvoir augmenter la taille du texte jusqu'à 200 % en zoomant (le zoom texte à l'ancienne), de ne rien figer (pas de px pour font-size, rem à la place).
Plus récent avec les WCAG 2.1 et le prochain RGAA 3, c'est :
* de pouvoir zoomer (en mode graphique à la Chrome) sans qu'un ascenseur horizontal n'apparaisse (RWD FTW),
* d'avoir des zones de clic de dimensions suffisantes (44*44px) (au niveau AAA seulement, mais c'est déjà un critère ergo faisant partie de tous les conseils de MS, Android et Apple par exemple),
* de respecter un interligne, marges entre paragraphes et espace entre mots et lettres minimal : text spacing (EDIT: il y a un bookmarklet pour ça, par the mighty Steve Faulkner
)
EDIT2: une fois qu'on peut naviguer au clavier partout, avec des contrastes tous suffisants, des liens explicites (genre pas vides), une hiérarchie de titres correcte et des formulaires avec label et messages d'erreurs/état correctement codés
, les nouveautés des WCAG 2.1 sont résumées en 30 minutes chrono par Aurélien Lévy dans sa dernière conf' Paris-Web : https://www.paris-web.fr/2018/conferences/wcag-21-revue-rapide-et-digestion-lente.php
Une bonne page pas trop longue sur la Présentation dans le Guide (RGAA 3) du concepteur : https://disic.github.io/guide-concepteur/7-presentation.html (le bouton Sommaire est un peu caché quand on n'a pas l'habitude…).
EDIT3: voir aussi le https://disic.github.io/guide-integrateur/ et on peut trouver celui du dév également.
Modifié par Felipe (11 Jun 2019 - 10:21)
du strict point de vue de l'accessibilité (on est dans cette catégorie du Forum), il n'y a plus depuis 15 ans en France de minimum de taille (ça faisait partie d'AccessiWeb 1.0, de mémoire et on en est 2-3 versions plus loin avec le prochain RGAA 3 collant aux WCAG 2.1).
Ça n'aurait pas de sens dans la mesure où on peut bricoler sa fonte remplissant un 27" avec une taille de 0.01em ou minuscule avec 100em,
où Segoe UI Light est illisible pour moi à une taille où toutes les autres fontes sont bien lisibles (la sortie de Windows 8 m'avait bien fait ch… vu que c'était la dernière mode d'utiliser cette fonte pour autre chose que des titres de tuile).Entre temps, les navigateurs ont ajouté de base une option (par défaut ou simplement activable ?) pour imposer une taille minimum de texte.
Ce qui est important, c'est de pouvoir augmenter la taille du texte jusqu'à 200 % en zoomant (le zoom texte à l'ancienne), de ne rien figer (pas de px pour font-size, rem à la place).
Plus récent avec les WCAG 2.1 et le prochain RGAA 3, c'est :
* de pouvoir zoomer (en mode graphique à la Chrome) sans qu'un ascenseur horizontal n'apparaisse (RWD FTW),
* d'avoir des zones de clic de dimensions suffisantes (44*44px) (au niveau AAA seulement, mais c'est déjà un critère ergo faisant partie de tous les conseils de MS, Android et Apple par exemple),
* de respecter un interligne, marges entre paragraphes et espace entre mots et lettres minimal : text spacing (EDIT: il y a un bookmarklet pour ça, par the mighty Steve Faulkner
)EDIT2: une fois qu'on peut naviguer au clavier partout, avec des contrastes tous suffisants, des liens explicites (genre pas vides), une hiérarchie de titres correcte et des formulaires avec label et messages d'erreurs/état correctement codés
, les nouveautés des WCAG 2.1 sont résumées en 30 minutes chrono par Aurélien Lévy dans sa dernière conf' Paris-Web : https://www.paris-web.fr/2018/conferences/wcag-21-revue-rapide-et-digestion-lente.phpUne bonne page pas trop longue sur la Présentation dans le Guide (RGAA 3) du concepteur : https://disic.github.io/guide-concepteur/7-presentation.html (le bouton Sommaire est un peu caché quand on n'a pas l'habitude…).
EDIT3: voir aussi le https://disic.github.io/guide-integrateur/ et on peut trouver celui du dév également.
Modifié par Felipe (11 Jun 2019 - 10:21)