Perceptible
Dans cet article, nous verrons des conseils pratiques pour écrire du contenu web qui respecte le principe de perceptibilité décrit dans les règles pour l'accessibilité des contenus web (WCAG) 2.0 et 2.1. Les états du contenu doivent pouvoir être perçus par les utilisatrices et utilisateurs d'une façon ou d'une autre en utilisant un de leurs sens.
Note : Les définitions du W3C pour cette catégorie, les règles associées et les critères de réussite sont présentes sur la page Principe 1 : l'information et les composants de l'interface utilisateur doivent être présentés à l'utilisatrice ou à l'utilisateur de façon à ce qu'il puisse les percevoir.
Règle 1.1 — Des équivalents textuels doivent être fournis pour tout contenu non textuel
L'information principale à retenir ici est que le texte peut être converti sous d'autres formes que les personnes avec un handicap peuvent utiliser. Il pourra ainsi être vocalisé par un lecteur d'écran, converti en grands caractères ou représenté sur un affichage en braille. Le contenu non textuel fait référence au multimédia comme les images, les fichiers audio et les vidéos.
| Critère de réussite | Comment respecter ce critère | Ressources pratiques |
|---|---|---|
| 1.1.1 Fournir des équivalents textuels (A) | Toutes les images qui ont un contenu significatif devraient avoir un texte alternatif approprié. | Alternatives textuelles |
Les images ou graphiques devraient avoir une alternative accessible de fournie, qu'elle soit située sur la même page ou accessible via un lien. On utilisera un lien normal plutôt qu'un attribut longdesc.
|
Une description textuelle peut fonctionner, on peut aussi écrire un tableau de données accessible (voir Fonctionnalités avancées des tableaux HTML et accessibilité). Voir la section sur les autres mécanismes alternatifs au texte pour un argument contre l'utilisation de |
|
| Le contenu multimédia (c'est-à-dire audio ou vidéo) devrait au moins avoir une identification descriptive disponible, telle qu'une légende ou quelque chose de similaire. |
Voir les alternatives textuelles pour les options de légendes statiques, les transcriptions audio, les pistes de texte vidéo, et les autres contenus multimédia pour d'autres alternatives. |
|
| Les contrôles qui forment l'interface utilisateur comme les éléments de formulaire et les boutons devraient disposer de libellés textuels qui décrivent leur objectif. |
Pour les boutons, il s'agit de s'assurer que le texte du bouton décrit la fonction du bouton (par exemple, <button>Téléverser l'image</button>). Pour plus d'informations sur les autres contrôles participant à l'interface utilisateur, voir les contrôles de l'interface utilisateur.
|
|
| On implémentera les médias décoratifs (qui ne participent pas au contenu) (images, vidéos, etc.) afin qu'ils soient invisibles aux technologies d'assistance pour ne pas être source de confusion envers les utilisatrices et utilisateurs. |
Les images décoratives devraient être implémentées à l'aide des images d'arrière-plan CSS (voir Arrières-plans en CSS). Si vous devez inclure une image décorative avec Si vous incluez des vidéos ou des sons en arrière-plan avec une lecture automatique, assurez-vous qu'ils soient aussi discrets que possible et qu'ils ne puissent pas être confondus avec le contenu essentiel de la page. Un contrôle pour les suspendre doit être disponible. Idéalement, on évitera simplement d'inclure ce type de contenu. |
Note : Voir aussi la description du WCAG pour la règle 1.1 sur les alternatives textuelles.
Règle 1.2 — Fournir des alternatives textuelles aux médias temporels
Les médias temporels sont les médias qui ont une durée comme les fichiers audio ou vidéo. On notera que si le fichier audio/vidéo est utilisé comme alternative à du contenu textuel déjà présent, il n'est pas nécessaire de fournir une autre alternative textuelle.
| Critère de réussite | Comment respecter ce critère | Ressources pratiques |
|---|---|---|
| 1.2.1 Fournir des alternatives au contenu pré-enregistré seulement audio ou seulement vidéo (A) | Une transcription devrait être fournie pour les médias pré-enregistrés qui sont uniquement audio. Une transcription ou une description audio devrait être fournie pour les médias pré-enregistrés qui sont uniquement vidéo (par exemple, une vidéo muette). | Voir les transcriptions audio pour des informations à ce sujet. |
| 1.2.2 Fournir des sous-titres pour les vidéos web (A) | Des sous-titres devraient être fournis pour les vidéos web (par exemple celles qui utilisent l'élément HTML <video>). Cela rend la vidéo accessible aux personnes qui ne peuvent pas entendre le son de la vidéo. |
Voir les pistes textuelles pour les vidéos pour les sous-titres des vidéos HTML et les autres contenus multimédias pour les autres technologies. Voir aussi Ajouter des sous-titres sur YouTube. |
| 1.2.3 Fournir des transcriptions textuelles ou une description audio pour les vidéos web (A) | Des transcriptions textuelles ou des descriptions audio pour les vidéos web (par exemple celles qui utilisent l'élément HTML <video>) doivent être fournies afin que la vidéo soit accessible aux personnes qui ne peuvent pas voir la vidéo et/ou qui ne peuvent pas connaître le contenu à partir de la seule bande son. |
Voir les transcriptions audio pour des informations à ce sujet. |
| 1.2.4 Fournir des sous-titres pour l'audio en direct (AA) | Des sous-titres synchronisés devraient être fournis pour l'ensemble des médias en direct qui contiennent de l'audio (par exemple des conférences vidéo, des diffusions sonores en direct). | |
| 1.2.5 Fournir des descriptions audio pour les vidéos pré-enregistrées (AA) | Des descriptions audio devraient être fournies pour les vidéos pré-enregistrées, uniquement lorsque l'audio existant ne suffit pas à exprimer pleinement la vidéo. | |
| 1.2.6 Fournir un équivalent en langue des signes pour l'audio pré-enregistré (AAA) | Une vidéo équivalente en langue des signes devrait être fournie pour tout contenu pré-enregistré contenant de l'audio. | |
| 1.2.7 Fournir une vidéo plus longue avec des descriptions audio (AAA) | Lorsqu'il n'est pas possible de fournir des descriptions audio (voir 1.2.5) en raison des limites de temps (par exemple lorsqu'il n'y a pas suffisamment de pauses dans le contenu où insérer les descriptions audio), une version alternative de la vidéo devrait être fournie et contenir des pauses insérées, avec les descriptions audio. | |
| 1.2.8 Fournir une alternative aux médias pré-enregistrés (AAA) | Pour tous les contenus utilisant une vidéo, une transcription textuelle descriptive devrait être fournie, par exemple le script d'un film. Il s'agit de rendre accessible le contenu pour les personnes qui ne peuvent pas l'entendre. | Voir les transcriptions audio pour plus d'informations à ce sujet. |
| 1.2.9 Fournir une transcription pour les diffusions audio en direct (AAA) | Pour toute diffusion audio en direct, un texte descriptif devrait être fourni, tel qu'un script de la pièce ou les paroles de la chanson diffusée. Il s'agit de rendre accessible le contenu pour les personnes qui ne peuvent pas l'entendre. | Voir les transcriptions audio pour plus d'informations à ce sujet. |
Règle 1.3 — Créer du contenu pouvant être présenté de différentes façons
Cette règle correspond à la capacité à pouvoir utiliser du contenu de plusieurs façons, afin que chaque personne puisse en disposer selon ses besoins et capacités.
| Critère de réussite | Comment respecter ce critère | Ressources pratiques |
|---|---|---|
| 1.3.1 Informations et relations (A) |
Toute relation portant sur la structure du contenu ou présentée visuellement doit pouvoir être déterminée par un programme informatique ou déduite de la description textuelle. Cette situation s'applique notamment pour :
|
L'article HTML : une bonne base pour l'accessibilité contient de nombreuses informations à ce propos, on pourra notamment consulter une bonne sémantique, les contrôles de l'interface utilisateur, et les alternatives textuelles. |
| 1.3.2 Ordre séquentiel logique (A) | Un ordre de lecture pertinent et logique devrait pouvoir être déterminé facilement pour tout contenu, même si ce dernier est présenté visuellement de façon inhabituelle. L'ordre devrait être clair grâce à l'utilisation d'éléments sémantiques (titres, paragraphes, etc.), le CSS étant utilisé pour toute mise en forme. | Là encore, voir HTML : une bonne base pour l'accessibilité. |
| 1.3.3 Caractéristiques sensorielles (A) |
Les instructions pour manipuler des contrôles ou comprendre le contenu ne doivent pas reposer sur un seul sens. Le contraire pourrait rendre le contenu inaccessible aux personnes ayant un handicap sur ce sens ou qui utilisent un appareil sans interface pour ce sens. Par exemple :
Note : Le fait de communiquer des instructions à la seule aide de couleurs est connexe, mais abordé dans une règle différente : 1.4.1. |
|
| 1.3.4 Orientation (AA) ajouté dans la version 2.1 | La vue et l'utilisation du contenu n'est pas restreinte à une seule orientation, paysage ou portrait, à moins que cette orientation d'affichage soit essentielle. | Comprendre l'orientation (en anglais) |
| 1.3.5 Identifier la finalité des champs (AA) ajouté dans la version 2.1 | Se référer à la liste des 53 types de champs afin d'identifier la finalité d'un champ donné. | Comprendre la finalité d'un champ de saisie (en anglais) |
| 1.3.6 Identifier la fonction (AAA) ajouté dans la version 2.1 | Pour le contenu implémenté avec un langage à balises, la fonction d'un composant d'interface utilisateur, des icônes et des régions peut être déterminée par un programme informatique. | Comprendre l'identification de la fonction (en anglais) |
Règle 1.4 — Faciliter la perception visuelle et auditive du contenu, notamment en séparant le premier plan de l'arrière-plan
Cette règle consiste à s'assurer que le contenu principal peut facilement se distinguer de l'arrière-plan et des autres décorations. Un exemple classique porte sur la couleur (tant sur le contraste entre les couleurs que sur l'utilisation de couleurs pour véhiculer des informations), mais cela s'applique à d'autres situations également.
| Critère de réussite | Comment respecter ce critère | Ressources pratiques |
|---|---|---|
| 1.4.1 Utilisation de la couleur (A) | La couleur ne devrait pas être utilisée seule pour véhiculer des informations. Ainsi, pour un formulaire, on ne marquera pas un champ obligatoire avec seulement une couleur (comme le rouge). En complément ou à la place, on pourra utiliser un astérisque avec un libellé « obligatoire », qui sera plus approprié. | Voir Couleurs et contraste de couleurs et Les étiquettes multiples. |
| 1.4.2 Contrôles audio (A) | Pour tout média audio dont la lecture dure plus de trois secondes, on fournira des contrôles accessibles afin de suspendre/reprendre la lecture et pour mettre en sourdine/ajuster le volume. |
On utilisera des éléments <button> natifs afin de fournir des contrôles accessibles au clavier, comme montré dans Fondamentaux pour la mise en forme d'un lecteur vidéo.
|
| 1.4.3 Contraste minimal (AA) |
Le contraste des couleurs entre l'arrière-plan et le contenu de premier plan doit respecter un niveau minimal afin de garantir la lisibilité :
|
Voir Couleurs et contraste de couleurs. |
| 1.4.4 Redimensionnement du texte (AA) | La page devrait être lisible et utilisable lorsque la taille du texte est doublée. Cela signifie que la disposition doit être adaptative afin que, lorsque la taille du texte est augmentée, le contenu soit toujours accessible. | |
| 1.4.5 Texte sous forme d'image (AA) | Les images ne devraient pas être utilisées pour présenter du contenu où du texte simple aurait suffi. Ainsi, si une image est principalement constituée de texte, on utilisera plutôt ce texte. | |
| 1.4.6 Contraste amélioré (AAA) |
Cela suit et reprend le critère 1.4.3.
|
Voir Couleurs et contraste de couleurs. |
| 1.4.7 Arrière-plan sonore faible ou absent (AAA) | Les enregistrements audio pré-enregistrés qui portent principalement sur des dialogues doivent avoir un bruit de fond minimal afin que le contenu puisse être facilement compris. | |
| 1.4.8 Présentation visuelle (AAA) |
Pour la présentation du contenu textuel, les règles suivantes devraient être respectées :
|
|
| 1.4.9 Texte sous forme d'image (sans exception) (AAA) | Le texte ne devrait pas être présenté comme partie d'une image à moins qu'il s'agisse uniquement d'une décoration (c'est-à-dire qu'il ne véhicule aucun contenu) ou qu'il ne puisse être présenté d'une autre façon. | |
| 1.4.10 Redistribution (AA) ajouté dans la version 2.1 |
|
Comprendre la redistribution (en anglais) |
| 1.4.11 Contraste du contenu non-textuel (AA) ajouté dans la version 2.1 | On doit avoir un ratio de contraste minimal de 3:1 entre les couleurs des éléments d'interface utilisateur et des objets graphiques. | Comprendre le contraste du contenu non-textuel (en anglais) |
| 1.4.12 Espacement du texte (AA) ajouté dans la version 2.1 |
Aucune perte de contenu ou de fonctionnalité ne doit avoir lieu lorsque les styles suivants sont appliqués :
|
Comprendre l'espacement du texte (en anglais) |
| 1.4.13 Contenu au survol ou au focus (AA) ajouté dans la version 2.1 |
Bien que du contenu supplémentaire puisse apparaître et disparaître en fonction du survol et du focus au clavier, ce contenu doit respecter les trois critères suivants :
|
Comprendre le contenu au survol ou au focus |