DOC - Howto-use.md / Update for the pt => px conversion section

dzc34 commented 6 years ago

Part 2 of merge request #140 from @ArnaudDelafosse

Tried my best to keep it clear for users, feel free to modify at will or completely ignore :)

see #136 Webapp > Help > Text size understanding : comments on pt => px conversion

I verified my work is based on `develop` branch

[x] yes, keep going

dzc34 commented 6 years ago

hi @mfaure, Could you review this PR?

ArnaudDelafosse commented 6 years ago

Hi all, Just passing-by and seeing that these 2 pages still have not yet been updated: https://app.contrast-finder.org/ https://app.contrast-finder.org/?lang=fr

Anything I can do to close this ticket any quicker?

dzc34 commented 6 years ago

hi @ArnaudDelafosse,

I switch in french:

Une nouvelle version a du sortir pour des mises à jour de sécurité, mais ta contribution n'a pas été oubliée.

Sur la problématique soulevée par ton issue #136, @mfaure a déjà regardé, mais il pensait s'y pencher dessus de nouveau. La question est pour moi d'avoir un 2ème regard d'un expert de l'accessibilité car ta contribution a aussi un impact sur Asqatasun. Ce 2ème regard peut-être soit @mfaure, soit quelqu'un d'autre... c'est open. A noter, que l'outil pipette dans Chrome fonctionne bien avec du 24px, par contre c'est plutôt du du 19.2px au lieu du 18.5px.

Sur la forme, j'aimerais conserver la logique simple de la liste suivante en changeant juste les valeurs en pixels.

- Texte non gras + taille du texte < 24px : ratio = 4.5
- Texte non gras + taille du texte > 24px : ratio = 3
- Texte en gras + taille du texte < 18.5px : ratio = 4.5
- Texte en gras + taille du texte > 18.5px : ratio = 3

Pour faciliter la lecture, on limite l'information sur la taille du texte à l'équivalent en pixel, sachant que la partie suivante "Interprétation de la taille des textes" permet d'expliciter de manière plus fine à quoi correspond ces valeurs 24px et 18.5px.

Une présentation sous forme de tableau pourrait aussi être une peu plus adaptée.

texte en gras	taille du texte	ratio min.
	< 24px	4.5
	⩾ 24px	3
oui	< 18.5px	4.5
oui	⩾ 18.5px	3

| texte en gras  | taille du texte | ratio min.   | 
| ---------------- | ------------------ |  ------------- |
|                   | < 24px           | 4.5             |
|                   | ⩾ 24px           | 3                |
|       oui         | < 18.5px         | 4.5             |
|       oui         | ⩾ 18.5px          | 3                |

ArnaudDelafosse commented 6 years ago

Hi @dzc34

Pas de souci, je comprends. Et oui, c'est important d'avoir (au moins) un 2e feedback.

J'avais également constaté ce petit bug des 120% / 19.2px c'est pourquoi j'utilise 116% dans mon exemple ¤.

Pour info, voici comment je présente les choses lors de formations :

Le ratio de contraste entre la couleur d’un texte et la couleur de fond doit être égale ou supérieur à : 4,5 pour du texte, 3 pour du texte en gras (pour une taille calculée égale ou sup. à 18,5 px), du grand texte (pour une taille calculée égale ou sup. à 24 px), [WCAG 2.1] des éléments graphiques qui transmettent une information, une fonction ou un état (par ex. pictogramme). …sauf pour du texte de « décoration » ou inclus dans un logo.

Je pense qu'en plus du lien vers la spéc, une information devrait figurer clairement dans "Interprétation de la taille des textes" :

Ces valeurs en pixels sont des équivalences. Utiliser des unités fixes (px, pt, etc.) pour des font-size reste valide pour les WCAG mais n'est pas conforme au RGAA (voir Critère 10.4). Il me semble donc souhaitable d'encourager les utilisateurs à utiliser des unités relatives (rem, em et % uniquement car vw et vh posent des problèmes) dans leurs CSS. Pour vérifier, l'équivalence d'une taille en pixels est donnée par les DevTools dans la colonne des propriétés, onglet "Calculé" / "Computed", quelle que soit l'unité de déclaration.

¤ Je remets ici un CodePen qui illustre tout cela est permet de faire des tests avec les DevTools si nécessaire :

Asqatasun / Contrast-Finder