Guide d’accessibilité

Voici le guide d’accessibilité web du Service des médias numériques. Les participants y trouveront la liste des critères d’accessibilité basés sur le WCAG 2.0 niveau AA, regroupés en quatre sections :

  1. HMTL et CSS
  2. Interfaces riches et JavaScript
  3. Design graphique
  4. Contributeurs éditoriaux

Ils y trouveront également la liste des outils de validation de l’accessibilité web.

Guide d’accessibilité

Les 4 principes fondamentaux du WCAG 2.0

PERCEPTIBLE

L’information et les composants de l’interface utilisateur doivent être présentés à l’utilisateur de façon à ce qu’il puisse les percevoir.

  1. Équivalents textuels
    • <button>, <img­>, <a> avec alternative textuelle (alt, title + aria-label)
    • <input> avec labels texte associés
    • <embed> avec texte accessible
  2. Média temporel
    • Transcription de l’audio
    • Sous-titre
    • Vidéodescription
  3. Adaptable
    • Sémantique adéquate ( <h1>, <h2>…, <ul>/<li>, <blockquote>…)
    • Label associé aux <input>
    • Ordre de navigation et de lecture logique et intuitif
    • Redimension de la page jusqu’à 200 % sans perte d’information
  4. Distinguable
    • La couleur n’est pas le seul moyen de véhiculer l’information
    • La couleur n’est pas le seul moyen de distinguer un lien
    • La couleur : avoir un contraste suffisant
    • Le contrôle du son : se doter d’un mécanisme arrêt/pause

UTILISABLE

Les composants de l’interface utilisateur et de navigation doivent être utilisables.

  1. Toutes les fonctionnalités sont accessibles avec le clavier
    • Toutes les fonctionnalités sont utilisables avec le clavier ([tab][shift][enter­])
    • Les raccourcis clavier n’entrent pas en conflit avec ceux par défaut (navigateur et lecteur d’écran)
  2. Délai suffisant pour lire et utiliser le contenu
    • Permettre le réglage du délai (rafraîchissement, changement de contenu…)
    • Mettre en pause/arrêt/masquer des contenus mis à jour automatiquement
  3. Ne pas concevoir de contenu susceptible de provoquer des crises
    • Aucun contenu ne doit clignoter plus de 3 fois par sec.
  4. Fournir des éléments d’orientation pour naviguer, trouver le contenu et se situer dans le site
    • Liens d’évitements
    • Titre de la page
    • Ordre de logique de navigation par focus visible

COMPRÉHENSIBLE

Les informations sur l’utilisation de l’interface utilisateur doivent être compréhensibles.

  1. Lisible
    • Indiquer la langue et l’encodage de la page
    • Respect la structure d’en-tête <h1> à <h6>
  2. Faire en sorte que les pages apparaissent et fonctionnent de manière prévisible
    • Éviter les « fenêtres modales » non désirées
    • Éviter les actions au focus du clavier créant la confusion sans en informer l’utilisateur
  3. Assistance à la saisie pour aider l’utilisateur à éviter et à corriger les erreurs de saisie
    • Bien indiquer les erreurs de saisie sous forme de texte
    • Éviter les « fenêtres modales » non désirées et les actions au focus du clavier créant la confusion sans en informer l’utilisateur

ROBUSTE

Le contenu doit être suffisamment robuste pour être interprété de manière fiable par une large variété d’agents utilisateurs, y compris les technologies d’assistance.

  • Optimiser la compatibilité
  • Optimiser la performance des pages
  • Validation HTML/XHTML des pages
  • Respect des spécifications HTML/XHTMlL