- `, `
- `)**
+```html
+
+```
+*Aide à la vocalisation et à la navigation*\
+\
+**Identifier la page active dans un menu**
+```html
+Contact
+```
+*Il est important de signaler explicitement l’état actif.*
+
+## Visuel et CSS
+
+**Utiliser des unités relatives (rem, %, em)**
+```css
+font-size: 1rem;
+```
+*Permettre un zoom efficace et lisible.*\
+\
+**Conserver l'outline par défaut des éléments focusables**
+⚠️ Eviter `outline:none !important`
+*L'outline est nécessaire pour le focus visuel à la navigation*\
+\
+**Vérifier les contrastes de couleurs**
+```css
+color: #000;
+background-color: #fff;
+```
+*Respecter un ratio minimum de 4.5:1 pour le texte. (niveau AA du WCAG). Testable avec un plugin comme [WCAG Color contrast checker](https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf)*\
+\
+**Ne pas utiliser ::before ou ::after pour du contenu informatif**
+```
+::before {
+ content: "⚠️";
+}
+```
+*Les contenus générés par les pseudo éléments ne sont pas toujours lus par les lecteurs d’écran.*\
+\
+**Assurer une lisibilité du contenu des page jusqu'à 200 % de zoom sans perte d'information ou de fonctionnalité**\
+\
+**Ne pas transmettre l'information uniquement par la couleur**\
+*Indiquer par exemple des erreurs de formulaire ou des informations d'état via le texte en complément d'une couleur*
+
+:::
+::: column
+
+**S'adapter aux différentes tailles d'écran**\
+*Proposer un design responsive ou adaptative si possible*\
+\
+**Eviter les éléments trop petits ou trop rapprochés pour les clics**\
+*Mettre en place des paddings/marges sur les éléments interactifs*
+
+## Images
+
+**Fournir un attribut `alt` pertinent**
+```html
+
+```
+*Laisser l'attribut `alt` à vide si l'image est uniquement décorative. Elle sera alors ignorée par les vocalisateurs*\
+\
+**Utiliser `role="img"` sur les SVG porteurs d'information**
+```html
+
+```
+*Permettre la vocalisation du contenu SVG*\
+\
+**Retirer de la navigation/vocalisation les svg uniquement décoratifs**
+```html
+
+```
+ou
+```html
+
+```
+
+## Navigation
+
+**Garantir l’accès clavier à tous les éléments interactifs**
+*Tout ce qui est cliquable doit être navigable avec Tab et activable avec Entrée/Espace.*\
+\
+**Ajouter un lien d’évitement ([skiplink](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/lien-d-evitement/))**
+```html
+Aller au contenu
+```
+*Faciliter l'accès direct au contenu pour les utilisateurs clavier.*\
+\
+**Suivre un ordre de tabulation logique**
+```html
++ + +... + +``` +*L’ordre DOM doit correspondre à l’ordre visuel et logique.*\ +\ +**Boucler le focus dans les modales**\ +*Empêcher le focus de sortir de la modale tant qu’elle est ouverte.*\ +\ +**Ne pas forcer un tabindex supérieur à 0** +```html +Focusable+``` +*Éviter tabindex="1" ou plus pour ne pas casser l’ordre naturel.*\ +\ +**Masquer les éléments inutiles au focus** +```html + +``` +*Éviter la navigation sur les éléments décoratifs ou inactifs.* + +::: +::: column + +**Différencier clairement liens et boutons** +```html +Page Contact + +``` +*Utiliser les balises pour ce pourquoi elles sont prévues.*\ +\ +**Rendre explicite le comportement d’un lien** +```html +CV +``` +*Préciser si téléchargement, nouvelle fenêtre ou format particulier.* + +## Formulaires + +**Accompagner les champs d’un label et d'un format clair** +```html + + +``` +*Préciser le format attendu sans se reposer uniquement sur le placeholder.*\ +\ +**Grouper les champs connexes** +```html + +``` +*Aider à la compréhension et à la vocalisation. Voir la [documentation de fieldset](https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/fieldset)*\ +\ +**Ajouter des indications si besoin avec aria-describedby** +```html + +Formats acceptés : PDF, DOC
+``` +*Fournir une aide supplémentaire pour la saisie.*\ +\ +**Utiliser autocomplete là où pertinent** +```html + +``` +*Améliorer l’expérience utilisateur et la saisie. Voir la documentation de [l'autocomplete](https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/autocomplete)*\ +\ +**Indiquer les erreurs associées aux champs requis** +```html + +Ce champ est obligatoire +``` +*Signaler visuellement et vocalement l’erreur.* + +# Outils/Aides +[MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements)\ +[WCAG Color contrast checker](https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf)\ +[Headingsmap](https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi)\ +[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview?hl=fr)\ +[JAWS](https://www.freedomscientific.com/products/software/jaws/)\ +[NVDA](https://www.nvaccess.org/) + +::: \ No newline at end of file diff --git a/cheatsheets/categories.json b/cheatsheets/categories.json index ac4d84c..6afbca7 100644 --- a/cheatsheets/categories.json +++ b/cheatsheets/categories.json @@ -9,6 +9,11 @@ "name": "Eco concept", "icon": "nest_eco_leaf" }, + { + "id": "web", + "name": "WEB", + "icon": "language" + }, { "id": "iot", "name": "IOT", diff --git a/package-lock.json b/package-lock.json index ae7ef3e..1aa378e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "@types/glob": "^8.1.0", "ejs": "^3.1.9", "glob": "^10.3.10", "markdown-it": "^13.0.1", @@ -18,6 +17,7 @@ }, "devDependencies": { "@types/ejs": "^3.1.2", + "@types/glob": "^8.1.0", "@types/markdown-it": "^12.2.3", "@types/markdown-it-container": "^2.0.5", "@types/markdown-it-highlightjs": "^3.3.1", @@ -210,6 +210,7 @@ "version": "8.1.0", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-8.1.0.tgz", "integrity": "sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==", + "dev": true, "dependencies": { "@types/minimatch": "^5.1.2", "@types/node": "*" @@ -268,12 +269,14 @@ "node_modules/@types/minimatch": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz", - "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==" + "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==", + "dev": true }, "node_modules/@types/node": { "version": "20.4.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.0.tgz", - "integrity": "sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g==" + "integrity": "sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g==", + "dev": true }, "node_modules/abbrev": { "version": "1.1.1", @@ -1927,6 +1930,7 @@ "version": "8.1.0", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-8.1.0.tgz", "integrity": "sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==", + "dev": true, "requires": { "@types/minimatch": "^5.1.2", "@types/node": "*" @@ -1984,12 +1988,14 @@ "@types/minimatch": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz", - "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==" + "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==", + "dev": true }, "@types/node": { "version": "20.4.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.0.tgz", - "integrity": "sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g==" + "integrity": "sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g==", + "dev": true }, "abbrev": { "version": "1.1.1",