Propulsé par le RAAMM

Utilisable

Le problème

Les personnes ayant des limitations motrices, qui ne leur permettent pas d’utiliser une souris ou qui rendent cette utilisation difficile, doivent pouvoir employer des commandes clavier pour se déplacer dans une page Web et interagir avec les éléments interactifs.

Les personnes ayant des limitations visuelles sévères utilisent aussi le clavier pour se déplacer dans une page Web, parce qu’elles ne peuvent utiliser la souris avec un lecteur d’écran ou avec un logiciel de grossissement en 8X ou plus.

Par ailleurs, certains composants d’une page Web peuvent piéger l’utilisateur qui navigue au clavier, en lui permettant d’y entrer avec la touche Tabulation, mais pas toujours d’en ressortir pour revenir sur ses pas ou pour poursuivre la consultation du reste de la page.

Enfin, lorsque des raccourcis clavier à un seul caractère sont offerts dans une page ou une application Web, les personnes qui utilisent des commandes vocales peuvent rencontrer une activation accidentelle de ces raccourcis, s’il n’est pas possible de les désactiver ou de les modifier.

Les règles qui s’appliquent à la navigation au clavier

Niveau A

2.1.1 Clavier (niveau A) : toutes les fonctionnalités du contenu sont utilisables à l’aide d’une interface clavier sans exiger un rythme de frappe propre à l’utilisateur, sauf lorsque la fonction sous-jacente nécessite une saisie qui dépend du tracé du mouvement effectué par l’utilisateur et pas seulement des points de départ et d’arrivée de ce tracé.

NOTE : Cette exception ne concerne que la fonction sous-jacente et non la technique de saisie. Par exemple, lorsqu’on utilise l’écriture manuscrite pour saisir du texte, la technique de saisie (l’écriture manuscrite) nécessite une saisie qui dépend d’un tracé, mais la fonction sous-jacente (la saisie de texte) ne le requiert pas.

NOTE : Cela n’interdit pas et ne devrait pas décourager l’utilisation de la souris ou de toute autre méthode de saisie en plus de l’utilisation du clavier.

2.1.2 Pas de piège au clavier (niveau A) : si le focus du clavier peut être positionné sur un élément de la page à l’aide d’une interface clavier, réciproquement, il peut être déplacé hors de ce même composant simplement à l’aide d’une interface clavier et, si ce déplacement exige plus que l’utilisation d’une simple touche flèche ou tabulation ou toute autre méthode standard de sortie, l’utilisateur est informé de la méthode permettant de déplacer le focus hors de ce composant.

NOTE : Puisque tout contenu ne satisfaisant pas à ce critère de succès peut interférer avec la capacité de l’utilisateur à exploiter la page entière, tout le contenu présent dans la page Web (qu’il soit utilisé pour satisfaire à d’autres critères de succès ou non) doit satisfaire à ce critère de succès. Voir l’exigence de conformité 5 : Non-interférence.

Niveau AAA

2.1.3 Clavier (pas d’exception) (niveau AAA) : toutes les fonctionnalités du contenu sont utilisables à l’aide d’une interface clavier sans exiger un rythme de frappe propre à l’utilisateur.

2.1.4 Raccourcis clavier utilisant des caractères (niveau A) : Si un raccourci clavier est implémenté dans du contenu en utilisant uniquement des caractères de type lettres (y compris les majuscules et les minuscules), des signes de ponctuation, des chiffres ou des symboles, alors au moins l’une des conditions suivantes est vraie :

  • Désactiver : un mécanisme est disponible pour désactiver le raccourci ;
  • Réassigner : un mécanisme est disponible pour réassigner le raccourci afin d’utiliser un ou plusieurs caractères non imprimables du clavier (par exemple, Ctrl, Alt, etc.) ;
  • Actif uniquement au focus : le raccourci clavier pour un composant d’interface utilisateur n’est actif que lorsque ce composant a le focus.

Voir aussi :

Explications techniques

Utilisation du clavier

Vous ne devez pas simuler des liens ou des boutons avec JavaScript (attribut onclick), car ces composants deviendront inutilisables au clavier ou avec les technologies d’adaptation informatiques.

Vous devez vous assurer aussi que les événements comme onmouseover ou onmouseout sont dédoublés avec des événements au clavier comme onfocus et onblur. Ainsi, tous les événements déclenchés à l’aide de la souris pourront également l’être par l’utilisation du clavier.

Les utilisateurs ayant des limitations motrices ou visuelles pourront donc accéder aux mêmes fonctionnalités que l’ensemble de vos visiteurs.

Exemples de code pour l’utilisation de la souris et du clavier

Utilisable avec la souris uniquement :

<a id="emplois-et-formation" href="/emploi-et-formation/" title="Emploi et formation"
onmouseover="document.getElementById('img2') .src='/img/navprinc_emplois_on.png';"
onmouseout="document.getElementById('img2') .src='/img/navprinc_emplois_off.png'; "> Emploi et formation</a>

Utilisable à l’aide de la souris et du clavier :

<a id="emplois-et-formation" href="/emploi-et-formation/" title="Emploi et formation"
onmouseover="document.getElementById('img2') .src='/img/navprinc_emplois_on.png';"
onfocus="document.getElementById('img2') .src='/img/navprinc_emplois_on.png';"
onmouseout="document.getElementById('img2').src='/img/navprinc_emplois_off.png';"
onblur="document.getElementById('img2') .src='/img/navprinc_emplois_off.png';">Emploi et formation</a>
Événements dépendants ou indépendants de la souris
Dépendants Indépendants
onmouseover onfocus
onmouseout onblur
onmousedown onkeydown
onmouseup onkeyup
onclick Attention! Cet événement est déjà accessible au clavier s’il s’applique à un lien ou un bouton, il ne faut donc pas le doubler de son équivalent onkeypress.
ondblclick Attention! N’a pas d’équivalent.

Absence de piège au clavier

À une certaine époque, il était courant de rencontrer des objets ou applets sur certaines pages Web, qui pouvaient piéger l’utilisateur se déplaçant au clavier si certaines précautions n’étaient pas prises par le concepteur. C’est pourquoi les règles d’accessibilité prévoient ceci :

  • Lorsqu’il est possible d’entrer dans un objet ou dans un applet à l’aide du clavier, il doit être possible de poursuivre le parcours du contenu hors de cet objet ou de cet applet, en utilisant seulement le clavier.
  • Il faut donc prévoir un mécanisme qui permette d’en sortir avec la touche Tabulation, avec une touche fléchée ou par tout autre moyen.
  • Si la touche Tabulation ou une touche fléchée ne suffisent pas, il faut rendre disponible (au moment voulu) une explication sur la méthode à utiliser.

