Opérable
Cet article fournit des conseils pratiques pour rédiger votre contenu web afin qu'il respecte les critères de succès du principe Opérable des Directives pour l'accessibilité du contenu Web (WCAG) 2.0 et 2.1. Le principe Opérable stipule que les composants d'interface utilisateur et la navigation doivent pouvoir être utilisés.
Note : Pour lire les définitions du W3C concernant le principe Opérable, ses lignes directrices et ses critères de succès, consultez Principe 2 : Opérable — Les composants d'interface utilisateur et la navigation doivent pouvoir être utilisés. (angl.)
Règle 2.1 — Accessibilité au clavier : rendre toutes les fonctionnalités accessibles au clavier
Cette règle concerne la nécessité de rendre les fonctionnalités principales d'un site accessibles au clavier, en plus d'autres moyens (par exemple, la souris), afin que les utilisateur·ice·s qui dépendent du clavier puissent y accéder.
| Critère de succès | Comment satisfaire le critère | Ressource pratique |
|---|---|---|
| 2.1.1 Clavier (A) | Toutes les fonctionnalités doivent être accessibles au clavier, sauf si cela est impossible (par exemple, dessin à main levée). Il faut utiliser les contrôles natifs quand c'est possible (par exemple, navigation par tabulation dans les formulaires), et ne créer des fonctionnalités personnalisées que si nécessaire. | Voir Utiliser des commandes UI sémantiques si possible et Rendre l'accessibilité clavier personnalisée |
| 2.1.2 Pas de piège clavier (A) |
Lorsqu'on entre dans une section fonctionnelle au clavier, il doit être possible d'en sortir à nouveau uniquement au clavier. Par exemple, si vous appuyez sur Entrée sur un bouton pour ouvrir une fenêtre d'options, vous devez pouvoir refermer cette fenêtre et revenir au contenu principal au clavier. Ceci est très important pour éviter que les utilisateur·ice·s clavier ne restent bloqué·e·s dans certaines sections de vos applications. |
|
| 2.1.3 Clavier — toutes les fonctionnalités (AAA) | C'est une étape supplémentaire par rapport au critère 2.1.1. Pour atteindre la conformité AAA, toutes les fonctionnalités doivent être accessibles au clavier — sans exception. | Voir Utiliser des commandes UI sémantiques si possible et Rendre l'accessibilité clavier personnalisée |
| 2.1.4 Raccourcis clavier à une touche (A) | Si un raccourci clavier à une seule touche existe, alors au moins une des conditions suivantes doit être vraie : il peut être désactivé, reconfiguré, ou n'est actif que lorsque le composant d'interface concerné a le focus. | Comprendre les raccourcis clavier à une touche (angl.) |
Note : Voir aussi la description WCAG pour Règle 2.1 : Accessibilité au clavier : rendre toutes les fonctionnalités accessibles au clavier (angl.).
Règle 2.2 — Temps suffisant : donner aux utilisateurs et utilisatrices assez de temps pour lire et utiliser le contenu
Cette règle concerne les situations où une fonctionnalité a une limite de temps. Par exemple, il faut parfois terminer un achat dans un délai imparti pour des raisons de sécurité.
| Critère de succès | Comment satisfaire le critère | Ressource pratique |
|---|---|---|
| 2.2.1 Limite de temps ajustable (A) |
Pour une fonctionnalité avec une limite de temps (par exemple, finaliser une réservation d'hôtel ou d'avion dans un temps imparti), l'utilisateur·ice doit disposer de contrôles pour ajuster, prolonger ou désactiver la limite de temps. Exceptions : activités avec une limite de temps supérieure à 20 heures, événements en temps réel (par exemple, jeux multijoueurs en ligne), ou toute activité nécessitant une limite de temps qui serait rendue invalide si elle était supprimée. |
|
| 2.2.2 Pause, arrêt, masquage (A) |
Pour le contenu en mouvement ou clignotant qui démarre automatiquement, dure plus de 5 secondes et s'affiche en même temps que d'autres contenus, il faut fournir des contrôles pour le mettre en pause, l'arrêter ou le masquer. Cela ne s'applique pas au contenu en mouvement ou clignotant essentiel à l'expérience. Exemples : texte défilant, vidéos. Pour les informations qui se mettent à jour automatiquement et s'affichent en même temps que d'autres contenus, il faut fournir des contrôles pour les mettre en pause, les arrêter, les masquer ou contrôler la fréquence des mises à jour. Cela ne s'applique pas au contenu mis à jour automatiquement qui est essentiel à l'expérience. Exemples : carrousels ou annonces tournantes. |
|
| 2.2.3 Pas de limite de temps (AAA) | Ce critère complète le 2.2.1 : pour atteindre la conformité AAA, le contenu ne doit pas avoir de limite de temps. | |
| 2.2.4 Suppression des interruptions (AAA) | Toute interruption comme des alertes ou des publicités interstitielles doit pouvoir être supprimée ou reportée, sauf s'il s'agit d'une alerte d'urgence. | |
| 2.2.5 Ré-authentification (AAA) | Si une session d'authentification expire lors de l'utilisation d'une application web, l'utilisateur·ice peut se ré-authentifier et poursuivre sans perdre de données. | |
| 2.2.6 Expiration (AAA) |
S'il y a une expiration (due à l'inactivité), avertir les utilisateur·ice·s au début du processus pour qu'ils·elles ne soient pas surpris·es par l'existence d'une expiration (ou n'autoriser l'expiration qu'après 20 heures d'inactivité). |
Comprendre les expirations (angl.) |
Note : Voir aussi la description WCAG pour Règle 2.2 : Temps suffisant : donner aux utilisateur·ice·s assez de temps pour lire et utiliser le contenu (angl.).
Règle 2.3 — Crises et réactions physiques : ne concevez pas de contenu susceptible de provoquer des crises ou des réactions physiques
Cela concerne le contenu qui, s'il n'est pas modifié, pourrait provoquer des crises chez des utilisateur·ice·s souffrant de pathologies comme l'épilepsie, OU des réactions physiques (comme des vertiges) chez des utilisateur·ice·s ayant des troubles vestibulaires.
| Critère de succès | Comment satisfaire le critère | Ressource pratique |
|---|---|---|
| 2.3.1 Trois flashs, ou en dessous du seuil (A) | Le contenu ne comporte aucun élément qui clignote plus de trois fois par seconde, ou le contenu clignotant reste en dessous des seuils de flash et de flash rouge (angl.) acceptables. | |
| 2.3.2 Trois flashs (AAA) | Le contenu ne comporte aucun élément qui clignote plus de trois fois par seconde. | |
| 2.3.3 Animations déclenchées par des interactions (AAA) | Permettre aux utilisateur·ice·s de désactiver les animations déclenchées par des interactions (sauf si l'animation est essentielle). | Comprendre les animations déclenchées par des interactions (angl.) |
Note : Voir aussi la description WCAG pour Règle 2.3 : Crises et réactions physiques : ne concevez pas de contenu susceptible de provoquer des crises ou des réactions physiques (angl.)
Règle 2.4 — Navigation : fournir des moyens d'aider les utilisateurs et utilisatrices à naviguer, trouver du contenu et savoir leur position
Les critères de succès de cette règle concernent les moyens permettant aux utilisateur·ice·s de s'orienter, de trouver le contenu et les fonctionnalités recherchés sur la page courante ou sur d'autres pages du site.
| Critère de succès | Comment satisfaire le critère | Ressource pratique |
|---|---|---|
| 2.4.1 Contourner les blocs (A) |
Un mécanisme doit permettre à l'utilisateur·ice d'accéder directement au contenu principal ou à la fonctionnalité principale de la page, en passant les éléments répétés (comme le logo de l'entreprise ou la navigation). Cela se fait souvent via des « liens d'accès rapide » — des liens placés en haut du code source de la page, pointant vers le contenu principal et masqués avec CSS.
Si une structure correcte de titres et de conteneurs sémantiques est fournie pour la navigation (par exemple |
Section à ajouter sur les « liens d'accès rapide ». |
| 2.4.2 Inclure un titre de page (A) |
Chaque page web doit inclure un élément de titre <title> informatif, dont le contenu décrit le contenu ou l'objectif de la page.
|
Voir Ajouter un titre. |
| 2.4.3 Ordre logique de sélection (A) | L'ordre de tabulation des éléments sélectionnables de la page (liens, boutons, champs de formulaire, etc.) doit avoir du sens, afin que la page reste utilisable par les utilisateur·ice·s non-voyant·e·s ou au clavier. | Voir Utiliser des commandes UI sémantiques si possible. Si vous devez placer des éléments dans une disposition inhabituelle, il est préférable de s'assurer que l'ordre du code source est logique, puis d'utiliser des fonctionnalités CSS comme le positionnement pour gérer la présentation. |
| 2.4.4 Finalité des liens (dans le contexte) (A) | La finalité ou la destination d'un lien peut être déterminée à partir du texte du lien ou de son contexte (par exemple, le texte environnant). Exceptions : lorsque la finalité du lien est ambiguë pour tous les utilisateur·ice·s (voir ambiguë pour les utilisateur·ice·s en général (angl.) pour une explication utile). | Voir Utiliser des libellés de texte significatifs. Il faut également éviter de multiplier les cas où plusieurs occurrences du même texte sont liées à des destinations différentes. Cela peut poser problème aux utilisateur·ice·s de lecteurs d'écran, qui affichent souvent une liste des liens hors contexte : plusieurs liens tous intitulés « cliquez ici », « cliquez ici », « cliquez ici » seraient source de confusion. |
| 2.4.5 Mécanismes de navigation multiples (AA) |
Il faut fournir au moins deux mécanismes généraux de navigation pour trouver des pages sur votre site : menu de navigation, fil d'Ariane, recherche, plan du site, liste de liens connexes, etc. La seule exception concerne les pages qui sont une étape d'un processus, et qui ne doivent logiquement comporter que des liens vers l'étape précédente et suivante. |
La plupart de ces mécanismes peuvent être créés avec des fonctionnalités HTML standard, par exemple : Champ de recherche, Créer un menu de navigation, Mettre en forme les liens comme des boutons. |
| 2.4.6 Titres et libellés (AA) |
Les éléments de titre (par exemple, <h2>) et <label> décrivent clairement la finalité du contenu ou des champs de formulaire qu'ils désignent.
|
Voir Utiliser des commandes UI sémantiques si possible, Utiliser des libellés de texte significatifs, Bases des titres et paragraphes, L'élément <><label>. Il faut éviter de dupliquer les titres ou libellés (par exemple, plusieurs « Informations complémentaires »), sauf si la structure permet de les différencier facilement. |
| 2.4.7 Sélection visible pour les éléments sélectionnables (AA) | Lors du parcours par tabulation des éléments sélectionnables (liens, champs de formulaire, etc.), un indicateur visuel doit montrer quel élément est actuellement sélectionné. Il s'agit généralement d'un contour pointillé ou bleu par défaut (selon le navigateur, la plateforme, etc.), mais cela peut être modifié par CSS. | Voir Utiliser des commandes UI sémantiques si possible. |
| 2.4.8 Position dans le site (AAA) | Lorsqu'on se trouve sur une page d'un site complexe ou d'une suite d'étapes, il faut indiquer à l'utilisateur·ice où il·elle se trouve, par exemple via un fil d'Ariane, un plan du site ou un texte comme « Page 2 sur 10 ». | |
| 2.4.9 Finalité des liens (lien seul) (AAA) | Ce critère complète le 2.4.4 : pour la conformité AAA, la finalité ou la destination d'un lien doit pouvoir être déterminée à partir du seul texte du lien, même hors contexte. | Voir Utiliser des libellés de texte significatifs. Il faut également éviter de multiplier les cas où plusieurs occurrences du même texte sont liées à des destinations différentes. Cela peut poser problème aux utilisateur·ice·s de lecteurs d'écran, qui affichent souvent une liste des liens hors contexte : plusieurs liens tous intitulés « cliquez ici », « cliquez ici », « cliquez ici » seraient source de confusion. |
| 2.4.10 Titres de section (AAA) |
En plus de structurer le document, les titres doivent aussi décrire précisément et séparer les zones de contenu en sections logiques. Ce critère concerne les titres dans le contenu web général (par exemple, titres dans le texte). Les titres d'interfaces utilisateur sont un cas particulier traité dans le critère 4.1.2. |
|
| 2.4.11 Sélection non masquée (minimum) (AA) |
Lorsqu'un composant d'interface reçoit la sélection clavier, il ne doit pas être entièrement masqué par du contenu créé par l'auteur·ice. Note : Si le contenu de l'interface peut être déplacé par l'utilisateur·ice, seule la position initiale du contenu déplaçable est prise en compte pour la conformité. De plus, un contenu ouvert par l'utilisateur·ice peut masquer le composant sélectionné. Enfin, si l'utilisateur·ice peut révéler le composant sélectionné sans changer la sélection clavier, le composant n'est pas considéré comme masqué pour la conformité et les tests. |
Voir Comprendre la sélection non masquée (minimum) (angl.) pour plus d'informations. |
| 2.4.12 Sélection non masquée (améliorée) (AAA) |
Suit les mêmes règles que 2.4.11, sauf que lorsqu'un composant d'interface reçoit la sélection, aucune partie du composant ne peut être masquée par du contenu créé par l'auteur·ice. Si l'interface est configurable, seules les positions initiales du contenu déplaçable sont prises en compte pour la conformité et les tests. |
Voir Comprendre la sélection non masquée (améliorée) (niveau AAA) (angl.) pour plus d'informations. |
| 2.4.13 Apparence de la sélection (AAA) |
Lorsque l'indicateur de sélection clavier est visible, la zone de l'indicateur de sélection respecte tous les critères suivants :
Les exceptions sont :
|
Voir Comprendre l'apparence de la sélection (niveau AAA) (angl.) pour plus d'informations. |
Note : Voir aussi la description WCAG pour Règle 2.4 : Navigation : fournir des moyens d'aider les utilisateur·ice·s à naviguer, trouver du contenu et savoir leur position (angl.)
Règle 2.5 — Modalités de saisie : faciliter l'utilisation des fonctionnalités via différents modes d'entrée, au-delà du clavier
Les critères de succès de cette règle garantissent que les utilisateur·ice·s peuvent interagir avec la technologie numérique à l'aide de différents modes d'entrée, au-delà du clavier ou de la souris (y compris l'écran tactile, la voix, les mouvements de l'appareil ou des dispositifs alternatifs).
| Critère de succès | Comment satisfaire le critère | Ressource pratique |
|---|---|---|
| 2.5.1 Gestes du pointeur (A) | Toute fonctionnalité pouvant être utilisée avec un pointeur doit pouvoir l'être avec des actions à un seul point. Les gestes basés sur un tracé ou multipoints ne doivent pas être nécessaires pour utiliser une fonctionnalité. Il existe des exceptions. | Comprendre les gestes du pointeur (angl.) |
| 2.5.2 Annulation du pointeur (A) | Pour une fonctionnalité utilisable avec un seul pointeur, au moins une des conditions suivantes doit être vraie : aucun événement lors de l'appui, possibilité d'annuler/annuler, inversion lors du relâchement ou caractère essentiel. | Comprendre l'annulation du pointeur (angl.) |
| 2.5.3 Libellé dans le nom (A) | Pour chaque composant d'interface utilisateur comportant un libellé texte visible, le nom accessible doit correspondre (ou inclure) le texte visible du libellé. | Comprendre le libellé dans le nom (angl.) |
| 2.5.4 Activation par mouvement (A) | Pour toute fonctionnalité pouvant être déclenchée par : a) un mouvement de l'appareil (secouer, incliner, etc.) ou b) des gestes détectés par des capteurs (y compris une caméra), les deux conditions suivantes doivent être vraies : 1) l'activation par mouvement peut être désactivée, 2) la fonctionnalité peut être utilisée sans mouvement ou geste. Il existe des exceptions. | Comprendre l'activation par mouvement (angl.) |
| 2.5.5 Taille de la cible (AAA) | La taille de la zone tactile d'un élément actionnable doit être d'au moins 44 pixels CSS de large et de haut. Il existe des exceptions. | Comprendre la taille de la cible (angl.) |
| 2.5.6 Mécanismes d'entrée simultanés (AAA) | Il faut permettre aux utilisateur·ice·s d'utiliser et de basculer entre différents modes d'entrée lors de l'interaction avec un contenu numérique : écran tactile, clavier, souris, commandes vocales ou dispositifs alternatifs. Une exception essentielle existe. | Comprendre les mécanismes d'entrée simultanés (angl.) |
| 2.5.8 Taille minimale de la cible (AA) |
La taille de la cible pour les entrées au pointeur doit être d'au moins 24px de large sur 24px de haut, sauf dans les cas suivants :
|
Voir Comprendre la taille minimale de la cible (angl.) |
Note : Voir aussi la description WCAG pour Règle 2.5 : Modalités de saisie : faciliter l'utilisation des fonctionnalités via différents modes d'entrée, au-delà du clavier (angl.)
Voir aussi
- WCAG
- Perceptible
- Opérable
- Compréhensible
- Robuste