Accessibilité
des formulaires
Vue Montreal 2019-12-04
Quoi ? 🤔
Selon le W3C, toute personne utilisant le web devrait être en mesure de :
- comprendre
- naviguer
- interagir
- contribuer
Pour qui ?
Temporaires :
- Se briser un bras
- Tenir un bébé
Pour qui ?
Pensez-y, ça sera peut-être
VOUS
qui aurez besoin de l'accessibilité.
Pourquoi ?
Le cas de Dominoes 🍕
- Mauvaise publicité
- Temps et argent en frais d'avocats
https://arstechnica.com/tech-policy/2019/10/accessibility-the-future-and-why-dominos-matters/
Obligation légale en Ontario
-
Depuis 2014, tous sites et contenus web doivent respecter les normes WCAG 2.0 Level A
-
À partir de 2021, tout le web ontarien devra respecter les normes WCAG 2.0 Level AA.
https://accessibilitycanada.ca/web-accessibility-ontario-law/
Comment ?
Demo non-a11y
Demo a11y
En résumé
- Associer tous les champs à un label
- Lier tout autre information (indice, erreurs) au champ à l'aide d'attributs aria (aria-describedby)
- Soumettre le formulaire avec l'événement onSubmit
- Écrire du HTML sémantique (legend, fieldset, button)
- ....
Ressources (1/3)
Cheatsheets / listes
- Liste officiel du WCAG filtrée par niveaux A et AA
- Checklist séparée par niveaux (A, AA, AAA)
- WebAIM's WCAG 2 Checklist
- Checklist groupée par rôle (designer, engineers, etc)
- Autre checklist groupée par sujet (navigation par clavier, formulaires, images, etc)
Sommaires
- Guide de Wordpress
- 10 guides pour améliorer votre accessibilité
- CSS-Tricks Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility
- 7 choses que tout designer devrait savoir au sujet de l'accessibilité
Outils
Ressources (2/3)
Liens et boutons
- When to use button vs link
- When to use button vs link with SPA in mind
- Démonstration des differences entre l'utilisation d'un div skinner comme un bouton plutôt qu'un vrai bouton
- Comment rendre les textes des liens descriptifs
- Making Accessible Links: 15 Golden Rules For Developers
- Encore plus d'information sur les liens
Formulaires
- Comment organiser le HTML d'un formulaire
- Liste des champs de formulaires disponibles (inputs)
- Bonnes pratiques sur l'accessibilité des formulaires