Parmi des exemples plus actuels de piège au clavier, notons le cas d’une boîte de dialogue dans laquelle on peut entrer avec la navigation au clavier, mais où on ne peut plus en ressortir, à moins d’utiliser une souris. Cet obstacle peut notamment se produire si le bouton de fermeture réagit à la souris seulement et qu’un mécanisme de fermeture comme la touche Échappe n’est pas prévu.

Enfin, même s’il ne s’agit pas au sens strict de pièges au clavier, certains composants interactifs peuvent amener l’utilisateur à entrer dans une longue série de boutons ou de liens, qu’il devient très difficile de quitter avec la navigation au clavier. Par exemple, les cadres (<iframe>) de nouvelles Facebook font constamment apparaître de nouveaux contenus au fil de la tabulation. Dans le cas des cartes interactives, il peut être aussi difficile d’en ressortir aisément au clavier.

Dans ces cas, on suggère de placer, tout juste avant le cadre Facebook ou la carte interactive, un lien de contournement qui devient visible au focus du clavier. Ainsi, toute personne naviguant au clavier, qu’elle soit voyante ou non, peut éviter d’entrer dans ces composants si elle ne souhaite pas s’y aventurer.  Par ailleurs, un lien de contournement explicitement formulé (ex. : « contourner le fil de nouvelles Facebook ») peut aider les personnes aveugles ou malvoyantes à anticiper la présence du composant qui suit et à le contourner au besoin. Enfin, outre l’ajout du lien de contournement, on recommande de prévoir ailleurs dans la page une manière d’accéder à des contenus équivalents. Par exemple, dans le cas d’un cadre de nouvelles Facebook, on peut offrir un lien direct vers la page Facebook, qu’il est possible de consulter à sa guise et de refermer facilement pour revenir au contenu initial. Pour les cartes interactives, on peut prévoir une alternative plus aisément navigable au clavier, telle qu’une adresse de l’organisation présentée sous forme de texte, ou un lien vers un outil de planification d’itinéraire donnant des résultats textuels.

Raccourcis clavier à un caractère

WCAG 2.1 ajoute un critère de niveau A concernant l’utilisation de raccourcis clavier utilisant un seul caractère. En effet, ces raccourcis  peuvent être activés accidentellement, surtout dans le contexte où une personne utilise la commande vocale.  Il faut donc pouvoir redéfinir ces commandes en y ajoutant une ou deux touches modificatrices (par exemple, Ctrl ou Alt), les désactiver ou les rendre active seulement lorsque l’élément contrôlé a le focus.

Le problème

Une personne ayant des limitations motrices, visuelle ou cognitives n’est pas toujours aussi rapide qu’une personne sans limitations dans l’exécution de certaines tâches, par exemple, pour remplir un formulaire. La sévérité des limitations, ou la combinaison de limitations multiples, peuvent évidemment accentuer cette difficulté.

Si le délai alloué est trop court pour lire le contenu ou interagir avec celui-ci, ces contenus peuvent devenir inutilisables par certaines personnes.

Un autre problème lié à cette question du délai est l’actualisation automatique de la page qui est interprétée par les lecteurs d’écran comme le chargement d’une nouvelle page, ce qui entraîne la relecture de la page à partir du début. Cela s’applique également à l’actualisation automatique d’un cadre de la page, car le lecteur d’écran considère la page dans son ensemble.

Par ailleurs, le mouvement peut être trop distrayant pour les personnes ayant des limitations cognitives. Il est donc à éviter ou à ralentir considérablement. Il est cependant acceptable si l’utilisateur dispose d’un moyen simple de l’arrêter.

Une animation de pré-chargement est toutefois permise, à condition que cette page ne permette pas d’interaction, et qu’elle soit nécessaire pour rassurer l’utilisateur sur le fait qu’un traitement est en cours et qu’il doit patienter. Le message d’attente doit alors être placé au tout début de la page.

Les règles qui s’appliquent au délai suffisant

Niveau A

2.2.1 Réglage du délai (niveau A) : pour chaque limite de temps fixée par le contenu, au moins l’un des points suivants est vrai :

  • Suppression : l’utilisateur a la possibilité de supprimer la limite de temps avant de la rencontrer ; ou
  • Ajustement : l’utilisateur a la possibilité d’ajuster la limite de temps avant de la rencontrer dans un intervalle d’au moins dix fois la durée paramétrée par défaut ; ou
  • Extension : l’utilisateur est averti avant que la limite de temps n’expire et il lui est accordé au moins 20 secondes pour étendre cette limite par une action simple (par exemple, « appuyer sur la barre d’espace ») et l’utilisateur a la possibilité d’étendre la limite de temps au moins dix fois ; ou
  • L’exception du temps réel : la limite de temps est une partie constitutive d’un événement en temps réel (par exemple, une enchère) et aucune alternative n’est possible ; ou
  • l’exception de la limite essentielle : la limite de temps est essentielle et l’étendre invaliderait alors l’activité ; ou
  • L’exception des 20 heures : la limite de temps est supérieure à 20 heures.

NOTE : Ce critère de succès permet de s’assurer que les utilisateurs peuvent compléter leurs tâches sans changement inattendu de contenu ou de contexte résultant de la limite de temps. Il devrait être considéré conjointement avec le critère de succès 3.2.1, qui pose des limites aux changements de contenu ou de contexte résultant d’une action de l’utilisateur.

2.2.2 Mettre en pause, arrêter, masquer (niveau A) : pour toute information en mouvement, clignotante, défilante ou mise à jour automatiquement, tous les points suivants sont vrais : (Niveau A)

  • Déplacement, clignotement, défilement : pour toute information en mouvement, clignotante ou défilante qui (1) démarre automatiquement, (2) dure plus de cinq secondes et (3) est présentée conjointement avec un autre contenu, il y a un mécanisme à la disposition de l’utilisateur pour la mettre en pause, l’arrêter ou la masquer, à moins que le mouvement, le clignotement ou le défilement s’avère un élément essentiel au bon déroulement de l’activité; et
  • Mise à jour automatique : pour toute information mise à jour automatiquement qui (1) démarre automatiquement (2) et est présentée conjointement avec un autre contenu, il y a un mécanisme à la disposition de l’utilisateur pour la mettre en pause, l’arrêter ou pour en contrôler la fréquence des mises à jour à moins que la mise à jour automatique s’avère essentielle au bon déroulement de l’activité.

NOTE : Pour les exigences relatives au contenu scintillant ou flashant, se référer à la règle 2.3.

NOTE : Puisque tout contenu ne satisfaisant pas à ce critère de succès peut interférer avec la capacité de l’utilisateur à exploiter la page entière, tout le contenu présent dans la page Web (qu’il soit utilisé pour satisfaire à d’autres critères de succès ou non) doit satisfaire à ce critère de succès. Lire Exigence de conformité 5 : Non-interférence.

NOTE : Il n’est pas exigé que le contenu mis à jour périodiquement par logiciel ou diffusé en flux à l’agent utilisateur conserve ou présente l’information générée ou reçue entre la mise en pause et la reprise de la présentation, puisque cela peut ne pas être techniquement possible et s’avérer trompeur dans beaucoup de situations.

