2020-08-11 18:54:00 +02:00
|
|
|
|
# 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 d’utiliser l’attribut tabindex
|
|
|
|
|
|
* Les actions doivent être portées par des éléments button (et non <i> ou <a>)
|
