funky-framadate-front/docs/cadrage/accessibility.md

31 lines
1.5 KiB
Markdown
Raw Permalink Normal View History

# 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
2022-02-03 13:50:34 +01:00
## 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>)