NOTE : Une animation survenant dans une phase de pré-chargement ou dans une situation similaire peut être considérée comme essentielle si aucune interaction n’est permise à tous les utilisateurs durant cette phase et si l’absence d’indication de progression est susceptible de perturber les utilisateurs ou de leur faire croire que le contenu est figé ou défectueux.

Niveau AAA

2.2.3 Pas de délai d’exécution (niveau AAA) : le temps n’est pas un facteur essentiel dans le déroulement de l’événement ou de l’activité, à l’exception des médias synchronisés non interactifs et des événements en temps réel.

2.2.4 Interruptions (niveau AAA) : les interruptions peuvent être reportées ou supprimées par l’utilisateur, à l’exception des interruptions impliquant une urgence.

2.2.5 Nouvelle authentification (niveau AAA) : quand une session authentifiée expire, l’utilisateur peut poursuivre son activité sans perte de données après une nouvelle authentification.

2.2.6 Délais d’expiration (niveau AAA) : Les utilisateurs sont avertis de la durée de leur inactivité qui pourrait entraîner une perte de données, à moins que les données ne soient conservées pendant plus de 20 heures lorsque l’utilisateur n’effectue aucune action.

NOTE : Les réglementations relatives à la protection de la vie privée peuvent exiger le consentement explicite de l’utilisateur avant qu’il ait été authentifié et avant que ses données soient conservées. Dans la plupart des juridictions, pays ou régions, le consentement explicite d’une personne mineure ne peut pas être sollicité. Lorsque la conservation des données est envisagée comme une méthode pour satisfaire à ce critère de succès, il est conseillé de consulter des professionnels de la protection de la vie privée et un conseiller juridique.

Voir aussi :

La solution

Si vous devez absolument inclure ce type de délai, donnez un moyen pour désactiver l’actualisation automatique (ex. bouton en début de page ou case à cocher à l’entrée dans un formulaire).

Vous pourriez aussi permettre d’ajuster ce délai ou de le prolonger jusqu’à 10 fois le délai prévu, mais cela est plus compliqué à gérer.

Explications techniques

Pour un contenu clignotant, défilant ou mis à jour automatiquement, vous pouvez offrir un élément d’interface permettant de visualiser ce même contenu, dans une fenêtre ou dans une zone statique. Pour plus de détails et des exemples, consultez les techniques : SCR22: Using scripts to control blinking and stop it in five seconds or less et SCR36: Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area

Vous pouvez offrir un élément d’interface permettant de suspendre toute interruption, sauf en cas d’urgence.

Pour une session authentifiée, vous pouvez sauvegarder les données de façon à pouvoir les réutiliser une fois que l’utilisateur s’est à nouveau authentifié.

Pour une animation de préchargement, il est important que le message invitant à la patience soit placé en tout début de page pour que l’utilisateur d’un lecteur d’écran puisse en prendre connaissance avant que la page ne change à nouveau.

La redirection automatique peut être déroutante, parce qu’elle ne laisse pas à certains utilisateurs le temps nécessaire à la lecture complète de la page. Il vaut donc mieux gérer la redirection par le serveur.

Si vous devez passer par une page de redirection, configurez l’actualisation à 0 secondes, ce qui rendra cette redirection non perceptible par l’utilisateur.

Vous pouvez aussi offrir un lien vers la page de redirection, lien que l’utilisateur pourra activer à sa convenance lorsqu’il aura eu le temps de prendre connaissance de votre message.

Pour une activité en temps réel comme une enchère, le délai peut être considéré comme essentiel à la réalisation de l’activité, et donc incontournable.

Les WCAG 2.1 ajoutent le critère 2.2.6 suivant : informer du délai permis avant la perte de données pour les personnes ayant des limitations cognitives, visuelles et motrices qui ont besoin de plus de temps dans des systèmes transactionnels. Cela leur permet de prendre une pause avant de compléter une transaction leur demandant trop de concentration.

Exemple de code pour un rafraîchissement non perceptible par l’utilisateur

<meta http-equiv="refresh"
content="0;url=http://www.wikipedia.org/" />

 

Le problème

Les effets stroboscopiques peuvent provoquer des crises chez les personnes épileptiques photosensibles. Par exemple, on a recensé 18 cas de crises d’épilepsie photosensibles, déclenchées par le visionnement d’une promotion des Jeux Olympiques de Londres de 2012.

Les WCAG 2.0 (et versions subséquentes) désignent ce phénomène sous le nom de « flash ».

Ces situations doivent donc être évitées ou ralenties sous le seuil sécuritaire de moins de 3 clignotements à la seconde.

Les règles qui s’appliquent à la prévention des crises

Niveau A

2.3.1 Pas plus de trois flashs ou sous le seuil critique (niveau A) : une page Web doit être exempte de tout élément qui flashe plus de trois fois dans n’importe quel intervalle d’une seconde ou ce flash doit se situer sous le seuil de flash générique et le seuil de flash rouge.

NOTE : Puisque tout contenu ne satisfaisant pas à ce critère de succès peut interférer avec la capacité de l’utilisateur à exploiter la page entière, tout le contenu présent dans la page Web (qu’il soit utilisé pour satisfaire à d’autres critères de succès ou non) doit satisfaire à ce critère de succès. Voir l’exigence de conformité 5 : Non-interférence.

Niveau AAA

2.3.2 Trois flashs (niveau AAA) : une page Web doit être exempte de tout élément qui flashe plus de trois fois dans n’importe quel intervalle d’une seconde.

2.3.3 Animation résultant d’interaction (niveau AAA) : L’animation basée sur le mouvement, déclenchée par une interaction, peut être désactivée sauf si l’animation est essentielle à la fonctionnalité ou à l’information transmise.

Voir aussi :

La solution

Si on s’en tient à un rythme qui ne dépasse pas 3 clignotements à la seconde, il n’y a aucun risque. Sinon, il faut être sous le seuil de flash générique, et sous le seuil de flash rouge, dont vous trouverez la définition technique dans la section Glossaire. Comme cette définition est très complexe, il est donc beaucoup plus simple de s’en tenir à la règle des 3 clignotements (ou moins) à la seconde même si ce critère est de niveau AAA.

Il est aussi possible de réduire la zone de flash afin d’éviter de provoquer des crises.

Le Trace Center a développé un outil gratuit qui permet d’évaluer le clignotement à partir d’une capture vidéo de l’écran à 24 images par seconde. Cet outil est le Photosensitive Epilepsy Analysis Tool (PEAT). Pour un usage commercial, il faut plutôt utiliser le Harding FPA développé par Cambridge Research Systems.

Enfin, les WCAG 2.1 ajoutent un nouveau critère AAA, pour offrir la possibilité de désactiver toutes les animations non essentielles déclenchées par une interaction.

