AxaFrance
[a11y] Audit Button
Vérification de l'accessibilité du composant : Button
Afin d'évaluer le niveau d'accessibilité d'un composant, il faut effectuer les actions ci-dessous.
Analyse statique d'accessibilité
Remplir les champs ci-dessous, en se basant sur l'onglet accessibilité de chaque composant dans le storybook.
Button classic & button reverse & button small & button avec icon :
VIOLATIONS : 0 INCOMPLETE : 0 PASSED : 4
Button disabled :
VIOLATIONS : 0 INCOMPLETE : 0 PASSED : 6
Button success :
VIOLATIONS : 1 => contraste de couleur INCOMPLETE : 0 PASSED : 3
Button danger :
VIOLATIONS : 1 => contraste de couleur INCOMPLETE : 0 PASSED : 3
Button circle :
VIOLATIONS : 1 => pas de texte pour le bouton (aria-label) INCOMPLETE : 0 PASSED : 2
En plus mettre une capture de l'onglet en commentaire de cette issue.
Analyse manuelle
- [x] Est ce que le composant est navigable au clavier (tab) ? OK, petite amélioration à prévoir pour le bouton circle qui n'a pas d'indication de focus (border, border shadow ou outline) à la différence des autres boutons.
- [x] Est ce que le composant est navigable avec NVDA ? OK, le type bouton est bien énoncé, un bouton disabled est bien annoncé en tant que tel. Seul problème sur le bouton circle qui n'a pas de aria-label dans le storybook, mais le composant permet de le passer.
- [ ] Est ce que le composant est navigable avec un autre lecteur d'écran ?
Vérification sémantique
- [x] Vérifier l'implémentation sémantique des éléments html ?
Il s'agit bien d'un élément button sur lequel nous pouvons venir spécifier le type.
De plus les propriétés disponibles sont celles découlant de l'élément html button
ComponentPropsWithoutRef<'button'> - [x] Vérifier la validité HTML W3C (https://validator.w3.org/#validate_by_input) ?
- [x] Vérifier la validité CSS (https://jigsaw.w3.org/css-validator/#validate_by_input) ?
Problèmes détectés
Si vous avez détectés un défaut d'accessibilité, veuillez créer une issue décrivant le défaut et la rattacher à cette issue.
Remontées à corriger :
- Contraste de couleurs
- spécifier un aria-label pour le bouton circle au sein du storybook