Checklist WCAG 2.0

HTML

Structure et repères du document

Niveau A 4.1.1 – Analyse

  • doctype sur la première ligne <!doctype html>
  • Ouvrir et fermer correctement les balises
  • Aucun attribut d’élément en double
  • Aucun ID en double

Niveau A 3.1.1 – Langue de la page

  • Langue de la page dans la balise html en utilisant les codes ISO 639-1 <html lang=“fr”>, cela permet aux liseuses de prononcer correctement.
  • Inclure l’encodage des caractères est recommandé
    <meta charset=“utf-8”>
  • <meta http-equiv=“x-ua-compatible” content=”ie=edge”> Mode de compatibilité pour Internet Explorer

Niveau A 2.4.2 – Titre de la page

Tant pour l’utilisateur que pour la SEO, la balise titre doit être unique pour chaque page <title></title>

Niveau AA 1.4.4 – Redimensionner les textes

  • balise meta pour le responsive design
  • éviter <meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no” />
  • préférer<meta name=“viewport” content=“width=device-width, initial-scale=1.0, shrink-to-fit=no />
  • permettre à l’utilisateur de pincer et zoomer
  • utiliser des unités relatives (em/rem) pour la taille des textes
  • permettre l’augmentation des textes à 200% sans perte de lisibilité ou fonctionnalité

Niveau A 1.3.1 – Info et relations
Niveau A 2.4.1 – Blocs de dérivation

  • utiliser <header>, <nav>, <main>, <footer>, <aside>
  • une seule <main> par page
  • utiliser l’attribut aria-label pour différencier les différentes nav d’une page
    • dans le footer pour les nav importantes aria-label=“site"
    • dans la sidebar/aside pour les navigations dans la page aria-label=“page"
    • dans le header aria-label=“site”

Niveau A 2.4.6 – En-têtes et label
Niveau A 1.3.1 – Info et relations

  • une page ne doit avoir qu’un seul <h1>, qui correspond en général à la balise <title>
  • Ce h1 devrait être le premier élément de la section <main>
  • La hiérarchie du contenu doit être respectée en utilisant les balises de titre <h2> <h3> etc.
  • Le lecteur d’écran accède au contenu via ces titres, voilà pourquoi c’est important

Les listes

Niveau A 1.3.1 – Info et relations

  • <ol> liste d’éléments avec un ordre spécifique
  • <ul> liste générique
  • <dl> liste de description (éléments par paires)
    • <dt> pour le titre
    • <dd> pour la description

Liens de navigation et de saut

Niveau A 1.3.1 – Info et relations

  • encapsuler la liste des liens de navigation dans <ul> et <li>

Niveau AA 1.4.5 – Images de texte

  • si possible, pas d’image pour remplacer les textes de navigation

Niveau AA 3.1.3 – Navigation cohérente

  • toute navigation qui se répète doit être cohérente dans l’ordre et la position

Niveau AA 2.4.5 – Plusieurs façons

  • fournir plus d’une manière d’accéder à une page d’un site web, par exemple en incluant une fonction de recherche
  • la recherche est un point de repère
    • <form role=“search”>
    • <input type=“search”>
  • pour les sites statiques, utiliser un plan du site, c’est bone pour la SEO (à conseiller donc aussi sur les sites dynamiques). Nommer et lier le plan du site dans le footer
    <p><a href=“sitemap.html”>Plan du site</a></p>
  • Le plan du site doit ressembler à une table des matières
    • S’il est court, utiliser <ul> ou <ol> ou une combinaison des deux
    • S’il est long, l’organiser comme du contenu <h2> – <h6>