Voir ces 2 exemples FAUTIFS de « flash » :

Le problème

Pour des personnes aveugles ou ayant des limitations visuelles sévères, il est fastidieux d’avoir à parcourir tous les menus avant d’arriver au contenu. C’est pourquoi il faut prévoir un mécanisme qui leur permettra d’aller directement au contenu principal de la page, en passant par dessus les blocs d’information qui se répètent de page en page.

Une personne dont les limitations motrices ne lui permettent pas d’utiliser une souris bénéficiera aussi d’un tel mécanisme, grâce auquel elle atteindra plus rapidement un lien situé dans le contenu principal, sans avoir à tabuler à travers tous les liens des menus.

Les règles qui s’appliquent à l’accès au contenu principal

2.4.1 Contourner des blocs (niveau A) : un mécanisme permet de contourner les blocs de contenu qui sont répétés sur plusieurs pages Web.

Voir aussi :

 

La solution

La meilleure façon de regrouper les liens est de les présenter sous forme de listes, ce qui permettra à un lecteur d’écran d’indiquer à l’utilisateur la longueur de la liste.

Pour passer la navigation, deux solutions s’offrent à vous :

  1. Incorporer au tout début de la page un lien de contournement placé hors écran, mais visible au focus du clavier et conduisant au contenu principal de la page. Ce lien peut s’intituler simplement « Aller au contenu ».
  2. Placer un en-tête de niveau 1 au début du contenu principal de la page que l’utilisateur pourra atteindre facilement à l’aide du raccourci clavier déjà prévu par son lecteur d’écran.

Quelle que soit la stratégie que vous choisissez, il est important de l’implanter de façon systématique, afin que l’utilisateur puisse prévoir le moyen qu’il devra utiliser pour accéder directement au contenu sur chaque page d’un même site.

Si vous utilisez un lien en début de page pour aller au contenu principal, il est également possible de prévoir des liens de contournement pour atteindre directement le menu principal et le menu de la section. Cette technique est préférable à l’ajout d’en-têtes de section pour chapeauter chaque niveau de menu. En revanche, il importe de faire usage de tels liens de manière équilibrée et réfléchie. Un abus de liens de contournement peut complexifier la compréhension des mécanismes de navigation, et alourdir leur prise en main.

 

Le problème

Les personnes ayant des limitations cognitives ont besoin d’aide pour naviguer et pour se situer dans un site Web. Ces personnes peuvent avoir des problèmes de concentration, de mémoire ou de compréhension, qui risquent de les désorienter rapidement si des moyens ne sont pas mis en place pour les soutenir dans leur navigation.

Les personnes ayant des limitations visuelles ont aussi besoin de se repérer dans un environnement dont ils ne perçoivent qu’une petite partie à la fois. Le manque de vision globale de l’écran rend toute tâche de navigation plus difficile, et nécessite donc la mise en place de points de repères sur lesquels l’utilisateur pourra compter.

Les règles qui s’appliquent au soutien à la navigation

Niveau A

2.4.2 Titre de page (niveau A) : les pages Web présentent un titre qui décrit leur sujet ou leur but.

Niveau AA

2.4.5 Accès multiples (niveau AA) : une page Web peut être située par plus d’un moyen dans un ensemble de pages Web sauf si cette page est le résultat ou une étape d’un processus.

2.4.6 En-têtes et étiquettes (niveau AA) : les en-têtes et les étiquettes décrivent le sujet ou le but.

Niveau AAA

2.4.8 Localisation (niveau AAA) : l’utilisateur dispose d’informations pour se situer dans un ensemble de pages Web.

2.4.10 En-têtes de section (niveau AAA) : les en-têtes de section sont utilisés pour organiser le contenu.

NOTE : « En-tête » est utilisé dans le sens général et comprend les titres et autres moyens de structurer les différents types de contenus.

NOTE : Ce critère de succès concerne les contenus de sections et non les composants d’interface utilisateur. Les composants d’interface utilisateur sont traités par le critère de succès 4.1.2.

Voir aussi :

La solution

La métadonnée la plus importante est le titre de la page, qui est placé dans l’élément <title> de la section <head> de la page Web.

  • Ce titre doit être représentatif du contenu de la page, et donc, différent de page en page.
  • Il y a souvent une forte ressemblance entre le titre de la page et le titre de niveau 1, ce qui est tout à fait normal.
  • On peut aussi adjoindre à ce titre un rappel du nom du site si on le souhaite. Ce rappel a toutefois avantage à être placé à la fin du titre, et non au début, de sorte que l’utilisateur puisse se concentrer d’abord sur l’information distinctive.

Le plan du site est aussi une aide à la navigation et à la compréhension de l’organisation générale d’un site.

  • Le plan du site doit donner accès à tout le contenu du site, directement ou indirectement. Le plan du site devrait donner accès aux deux niveaux de navigation qui se rattachent à la page d’accueil.
  • Un lien vers le plan du site devrait être offert sur chaque page.
  • Dans le cas d’un petit site où chaque page contient un lien vers toutes les autres pages, le plan du site devient évidemment superflu.

Une page longue pourrait aussi offrir un menu de navigation interne à la page.

Parmi les autres moyens pouvant soutenir la navigation, mentionnons :

  • Une indication de la page active dans le menu de navigation. Pour plus de détails et des exemples, consultez la technique : G128: Indicating current location within navigation bars.
  • Un moteur de recherche simple ou avancé.
  • Des en-têtes et des étiquettes qui décrivent bien le contenu.
  • Des liens vers les autres pages reliées.
  • Un fil d’Ariane qui doit être précédé d’une mention explicite du type « Vous êtes ici : » afin que l’utilisateur comprenne bien l’utilité de cette liste de liens (liste parmi plusieurs autres).

Note : dans les WCAG, ce n’est qu’au niveau AAA qu’il est exigé d’utiliser des en-têtes de section. Toutefois, si des en-têtes visuels sont utilisés, ils doivent être codés comme des en-têtes, afin de satisfaire au critère de succès 1.3.1.

Explications techniques

Exemple de code pour le titre de la page
<head>...
<title>Les règles 2.1 - Formation en accessibilité du Web</title>...
</head>

Le problème

Les personnes ayant des limitations motrices (ne leur permettant pas d’utiliser une souris), et les personnes ayant des limitations visuelles sévères, déplacent le focus dans la page à l’aide de la touche Tabulation. Ce parcours au clavier doit donc être logique.

Les règles qui s’appliquent à l’ordre de tabulation

Niveau A

2.4.3 Parcours du focus (niveau A) : si une page Web peut être parcourue de façon séquentielle et que les séquences de navigation affectent la signification ou l’action, les éléments reçoivent le focus dans un ordre qui préserve la signification et l’opérabilité.

Voir aussi :

La solution

L’ordre de tabulation est contrôlé par l’ordre d’apparition des contenus dans le code source de la page. La façon la plus optimale de corriger cet aspect est donc de revoir l’ordre du code source.

