Différences

Ci-dessous, les différences entre deux révisions de la page.

--- fr:website_css [2018/06/17 12:12] – /* ortho */ merlin8282
+++ fr:website_css [2021/12/03 18:19] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 11: / Ligne 11: @@
 </WRAP>
+===== Validateurs et listes de check-up =====
+  * https://checklists.opquast.com/fr/ : diverses checklist qui permettent de faire le tour de ce qu'on a pu oublier.
+  * http://validator.w3.org/ : teste une page en direct pour voir si le html est valide.
+  * http://jigsaw.w3.org/css-validator/ : la même chose pour le css. On peut aussi passer directement ses fichiers css.
+Pour contrôler la qualité du code php :
+  * https://github.com/sebastianbergmann/phpcpd
+  * https://github.com/php-parallel-lint/PHP-Parallel-Lint : suffisant pour du test de syntaxe, sans s'embêter à trop configurer de choses
+  * https://github.com/FriendsOfPHP/PHP-CS-Fixer
+  * https://github.com/phpstan/phpstan : très puissant mais pas simple à prendre en main
 ===== Couleurs =====
   * http://www.code-couleur.com/ : voir quelle couleur correspond à quel code html et vice versa
@@ Ligne 21: / Ligne 31: @@
 ==== Accessibilité ====
+Voir aussi [[fr:accessibilite|la page détaillée]] sur le sujet, plus à jour.
+=== Outils ===
   * http://www.yoyodesign.org/outils/ncolor/index.fr : sélecteur de couleur pour voir comment une couleur est "perçue" suivant l'handicap visuel
-  * http://contrast-finder.tanaguru.com/?lang=fr : permet de trouver les couleurs constrastes qui seront bien perçues par le maximum de monde.
+  * https://app.contrast-finder.org (AGPLv3) : permet de trouver les couleurs contrastes qui seront bien perçues par le maximum de monde.
+  * Colour Contrast Analyser (CCA) de The Paciello Group sous licence GPLv3 : https://github.com/ThePacielloGroup/CCAe
+  * axe-core, accessibility engine for automated Web UI testing, sous licence MPL2.0 : https://github.com/dequelabs/axe-core
+  * Accessibility Inspector intégré dans Mozilla Firefox : https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector
+  * Enabler, Accessibility analyzer, sous licence MIT : https://github.com/musienkoyuriy/enabler
+Il existe globalement diverses listes d'outils à travers le web plus ou moins à jour : [[https://frontendmasters.com/books/front-end-handbook/2018/tools/accessibility.html]] ou [[https://4design.xyz/outils-en-ligne-pour-verifier-accessibilite-de-votre-site-web]] ou encore [[https://github.com/brunopulis/awesome-a11y/blob/master/topics/validators.md]] par exemple.
+=== Points d'attention divers ===
+**Largeur de texte** : l'œil a du mal à lire des lignes de plus de 70-80 caractères (33em((À vérifier, en //em// ma source n'est pas fiable.)) ). N'étirez pas le texte sur tout l'écran, il vaut mieux faire des colonnes ou laisser du vide.
+**Aérer le texte** : Il est couramment admis qu'une hauteur de ligne (line-height) de 1.5 permet d'obtenir une bonne lisibilité du texte.
+Si l'utilisatrice applique les réglages suivants, le texte doit rester lisible (pas de contenu tronqué, superposé):
+  * La hauteur des lignes doit pouvoir être ajustée à 1.5 fois minimum la taille de la police de caractères.
+  * L'espace situé entre deux paragraphes doit pouvoir être ajusté à 2 fois minimum la taille de la police de caractères.
+  * L'espacement entre les lettres doit pouvoir être ajusté à 0.12 fois minimum la taille de la police de caractères.
+  * L'espacement entre les mots doit pouvoir être ajusté à 0.16 fois minimum la taille de la police de caractères.
+On peut utiliser un bookmarklet (faire un marque page comportant l'adresse suivante) pour tester cela :
+javascript:s%20=%20document.createElement(%22style%22)%3Bs.setAttribute(%22type%22%2C%22text%2Fcss%22)%3Bt%3Ddocument.createTextNode(%22*%20%7Bline-height%3A%201.5!important%3B%20letter-spacing%3A.12em!important%3B%20word-spacing%3A%20.16em%20!important%3B%7D%20p%7Bmargin-bottom%3A%202em!important%3B%20%7D%22)%3Bs.appendChild(t)%3Bh%20%3D%20document.getElementsByTagName(%22head%22)%5B0%5D%3Bh.appendChild(s)%3Bvoid(0)%3B
+**Penser au zoom** : l'agrandissement/zoom de la page ou du texte seulement est courant en terme d'accessibilité, bien que les référentiels ne donnent pas toujours de valeur exacte (ils restent subjectifs sur de nombreux points), il y a certains points assez communément admis. Il n'y a pas toujours une seule bonne solution subjectivement, il convient de s'inspirer des bonnes pratiques comme base de suggestion.
+Varier le zoom du site (CTRL + molette souris ou boutons "+" et "-") doit pouvoir se faire en gardant les éléments lisibles malgré l'altération de la page.
+La taille du texte doit pouvoir être multipliée par 2 par exemple (zoom à 200%, zoom du texte seulement à configurer dans le navigateur) tout en restant lisible.
+Le design de la page peut être amené à être repensé sur ces points s'il ne le permet pas de base.
+L'outil de loupe de l'OS peut également être utilisé et conditionne, comme pour les plages brailles, la largeur d'un texte ou d'une alternative textuelle par exemple
+**Information et couleur** : ne pas donner une information uniquement par la couleur, quoi qu'il advienne.
-**Largeur de texte** : L'œil a du mal à lire des lignes de plus de 70-80 caractères (33em((À vérifier, en //em// ma source n'est pas fiable.)) ). N'étirez pas le texte sur tout l'écran, il vaut mieux faire des colonnes ou laisser du vide.
 ==== Polices ====
@@ Ligne 75: / Ligne 121: @@
   * [[wp>Safari_version_history|Safari]]
+Pour vérifier la compatibilité, le site [[https://caniuse.com/|Can I use]] est idéal. Il contient aussi les statistiques d'utilisation des divers navigateurs web : [[https://caniuse.com/usage-table]].
+Un site comme https://www.browserling.com/ vous permet de tester ce que votre site donne sur d'autres navigateurs, dont les versions obsolètes.
 ===== Frameworks =====