Annoter l'accessibilité
Quoi annoter ?
- Alternatives textuelles pour les images et boutons icônes. Indiquer si l'icône ou l'image est décorative.
- Sémantique : liens, boutons, liste, paragraphes, citation, titre de page (
<title>), titres h1/h2/... - Régions / Landmarks (header, main, nav, aside, footer,...)
- Ordre du focus
- Formulaires : labels, champs obligatoires, messages d'erreurs
- ARIA roles, states, properties : aria-current, aria-disabled, aria-selected,...
- Skip link
Exemples
Ressources
Fichiers Figma :
- Accessibility bluelines de GitLab (plus petit et simple à appréhender que celui de GitHub)
- Annotation Toolkit de GitHub
- Accessbility Toolkit for Designers de Stéphanie Walter : kit d'annotation Figma, Sketch et Penpot
Sources
- Spécifier l'accessibilité de vos designs grâce aux annotations du blog a11y guidelines d'Orange
- A Designer’s Guide to Documenting Accessibility & User Interactions