Si vous utilisez des menus déroulants, vous devez vous assurer que les sous-menus seront adjacents, dans l’ordre de tabulation, à l’élément de menu qui en déclenche l’ouverture.

Explications techniques

En dernier recours, vous pourriez corriger l’ordre de tabulation en utilisant l’attribut tabindex avec des numéros rétablissant un ordre plus approprié. Cependant, cette approche n’est pas recommandée, puisqu’elle comporte deux revers importants :

  • Les éléments dont l’ordre ne sera pas précisé avec cet attribut seront repris dans leur ordre habituel, à la suite de ceux auxquels vous aurez fixé vous-même un ordre. Si vous ne pouvez faire autrement, vérifiez attentivement l’ordre de tabulation sur toute la page pour déceler des problèmes éventuels.
  • L’ajout d’un ordre de tabulation précise uniquement dans quel ordre s’enchaînent les éléments focusables (liens, boutons, champs de formulaire, etc.) lors d’un emploi de la touche Tabulation. Cette indication n’a pas d’impact sur l’ordre de lecture des éléments, tel que celui suivi par les lecteurs d’écran lors d’une lecture ligne par ligne de la page (critère 1.3.2 – Ordre séquentiel logique). De ce fait, même si on corrige l’ordre de tabulation des éléments focusables avec tabindex, ces éléments pourraient être lus dans un ordre non logique lors d’une présentation linéaire des contenus.

Il y a deux façons beaucoup plus intéressantes d’utiliser l’attribut tabindex :

  • En donnant à cet attribut la valeur "0", vous pouvez ajouter un arrêt de tabulation à un élément comme un titre ou un paragraphe, même s’il n’est pas nativement focusable. Cela peut être utile dans certaines situations, comme :
    • pour déplacer le focus sur le titre d’une boîte de dialogue;
    • pour s’assurer qu’une instruction importante dans un formulaire est prise en compte lors d’une navigation avec la touche Tabulation, incluant la navigation en mode formulaire proposée par certains lecteurs d’écran.
  • En donnant à l’attribut tabindex la valeur "-1", l’élément devient focusable par programmation, sans être toutefois ajouté à l’ordre de tabulation.

Le problème

Certaines personnes ayant des limitations motrices ne peuvent utiliser une souris, et emploient des adaptations telles qu’une navigation au clavier, un contrôle par commande vocale ou un dispositif alternatif de pointage. Pour que chaque composant interactif  (lien, bouton, etc.) puisse être utilisable, l’utilisateur doit voir où se situe l’élément qui reçoit le focus, de façon à pouvoir l’activer si nécessaire.

Les personnes qui ont une limitation visuelle (basse vision) et qui naviguent au clavier doivent être en mesure de repérer facilement la position du focus à l’écran. C’est pourquoi les règles d’accessibilité déterminent une taille minimale et un contraste de couleur pour l’indicateur de focus.

Enfin, les personnes ayant des limitations cognitives peuvent bénéficier d’une meilleure capacité de repérage de l’élément recevant le focus, notamment dans le cas de difficultés d’attention, de faible mémoire à court terme ou de difficultés à exécuter un processus.

Les règles qui s’appliquent à la visibilité du focus

Niveau AA

2.4.7 Visibilité du focus (niveau AA) : toute interface utilisable au clavier comporte un mode de fonctionnement où le focus est visible.

2.4.11 Focus Not Obscured (Minimum) (Level AA)

[Version française non officielle] 2.4.11 Focus non masqué (minimum) (Niveau AA) : Lorsqu’un composant d’interface utilisateur reçoit le focus du clavier, le composant n’est pas entièrement masqué en raison du contenu créé par l’auteur.

NOTE 1 : Lorsque le contenu d’une interface configurable peut être repositionné par l’utilisateur, seules les positions initiales du contenu mobile de l’utilisateur sont prises en compte pour le test et la conformité de ce critère de réussite.

NOTE 2 : Le contenu ouvert par l’utilisateur peut masquer le composant qui reçoit le focus. Si l’utilisateur peut révéler le composant focalisé sans faire avancer le focus du clavier, le composant ayant le focus n’est pas considéré comme caché en raison du contenu créé par l’auteur.

Niveau AAA

2.4.12 Focus Not Obscured (Enhanced Level AAA)

[Version française non officielle] 2.4.12 Focus non masqué (amélioré) (niveau AAA) : Lorsqu’un composant d’interface utilisateur reçoit le focus du clavier, aucune partie du composant n’est cachée par le contenu créé par l’auteur.

2.4.13 Focus Appearance (Level AAA)

[Version française non officielle] 2.4.13 Apparence du focus (Niveau AAA) : Lorsque l’indicateur de focus du clavier est visible, une zone de l’indicateur de focus répond à toutes les conditions suivantes :

  • est au moins aussi grande que la surface d’un périmètre de 2 pixels CSS d’épaisseur du composant ou du sous-composant non focalisé, et
  • a un rapport de contraste d’au moins 3:1 entre les mêmes pixels dans les états focalisé et non focalisé.

Exceptions :

  • L’indicateur de focus est déterminé par l’agent utilisateur et ne peut pas être ajusté par l’auteur, ou
  • L’indicateur de focus et la couleur d’arrière-plan de l’indicateur ne sont pas modifiés par l’auteur.

NOTE 1 : Ce qui est perçu comme le composant ou le sous-composant de l’interface utilisateur (pour déterminer le boîtier ou la taille) dépend de sa présentation visuelle. La présentation visuelle comprend le contenu visible, la bordure et l’arrière-plan spécifique du composant. Il n’inclut pas les effets d’ombre et de lueur en dehors du contenu, de l’arrière-plan ou de la bordure du composant.

NOTE 2 : Des exemples de sous-composants qui peuvent recevoir le focus sont les éléments de menu dans un menu déroulant ouvert, ou les cellules focalisables dans une grille.

NOTE 3 : Les calculs de contraste peuvent être basés sur des couleurs définies au sein de la technologie (telles que HTML, CSS et SVG). Les pixels modifiés par les améliorations de la résolution de l’agent utilisateur et l’anticrénelage peuvent être ignorés.

Voir aussi :

La solution

Les navigateurs Web ont leur propre façon de mettre en évidence un élément recevant le focus. Il s’agit généralement d’un encadré. Toutefois, un concepteur peut, volontairement ou non, contrecarrer cette fonctionnalité déjà prévue, en modifiant l’apparence de l’indicateur de focus depuis la feuille de styles. Vous devez donc vous assurer que cet indicateur est toujours repérable visuellement, du début à la fin du parcours (critère 2.4.7, niveau A, depuis WCAG 2.0).