Niveau A 2.4.4 – Objet du lien

  • L’objet du lien doit être déterminé par le lien seul
    <p><a href=“sitemap.html”>Plan du site</a></p>
  • Les liens « en savoir plus » enfreignent donc cette règle, les lecteurs d’écran n’ont aucun moyen de savoir quel lien est quoi.
  • Utiliser un lien plus verbeux En savoir plus sur notre page <a href=“products.html”>produits</a> ou, si trop long, masquer visuellement le long texte en le balisant dans un span avec une class :
    • Bootstrap : sr-only
    • Foundation : show-for-sr
    • CSS : .visually-hidden { border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

Niveau AA 3.2.4 – Identification cohérente

  • les composants qui ont la même fonctionnalité doivent être balisés/ identifiés de façon cohérente. Par exemple, tout les boutons du site doivent avoir la structure <button>Search</button>

Niveau A 2.4.1 – Blocs de dérivation

  • contourner les blocs de contenu qui se répètent sur la page
    • Utiliser les liens de saut
      • le lien qui mène l’utilisateur au contenu principal doit être le tout premier élément de la page
      • html <a class=“skip-link” href=“#main”>Skip to main</a> <main id=“main” class=“main skip-link” tabindex=“-1”>
      • css .skip-link { left: -100%; position: absolute; } .skip-link:focus { left: 50%; }

Les tableaux

Les tableaux ne peuvent pas être utilisés pour la mise en page !

Niveau A 1.3.1 – Info et relations

  • <caption> affiche le titre du tableau
  • thead, tfoot, tbody (tfoot sera toujours devant le tbody )
  • scope (portée)
    • exemple <th scope=“col”>...</th>
      <tr><th scope=“row”>...</th><td>...</td><td>...</td></tr>
    • la portée permet d’associer le corps du tableau avec l’en-tête valeurs : row, col, rowgroup, colgroup
  • en-têtes
    • <tr><th id=“basic” colspan=“2” scope=“colgroup”> </tr>
      <tr><td header=“basic prod”><td header=“basic cost”></tr>
    • pour un tableau plus complexe (les éviter si possible), ajouter le résumé du tableau dans <caption>. Ajouter la class visuallyHidden pour ne pas encombrer le visuel

Les formulaires, Focus, et contraste de couleur

Niveau AA 1.4.3 – Contraste

  • les représentations visuelles du texte doivent avoir un rapport de contraste de 4.5:1
  • le premier plan se détache de l’arrière-plan
  • s’apllique aux images et vidéos

Niveau A 2.4.6 – En-têtes et label
Niveau A 1.3.1 – Info et relations

  • Fournir un <label> aux <input>. Ne dépend pas du placeholder

Niveau A 3.3.2 – Label et instructions

  • un <label> et des instructions sont fournis quand le contenu exige une action de l’utilisateur
  • exemple : demander une date ou un prix demande un formatage spécial, il faut donc donner des instructions

Niveau A 4.1.2 – Name, Role, Value

  • les préciser pour tout les éléments de l’interface utilisateur (formulaires, liens, scripts générés…)

Niveau A 1.3.3 – Caractéristiques sensorielles

  • Les instructions de fonctionnement ne reposent pas uniquement sur les les caractéristiques sensorielles (forme, taille, emplacement visuel, orientation, son…)

Niveau A 2.1.1 – Clavier
Niveau A 2.1.2 – Pas de piège à clavier
Niveau A 2.4.7 – Focus visible

  • toutes les fonctionnalités du contenu doivent être accessible et utilisables via un clavier
  • de même, il faut éviter les pièges à clavier, l’utilisateur doit pouvoir s’éloigner d’un élément en utilisant le clavier
  • tout élément utilisable avec un clavier doit avoir un focus permettant de distinguer ou se situe l’utilisateur

Niveau A 1.4.1 – Utilisation de la couleur

  • la couleur n’est pas utilisée comme seul moyen visuel de transmettre des informations, d’indiquer une action, de provoquer une réponse ou de distinguer un élément visuel.

Niveau A 3.3.1 – Identification des erreurs
Niveau AA 3.3.3 – suggestion d’erreur

  • Si une erreur de saisie est détectée, l’élément en erreur doit être identifié et l’erreur doit être décrite à l’utilisateur par un texte
  • si une suggestion de correction est connue, la fournir à l’utilisateur tant que cela ne met pas en danger la sécurité du contenu

Niveau AA 3.1.2 – Langue des éléments

  • <p>Si vous le désirez aussi, <span lang=“es”>se habla espanol!</span></p>
  • utiliser for="#iddemoninput" pour relier les <label> aux <input> sauf si le label est implicite (quand le <input> est dans le <label>)
  • utiliser les types d’input html5 : tel, email
  • rassembler les input en <fieldset>
  • le premier enfant d’un <fieldset> doit être <legend> qui sera la description du groupe
  • les boutons radio doivent toujours être groupés

Niveau AA 3.3.4 – Prévention des erreurs

  • les pages web demandant des engagements juridiques ou transactions financières à l’utilisateur, ou qui modifient ou suppriment des données contrôlables par l’utilisateur doivent être réversibles (possibilité d’annuler), vérifiées et confirmées à l’utilisateur. Exemple : e-commerce

Niveau A 2.2.1 – Timing réglable

  • L’utilisateur doit être en mesure d’ajuster, prolonger ou désactiver toute limite de temps.
  • Exemple : formulaire à remplir, déconnexion suite à une inactivité, opération à réaliser dans un laps de temps…

Medias

Niveau A 1.1.1 – Contenu non textuel

  • tout contenu non textuel présenté à l’utilisateur doit avoir une alternative textuelle qui sert le même objectif
  • l’attribut alt doit être utilisé
  • pour les images décoratives laisser alt vide
  • astuces pour un bon texte alt
    • ne pas décrire l’image littéralement
    • proscrire « image de… » ou « représentation de… »
    • décrire plutôt le sens ou le but de l’image
  • l’image d’arrière-plan peut éviter une requête HTTP. Si cette image a une signification importante, ajouter sa description dans un élément caché
  • svg accessible
    • ajouter role="img" pour la sémantique
    • utiliser <title> sur la svg pour décrire l’image et <desc> pour expliquer son contenu si nécessaire
    • sur <svg>
      • utiliser l’attribut aria-labelledby en référençant le <title>
      • utiliser aria-describedby en référençant la <desc>
  • l’audio tombe dans la catégorie des médias temporels dans les WCAG
  • exemples de contenu audio-only
    • podcasts
    • bulletin radio
    • extraits sonores de tv/film

Niveau A 1.2.1 – Audio-only et Video-only (Pré-enregistré)

  • Une alternative est fournie présentant une information équivalente. (retranscription)
  • Inclure le nom des intervenants
  • décrire également les titrages, le ton, les expressions, les sons…
  • les présenter sous l’audio ou via un lien

Niveau A 1.4.2 – Contrôle audio

  • Si un son dure plus de 3 secondes, fournir une manière de le mettre en pause ou l’arrêter
  • La lecture automatique est déconseillée

Niveau A 2.3.1 – Trois éclairs sous le seuil

  • Rien ne peut clignoter plus de 3 fois par seconde

Niveau A 2.4.1 | Blocs de dérivation
Niveau A 4.1.2 | Nom, Role, Valeur

  • Tout média encapsulé dans un <iframe> doit être décrit via l’attribut title

Responsive Web Design

Niveau A 3.2.2 – On Input

  • la modification d’un élément d’interface ne peut pas automatiquement changer le contexte sans avoir prévenu l’utilisateur.
  • Example : proscrire une liste déroulante pour la navigation

Niveau A 1.3.2 – Séquence significative

  • quand la séquence présentant le contenu affecte sa signification, une lecture correcte doit être déterminée.
  • l’ordre visuel doit correspondre à l’ordre du DOM
  • combinaison de loupes d’écrans et lecteurs

Niveau A 2.4.3 – Ordre des focus

  • Si une page peut être parcourue séquentiellement et que cette navigation affecte la signification ou l’utilisation, les éléments qui le peuvent doit avoir un focus préservant cet ordre
  • exemple : seul flex-order change change l’ordre visuel et pas un changement dans le DOM
  • l’autofocus est uniquement acceptable s’il y a un formulaire comme la recherche Google

Niveau A 3.2.1 – Focus

  • quand un élément reçoit un focus, cela ne doit pas changer le contexte
  • ne pas déplacer le focus automatiquement, sauf en informant l’utilisateur au préalable mais ce n’est pas recommandé

Autre

  • être prudent avec les éléments hors écran car ils peuvent être accessibles par navigation tabulaire ou avec un lecteur d’écran
  • la meilleure façon de masquer du contenu de manière accessible
    • l’attribut html5 hidden comme sélecteur en utilisant display: none : [hidden] {display: none}
    • ou utiliser visibility: hidden : ... { visibility: hidden }
    • pour les utilisateurs de lecteur d’écran, ajouteraria-hidden=“true”
  • Maintenir le contraste de couleurs pour le texte sur les images