funky-framadate-front/docs/cadrage/accessibility.md
2022-02-03 13:50:34 +01:00

31 lines
1.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Accessibilité
Vérifiez toujours que ce que vous développez est Accessible pour des personnes aux handicaps divers tels que le préconise le WECAG.
https://www.w3.org/Translations/WCAG20-fr/
Quelques lignes à vérifier:
* Couleurs contrastées
* ordre des liens cohérent
* textes des liens éloquents
* textes alternatifs aux images les décrivant
* possibilité de changer la taille des textes et le thème visuel
* couleurs lisibles pour les personnes daltoniennes
* raccourcis claviers. alt+t pour passer a un autre thème visuel par exemple.
* attributs aria pour les lecteurs d'écran
* performance de chargement pour les petits débits
* server side rendering
* pas d'éléments perdus en dehors de l'écran, faites du mobile first
* parcimonie: si un élément n'est pas prévu pour être montré sur petit écran, ne le mettez pas sur grand écran sous prétexte qu'il y a plus de place.
* less is more
* système de recherche basique
N'ayez pas peur de demander de l'aide
## Structure html
* Ajouter une attribut lang="fr" sur l'élément html
* Chaque page doit avoir un title unique (ex: `title="Création de sondage - étape 1/7 - BarracuDate"`)
* Chaque page doit avoir un h1 (ex: `<h1>Création de sondage - étape 1 sur 7</h1>`)
* Un élément de texte ne peut pas être dans un élément div ou span (ex: <p>300 caractères maximum</p>)
* Éviter dutiliser lattribut tabindex
* Les actions doivent être portées par des éléments button (et non <i> ou <a>)