À partir des WCAG 2.1, au niveau AA, le critère 1.4.11 sur le contraste du contenu non textuel s’applique en combinaison au critère 2.4.7,  pour un indicateur de focus dont l’apparence a été modifiée par l’auteur de la page. La couleur de cet indicateur doit atteindre un contraste minimal de 3:1 avec les couleurs adjacentes. La documentation Comprendre le critère de succès 1.4.11 (en anglais) explique le lien étroit entre ce critère et celui de la visibilité du focus (2.4.7).

À partir des WCAG 2.2, au niveau AAA, le critère 2.4.13 se cumule aux critères précédemment énumérés, pour que l’apparence du focus facilite encore plus son repérage. Ainsi, le critère 2.4.13 détermine une taille minimale pour l’indicateur de focus, en plus d’un contraste minimal entre l’état actif et inactif du focus. Plus précisément :

  • La taille doit être égale au périmètre multiplié par deux, ce qui est facile s’il s’agit d’une forme carrée ou rectangulaire, mais plus difficile pour un cercle ou pour une étoile. L’indicateur de focus peut avoir n’importe quelle forme : un contour, une bordure, un cercle par exemple. L’important est que sa surface corresponde au moins au double de son périmètre.
  • Pour ce qui est du contraste, le niveau requis est de 3:1 entre la couleur de l’état actif et inactif du focus.

Enfin, il arrive que certains éléments recevant le focus (liens, boutons, champs de formulaire, etc.) se trouvent masqués par un entête ou un pied de page fixes, ou par une fenêtre non modale superposée à une partie du contenu. Le critère 2.4.11 de niveau AA exige que le composant qui reçoit le focus soit au moins partiellement visible. C’est seulement le critère 2.4.12 de niveau AAA qui exige que le composant soit entièrement visible.

Le problème

Les personnes aveugles, qui utilisent un lecteur d’écran, disposent d’une fonction qui leur permet de dresser la liste de tous les liens de la page. Cette fonction leur permet de naviguer plus efficacement, sans être obligés de lire tout le contenu de la page. Elles peuvent, par exemple, trouver un lien très rapidement en tapant ses premières lettres.

Toutefois, il faut que le libellé des liens soit significatif et qu’il puisse être compris facilement dans le contexte global de la page. Sinon, l’utilisateur doit, soit retourner au paragraphe où se situe ce lien pour en comprendre la fonction, soit l’activer pour en voir l’effet.

Les règles qui s’appliquent à la clarification des liens

Niveau A

2.4.4 Fonction du lien (selon le contexte) (niveau A) : la fonction de chaque lien est déterminée par le texte du lien seul ou par le texte du lien associé à un contexte du lien déterminé par un programme informatique, sauf si la fonction du lien est ambiguë pour tout utilisateur.

Niveau AAA

2.4.9 Fonction du lien (lien uniquement) (niveau AAA) : un mécanisme permet de déterminer la fonction de chaque lien par le texte du lien uniquement, sauf si la fonction du lien est ambiguë pour tout utilisateur.

Voir aussi :

La solution

Les liens utilisant de façon répétitive le même texte (ex. « cliquer ici » ou « pour en savoir plus… ») posent donc problème.

Explications techniques

Des liens conduisant à des cibles différentes ne peuvent utiliser le même texte, parce que cela créerait de la confusion. C’est souvent le cas des liens de type « pour en savoir plus… » ou « lire la suite… ». Une façon de remédier à ce problème pourrait être de convertir ce libellé en image, et d’ajouter dans le contenu du alt (à la suite de « lire la suite… ») le titre de cette nouvelle, ce qui peut être fait automatiquement par certains systèmes de gestion de contenu.

Vous pouvez aussi afficher cette dernière partie du lien hors écran, en utilisant la feuille de style.

Il est aussi possible d’offrir un élément d’interface en début de page pour modifier le texte des liens. Ceci permet d’intégrer le titre de la nouvelle au texte de son lien : « lire la suite : … ».

Exemples de code pour un lien explicite

Exemple FAUTIF :

<h2>Brigadiers scolaires recherchés</h2>
<p>Nous sommes à la recherche de brigadiers scolaires pour travailler sur les traverses piétonnières. <a href="/communiques.asp?id=435">Lire la suite</a></p>

Solutions pour rendre le lien explicite :

<a href="/communiques.asp?id=435">Lire la suite<img src="brigadiers-scolaires.html" alt=" de Brigadiers scolaires recherchés"></a>
(ou)
<a href="/communiques.asp?id=435">Lire la suite<span class="sr-only"> de Brigadiers scolaires recherchés"></span>

Dans l’exemple précédent, la classe sr-only correspond à un style de positionnement hors écran selon la technique décrite par WebAim (en anglais) : Positioning content off-screen

Par ailleurs, si vous utilisez un lien graphique et un lien texte conduisant à la même destination, vous devriez les intégrer dans la même balise <a>. L’attribut alt de l’image doit alors être vide puisque la signification du lien est déjà donnée par le texte adjacent. C’est d’ailleurs le seul cas où l’on peut mettre un alt vide pour une image intégrée à un lien. Technique associée (en anglais) : H2: Combining adjacent image and text links for the same resource.

Exemple de code pour regrouper un lien graphique et un lien texte

<a href="http://www.abc.com/"><img src="icone-abc.png" alt="" />ABC</a>

Enfin, notons que le libellé d’un lien a toujours avantage à commencer par le mot le plus significatif. De même, il faut éviter autant que possible les séries de liens commençant de la même façon afin de faciliter le repérage dans la liste des liens fournie par le lecteur d’écran.

Les WCAG permettent, au niveau A, de comprendre un lien à partir de son contexte immédiat (paragraphe courant, en-tête de section, item de liste, etc.). Les lecteurs d’écran n’offrent toutefois pas de moyen simple de vérifier ce contexte quand un utilisateur navigue dans la liste des liens, c’est pourquoi nous n’encourageons pas cette pratique.

Pour les documents non HTML :

  • Le format des documents non HTML pourrait être spécifié textuellement ou par une icône à l’intérieur du lien de téléchargement.
  • Il est considéré de l’ordre des bonnes pratiques de spécifier également la taille du fichier à télécharger, afin d’en aviser les utilisateurs qui s’apprêtent au téléchargement.
  • Des formats alternatifs pourraient aussi être offerts.

Exemples de code pour la précision du format

<a href="document1.pdf">Document 1 [en format PDF, 4.5 Mo]</a>
<a href="document1.pdf">Document 1 [en format PDF]</a>
<a href="document1.rtf">Document 1 [en format RTF]</a>
<a href="document1.docx">Document 1 [en format Word]</a>

Le problème

Les WCAG 2.1 introduisent une toute nouvelle règle relative aux modalités d’interaction, aussi appelées modalités d’entrée dans la récente traduction française du standard.

