Validateur mobile et a11y

Validateur mobile et a11y

Vous ne l’aviez peut-être pas vu le W3C a mis en ligne un validateur de site mobile.
Vous pouvez ainsi valider que votre site fonctionnera sur 3 périphériques différents (2 smartphones, 1 tablette).
Comment ça marche ? Le validateur fait automatiquement une capture d’écran du site et analyse ensuite les éléments suivants :

  1. Réseau : nombre de requêtes, compression, redirections, erreurs HTTP, optimisation d’image ;
  2. Responsive Design : utilisation de meta viewport valide, détection du scroll horizontal/vertical ;
  3. Interopérabilité : utilisation des préfixes CSS, détection de flash ;
  4. Interactions : détection d’utilisation de popins modales.

Pour chaque problème le validateur vous indique quelles actions effectuer pour le corriger.
Autre outil intéressant pour améliorer l’accessibilité de nos sites et applications : tota11y


tota11yCette librairie JavaScript peut s’utiliser via un simple favori.
Lorsqu’elle est chargée un bouton s’affiche en bas à droite de la page et il est ensuite possible de visualiser les problèmes d’accessibilité tels que :

  • La structure des titres, et les erreurs pouvant s’y trouver (plusieurs h1, h3 avant h2…) ;
  • Les contrastes trop faibles ;
  • Les liens peu explicites (type cliquez-ici) ;
  • Les champs de formulaires sans label ;
  • Les images sans alt ;
  • Les attributs ARIA.

C’est un bon outil pour s’assurer que les règles de base en terme d’accessibilité sont respecter.
Pour aller plus loin il faudra se tourner vers le site http://a11yproject.com/ afin d’avoir plus de documentation et d’exemple de code.