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 ?

Différents types de handicaps :    

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 ?

  • 👩🏻‍💼 Rédacteurs
    • Libellés des liens descriptifs
      • Cliquez ici ==> Voir tous les services
  • 👨‍🎨 Designers 
    • Contraste suffisant
    • La couleur n'est pas le seul élément indiquant l'information
  • 🕵️‍♂️ Testeurs assurance qualité
    • Tester avec un screen reader
    • Tester la navigation par clavier
  • 👩‍💻 Développeurs
    • .....

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)

Ressources (2/3)

Ressources (3/3)

a11y

By et1421

a11y

Vue.js Montreal

  • 106
Loading comments...