Six nouveaux critères de succès s’ajoutent pour faciliter l’emploi de divers dispositifs d’entrées au-delà du clavier. Ces critères s’adressent surtout aux personnes ayant des limitations motrices, et concernent en grande partie les interactions sur écrans tactiles. Plusieurs de ces personnes emploient des mécanismes de pointage qui ne permettent pas des gestes comme glisser, déplacer, pincer, etc. Elles peuvent aussi éprouver des difficultés à sélectionner des éléments interactifs dont la taille de la cible est trop restreinte, que ce soit avec la souris, un doigt ou un autre dispositif de pointage.

Les WCAG 2.2 amènent deux nouveaux critères sur les modalités d’interaction. Le premier s’ajoute aux paramètres existants qui établissent la taille minimale de la cible des éléments interactifs. Le second concerne les fonctionnalités de type glisser-déposer et potentiomètre. Il vise des clientèles avec des limitations motrices et visuelles qui ne peuvent employer la souris ou les gestes tactiles de glisser-déposer pour ces interactions.

Ces mises à niveaux étaient devenues nécessaires considérant l’évolution des technologies et des usages.

Les règles qui s’appliquent aux modalités d’interaction

Niveau A

2.5.1 Gestes pour le contrôle du pointeur (niveau A) : Toutes les fonctionnalités qui utilisent des gestes multipoints ou basés sur un tracé peuvent être utilisées avec un pointage à contact unique sans geste basé sur un tracé, à moins qu’un geste multipoint ou basé sur un tracé ne soit essentiel.

NOTE : Cette exigence s’applique aux contenus Web qui interprètent les actions du pointeur (elle ne s’applique donc pas aux actions nécessaires à l’utilisation d’un agent utilisateur ou d’une technologie d’assistance).

2.5.2 Annulation de l’action du pointeur (niveau A) : Pour une fonctionnalité qui peut être activée avec un dispositif de pointage à contact unique, au moins une des conditions suivantes est vraie :

  • Aucun événement descendant (down-event) : l’événement descendant du pointeur n’est pas utilisé pour exécuter une partie ou la totalité de la fonction ;
  • Abandon ou annulation : l’achèvement de la fonction se fait sur l’événement ascendant (up-event), et un mécanisme est disponible pour interrompre la fonction avant l’achèvement ou pour annuler la fonction après l’achèvement ;
  • Inversion sur l’événement ascendant (up-event) : l’événement ascendant inverse tout résultat de l’événement descendant précédent ;
  • Essentiel : l’achèvement de la fonction lors de l’événement descendant est essentiel.

NOTE : Les fonctions qui émulent l’appui d’une touche du clavier ou du pavé numérique sont considérées comme essentielles.

NOTE : Cette exigence s’applique aux contenus Web qui interprètent les actions du pointeur (elle ne s’applique donc pas aux actions nécessaires à l’utilisation d’un agent utilisateur ou d’une technologie d’assistance).

2.5.3 Étiquette dans le nom (niveau A) : Pour les composants d’interface utilisateur dont les étiquettes contiennent du texte ou du texte sous forme d’image, le nom contient le texte qui est présenté visuellement.

NOTE : Une bonne pratique consiste à placer le texte de l’étiquette au début du nom.

2.5.4 Activation par le mouvement (niveau A) : Les fonctionnalités qui peuvent être activées par un mouvement de l’appareil ou un mouvement de l’utilisateur peuvent également être activées par des composants d’interface utilisateur et la réponse au mouvement peut être désactivée pour éviter une activation accidentelle, sauf dans les cas suivants :

  • Interface compatible : le mouvement est utilisé pour activer la fonctionnalité par l’intermédiaire d’une interface compatible avec l’accessibilité ;
  • Essentiel : le mouvement est essentiel à la fonction et le désactiver invaliderait l’activité.

2.5.7 Dragging Movements (level AA)

[Version française non officielle] 2.5.7 Mouvements de glissement (Niveau AA) : Toutes les fonctionnalités qui utilisent un mouvement de glissement pour être opérée peuvent être activée par un seul pointeur sans glissement, à moins que le glissement ne soit essentiel ou que la fonctionnalité ne soit déterminée par l’agent utilisateur et non modifiée par l’auteur.

NOTE : Cette exigence s’applique au contenu Web qui interprète les actions de pointeur (c’est-à-dire que cela ne s’applique pas aux actions qui sont nécessaires pour faire fonctionner l’agent utilisateur ou la technologie d’assistance).

2.5.8 Target Size (Minimum) (Level AA)

[Version française non officielle] 2.5.8 Taille de la cible (minimum) (Niveau AA) : La taille de la cible pour les pointeurs d’entrée est d’au moins 24 par 24 pixels CSS, sauf lorsque :

  • Espacement : Les cibles sous-dimensionnées (celles de moins de 24 pixels CSS par 24) sont positionnées de sorte que si un cercle de 24 pixels de diamètre CSS est centré sur le périmètre de délimitation de chacune, les cercles ne croisent pas une autre cible ou le cercle pour une autre cible sous-dimensionnée ;
  • Équivalente : La fonction peut être obtenue grâce à un contrôle différent sur la même page qui répond à ce critère ;
  • En ligne : La cible est dans une phrase ou sa taille est autrement limitée par la hauteur de ligne du texte non ciblé ;
  • Contrôlée par l’agent utilisateur : La taille de la cible est déterminée par l’agent utilisateur et n’est pas modifiée par l’auteur ;
  • Essentielle : Une présentation spécifique de la cible est essentielle ou est légalement requise pour transmettre l’information.

NOTE 1 : Les cibles qui permettent de sélectionner des valeurs spatialement en fonction de la position au sein de la cible sont considérées comme une seule cible aux fins du critère de réussite. Les exemples comprennent les curseurs, les sélecteurs de couleurs affichant un dégradé de couleurs ou les zones modifiables où vous positionnez le curseur.

NOTE 2 : Pour les cibles en ligne, la hauteur de ligne doit être interprétée comme perpendiculaire au flux de texte. Par exemple, dans un langage affiché verticalement, la hauteur de la ligne serait horizontale.

Niveau AAA

2.5.5 Taille de la cible (niveau AAA) : La taille de la cible pour les pointeurs d’entrée est d’au moins 44 par 44 pixels CSS, sauf quand :

  • Équivalente : la cible est disponible depuis un lien ou un contrôle équivalent sur la même page qui mesure au moins 44 par 44 pixels CSS ;
  • En ligne : la cible se trouve dans une phrase ou un bloc de texte ;
  • Contrôlée par l’agent utilisateur : la taille de la cible est déterminée par l’agent utilisateur et n’est pas modifiée par l’auteur ;
  • Essentielle : une présentation spécifique de la cible est essentielle pour transmettre l’information.

2.5.6 Modalités d’entrées concurrentes (niveau AAA) : Le contenu Web ne restreint pas l’utilisation des modalités d’entrée disponibles sur une plateforme, sauf si la restriction est essentielle, nécessaire pour garantir la sécurité du contenu ou nécessaire pour respecter les paramètres de l’utilisateur.

Voir aussi :

