L'accessibilité numérique consiste à rendre les contenus et services numériques compréhensibles et utilisables par les personnes en situation de handicap. Les utilisateurs ont recours à une grande variété de de technologies d'assistance (saisie alternative et affichage alternatif) pour interagir avec le contenu numérique. Il faut donc concevoir les sites web de manière inclusive en tenant compte de toute la diversité humaine.
Règles pour l'accessibilité des contenus web
Les règles pour l'accessibilité des contenus web (WCAG) ont été créées pour guider les personnes souhaitant rendre le web accessible à un plus vaste public d'utilisateurs. Elles sont articulées autour de quatre grands principes :
- Perceptible : le contenu peut être présenté dans différents modes (visuel, sonore, affichage alternatif)
- Utilisable : le contenu peut faire l'objet de différents types d'interactions (souris, clavier, saisie alternative)
- Compréhensible : le contenu est prévisible, clair et aide les utilisateurs lors des interactions
- Robuste : le contenu est compatible avec un maximum de navigateurs et de technologies d'assistance (interopérabilité)
Stratégie de tests d'accessibilité
La stratégie de tests doit inclure des tests automatisés, des tests manuels et des tests au moyen de technologies d'assistance.
- utiliser les outils de développement pour l'accessibilité du navigateur
- utiliser les validateurs (W3C)
- suivre une checklist (A11Y Project)
- tester l'affichage et les interactions avec différents navigateurs sur différents supports (fixe et mobile)
- tester la saisie alternative en parcourant le site à l'aide d'un clavier
- tester la restitution alternative à l'aide d'un lecteur d'écran
Bonnes pratiques d'accessibilité
Utilisation du HTML sémantique
Une grande partie des contenus web peut être rendue accessible simplement en s'assurant d'utiliser les éléments HTML appropriés systématiquement.
Règles de base :
- les règles de typographie sont respectées
- les polices de caractères sont lisibles
- les éléments visuels sont suffisamment contrastés
- les niveaux de titrage sont adaptés
- les unités de taille sont relatives :
emet% - les pages ont des titres uniques et significatifs
- un texte alternatif décrit les images informatives et la destination des images interactives
- les images décoratives sont intégrées sans texte alternatif dans le CSS
- les contenus audio et vidéo disposent de transcriptions
- les contenus vidéo disposent de sous-titres, de descriptions des visuels et sont disponibles dans différents formats (pour gérer la compatibilité entre les navigateurs)
- l'objectif des liens est clairement identifiable grâce au texte du lien, à la phrase qui contient le texte ou à des libellés accessibles
- les formulaires fournissent des instructions et des messages d'erreur clairs
- cohérence en termes de noms, de comportement, de présentation et de navigation dans le site
Utilisation d'ARIA
ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas.
Première règle d'ARIA : si vous pouvez utiliser un élément natif HTML ou un attribut avec la sémantique et le comportement voulu qui existe nativement, faites-le plutôt que d'utiliser un autre élément en lui ajoutant un rôle, un état ou une propriété ARIA afin de le rendre accessible.
Exemples d'utilisation :
- barre de recherche : rôle
search - menu de navigation : rôle
navigationet attributsaria-haspopupetaria-expanded - tableau : balise
captionpour décrire le tableau et attributscopepour définir le sens de lecture - formulaire : balise
labelassociée à chaque élément et éventuellement un étataria-requiredetaria-invalid - fenêtre modale : rôles
dialog,documentet attributaria-hiddenappliqué à l’ensemble du document sauf la fenêtre
