AxaFrance
[a11y] Audit Alert
Vérification de l'accessibilité du composant : Alert
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.
Alert danger :
VIOLATIONS : 1 : contraste de couleur INCOMPLETE : 0 PASSED : 3
Alert success :
VIOLATIONS : 0 INCOMPLETE : 0 PASSED : 4
Alert info :
VIOLATIONS : 1 : contraste de couleur INCOMPLETE : 0 PASSED : 3
Alert Error :
VIOLATIONS : 0 INCOMPLETE : 0 PASSED : 4
Alert avec bouton de fermeture :
VIOLATIONS : 1 : le bouton de fermeture n'a pas de texte INCOMPLETE : 0 PASSED : 6
Alert avec détails :
VIOLATIONS : 0 INCOMPLETE : 0 PASSED : 7
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) ? Composant non navigable à l'exception du bouton de fermeture qui est bien navigable au clavier.
- [ ] Est ce que le composant est navigable avec NVDA ?
Lorsque l'alerte apparait à l'écran elle est bien lue par NVDA via le
role="alert". Néanmoins pour l'alerte avec détails, seul le titre est lu, la liste de détails n'est pas lue. - [ ] 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 ?
- [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.
Problèmes rencontrés :
- Contraste de couleur
- Bouton de fermeture de l'alerte sans texte discernable
- Texte de l'alerte avec détails pas complètement lu par NVDA