La solution

  1. Pour les interfaces Web qui utilisent des gestes multipoints ou basés sur un tracé : il faut prévoir une façon de réaliser la même opération avec un seul pointeur, en cliquant, maintenant ou double-cliquant.
    • Exemple : un site Web présente une vue de carte, avec la prise en charge du geste de pincement pour zoomer sur le contenu de la carte et du geste de glissement pour déplacer la zone visible. Pour répondre au critère, l’interface offre aussi la fonction de zoom avant et arrière depuis des boutons [+] et [-], et permet un déplacement panoramique dans toutes les directions à l’aide de boutons fléchés.
  2. Un autre critère concerne les fonctionnalités activables à l’aide d’un dispositif de pointage qui réagit à une seule pression ou à une pression longue. Ce peut être un doigt, un curseur de souris, un stylet ou une baguette buccale, etc. Il faut prévoir une façon d’annuler l’activation non désirée d’une cible (spasme involontaire, geste imprécis, etc.). Diverses approches sont possibles pour répondre au critère :
    • Aucun événement descendant : L’événement se déclenche seulement lorsque le pointeur est relâché à l’intérieur de cet élément (up event). Exemple : l’événement déclenché par un bouton se produit seulement lorsqu’on lève le doigt à l’intérieur de ce bouton.
    • Abandon ou annulation : Une fonctionnalité est achevée au moyen d’un événement ascendant (up event), et un mécanisme permet d’abandonner ou d’annuler cette fonctionnalité avant ou après l’achèvement. Exemple : une fonctionnalité de glisser-déposer permet le tri de cartes empilées verticalement. L’utilisateur saisit une carte avec le pointeur (down event) et la déplace pour l’insérer au nouvel emplacement, lorsque le pointeur est relâché (up event). Le relâchement du pointeur en dehors de la zone de destination annule l’action : il ramène la carte à l’ancienne position avant l’interaction.
    • Inversion sur l’événement ascendant (up event) : Cette approche est similaire à l’exemple précédent. Cependant, elle ne vise pas tant à annuler une action, mais à inverser le résultat de l’événement descendant qui précède (down event). Cela concerne entre autres les actions de type presser et maintenir (press-and-hold). Exemple : un comportement se produit tant et aussi longtemps que le pointeur de la souris reste enfoncé sur un bouton, mais il cesse dès que le bouton est relâché.
  3. Le W3C a défini la façon de calculer le « nom accessible » (accessible name) de chaque objet. Pour un élément interactif (bouton, champ de formulaire, etc.), il est nécessaire que tout le texte de l’étiquette visible à l’écran soit repris dans le nom accessible de l’élément, idéalement au début de ce nom. Cela permet à une personne naviguant avec la reconnaissance vocale d’activer facilement l’élément interactif, en nommant l’étiquette telle qu’elle la voit à l’écran. D’autres clientèles peuvent aussi en bénéficier, comme des personnes malvoyantes ou avec des limitations cognitives qui utilisent la synthèse vocale. Cela permet de faire coincider ce qu’elles voient à l’écran avec ce que la synthèse vocale lit à partir du « nom accessible ». Une vigilance particulière s’impose lorsque les concepteurs utilisent des techniques avancées permettant de redéfinir le nom accessible d’un élément, afin que ce nom redéfini respecte le critère.
    • Exemple : le nom accessible d’un bouton « Acheter maintenant » commence par le même texte que l’étiquette visible. Cela permet de l’activer aisément avec une commande vocale, en plus d’assurer une cohérence entre le libellé visible et son rendu par synthèse vocale.
  4. Certaines interfaces Web permettent l’activation de fonctionnalités par des mouvements comme secouer ou incliner, que beaucoup de personnes ayant une limitation motrice ne peuvent effectuer. Il faut donc fournir un autre mécanisme permettant d’activer ces fonctionnalités.
    • Exemple 1 : une fois que le texte est saisi dans un champ, le fait de secouer un périphérique affiche une boîte de dialogue permettant aux utilisateurs d’annuler l’entrée. Mais, un bouton d’annulation à côté du champ de texte offre la même fonctionnalité;
    • Exemple 2 : l’utilisateur peut incliner un périphérique pour passer à la page suivante ou précédente, mais des boutons ou des liens sont également fournis pour effectuer la même opération.
  5. La taille de la cible prévue pour l’activation d’un élément d’interface doit être suffisamment grande pour que toute personne ayant un problème de dextérité, même léger, puisse l’utiliser. Concernant la taille de la cible, le nouveau critère 2.5.8 (WCAG 2.2) vient fixer au niveau AA une taille minimale de 24 pixels CSS. En comparaison, le critère 2.5.5, présent depuis WCAG 2.1, exige au niveau AAA une taille minimale plus grande de 44 pixels CSS. Il convient de consulter les diverses exceptions de ces deux critères, notamment pour l’espacement entre les cibles de taille inférieure à 24 pixels CSS, dans le cas du critère 2.5.8.
  6. Un autre critère de succès porte sur l’importance de ne pas restreindre les modalités d’interaction prévues par la plateforme, afin d’offrir des solutions de rechange aux actions difficiles ou impossibles à réaliser pour certaines personnes ayant des limitations motrices.
    • Exemple : un utilisateur à mobilité réduite associe une souris et un clavier à son téléphone portable avec un écran tactile. Le téléphone peut ensuite être utilisé par ces périphériques d’entrée, ce qui fait que l’écran tactile n’est pas le seul mécanisme d’interaction accepté.
  7. Certaines personnes ayant des limitations motrices, ainsi que les personnes aveugles, ne sont pas en mesure d’employer la souris pour interagir avec des fonctionnalités de type glisser-déposer ou potentiomètres. Des difficultés similaires peuvent survenir avec les gestes de glisser-déposer sur les écrans tactiles. Les WCAG 2.2 demandent d’offrir un équivalent au glisser-déposer, par le simple emploi de clics ou de tapes avec un pointeur unique.
    • Exemple 1 : pour un potentiomètre, un champ d’édition pourrait servir à déterminer la valeur choisie.
    • Exemple 2 : pour une fonction de glisser-déposer, on pourrait offrir un mécanisme permettant de choisir le point de départ et, par la suite, le point d’arrivée. Cela est possible, par exemple, avec deux champs de liste déroulante ou un composant de même type qui soit accessible : la première liste comprendrait les éléments pouvant être déplacés et la seconde liste, les points de destination.

À propos

Organisé par le Regroupement des aveugles et amblyopes du Montréal métropolitain (RAAMM), ce projet veut promouvoir l’accès universel à l’information sous toutes ses formes.

Courriel : [email protected]

Téléphone : 514 277-4401, poste 122

RAAMM: Regroupement des aveugles et amblyopes du Montréal métropolitain.

www.raamm.org

Courriel : [email protected]

5225, rue Berri, bureau 101
Montréal (Québec) H2J 2S4