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 `longdesc`. |
| 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 `<img>`, fournissez un texte alternatif explicitement vide avec l'attribut `alt` (`alt=""`). Sinon, les lecteurs d'écran pourraient vocaliser le chemin du fichier, etc.
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. |

**Note :** Voir aussi la description du WCAG pour la règle 1.2 sur les alternatives aux médias temporels.

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 :* Les libellés textuels et les éléments de formulaire auxquels ils correspondent. Cette association est construite de façon non-ambigüe avec l'élément `<label>`, qui pourra être utilisé par les lecteurs d'écran.
* Inclure des textes alternatifs pour les images. Le contenu sous forme d'image devrait avoir un texte disponible qui décrit de façon claire le contenu de l'image et ce texte doit pouvoir être associé à l'image par un programme informatique (par exemple avec le texte porté par l'attribut `alt`), ou pouvoir facilement y être associé (la description est par exemple à côté de l'image). De cette façon, on peut connaître l'intégralité du contenu, même sans pouvoir voir l'image.
* Pour les listes, si l'ordre des éléments est important, on utilisera une liste ordonnée (`<ol>`).
 | 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 :* « Cliquez sur le bouton rond afin de continuer »
Le bouton devrait être libellé de façon claire afin qu'on puisse clairement identifier le bouton sur lequel il faut appuyer. S'il y a plusieurs boutons, on s'assurera que leurs libellés sont clairs et permettent de distinguer leurs fonctions.
* « Écoutez les instructions audio pour de l'aide »
Un exemple problématique : l'audio ne sera pas accessible aux personnes ayant un handicap auditif, alors que le texte peut être lu par un lecteur d'écran si nécessaire.
* « Balayez sur le côté droit de l'écran afin de révéler le menu »

Certaines personnes ne peuvent pas effectuer ce geste à l'écran, en raison d'un handicap ou parce que leur appareil ne dispose pas d'une interface tactile. Une méthode alternative doit être fournie, comme un raccourci clavier ou un bouton qui puisse être activé au clavier ou d'une autre façon.

**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) |

**Note :** Voir aussi la description du WCAG pour la règle 1.3 sur le contenu adaptable, qui peut être présenté de différentes façons sans perte d'information ou de structure.

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 (en-US). |
| 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é :* Le texte et son arrière-plan doivent avoir un ratio de contraste supérieur à 4.5:1.
* Les titres (ou le texte plus grand) doivent avoir un ratio de contraste supérieur à 3:1 par rapport à l'arrière-plan. Le texte plus grand est défini comme ayant une taille supérieure ou égale à 18pt, ou 14pt en gras.
 | 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.* Le texte et son arrière-plan devrait avoir un ratio de contraste supérieur à 7:1.
* Les titres (ou les textes plus grands) devraient avoir un ratio de contraste supérieur à 4.5:1. Le texte plus grand est défini comme ayant une taille supérieure ou égale à 18pt, ou 14pt en gras.
 | 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 :* Les couleurs de premier plan et d'arrière-plan devraient pouvoir être sélectionnées par l'utilisatrice ou l'utilisateur.
* Les blocs de texte ne devraient pas être plus larges que 80 caractères ou glyphes pour garantir une lisibilité maximale.
* Le texte ne devrait pas être justifié (`text-align: justify;`).
* La hauteur des lignes devrait être supérieure ou égale à 1,5 fois la taille du texte au sein des paragraphes (par exemple `line-height: 1.5;`), et au moins 2,25 fois la taille du texte entre les paragraphes (par exemple `padding: 2.25rem;`).
* Lorsque la taille du texte est doublée, le contenu ne devrait pas avoir besoin du défilement.
 |  |
| 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* | * Aucun défilement horizontal pour les langues écrites de gauche à droite (comme le français) ou de droite à gauche (comme l'arabe).
* Aucun défilement vertical pour les langues écrites de haut en bas (telles que le japonais).
* Exception faite du contenu pour lequel une disposition en deux dimensions est nécessaire à l'usage ou pour sa signification (comme un grand tableau de données).
 | 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 :* La hauteur des lignes vaut au moins 1,5 fois la taille de la police.
* L'espacement suivant les paragraphes vaut au moins 2 fois la taille de la police.
* L'espacement entre les lettres vaut au moins 0,12 fois la taille de la police.
* L'espacement entre les mots vaut au moins 0,16 fois la taille de la police.
 | 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 :* il peut être masqué (on peut le fermer ou le supprimer)
* il peut être survolé (le contenu supplémentaire ne disparaît pas lorsque le pointeur est au-dessus de celui-ci)
* il est persistant (le contenu supplémentaire ne disparaît pas sans action de l'utilisatrice ou de l'utilisateur)
 | Comprendre le contenu au survol ou au focus |

**Note :** Voir aussi la description du WCAG pour la règle 1.4 sur le contenu distinguable et la facilitation de la perception visuelle et auditive du contenu, notamment pour distinguer le premier-plan de l'arrière-plan.

Voir aussi
----------

* Comprendre les règles pour l'accessibilité des contenus web (WCAG)
    1. Perceptible
    2. Fonctionnel (en-US)
    3. Compréhensible (en-US)
    4. Robuste (en-US)