Rendez votre contenu accessible au moyen d'un clavier
Si vos éléments ne peuvent pas être utilisés avec un clavier, les utilisateurs de la navigation alternative et des technologies d'assistance ne seront pas en mesure d'interagir avec votre contenu. Si vous vous contentez d'utiliser des commandes HTML, telles que des éléments de saisie et des liens, ces éléments seront accessibles par défaut via le clavier, sauf si vous modifiez intentionnellement leur comportement habituel. En revanche, si vous utilisez des composants personnalisés, vous devrez faire des efforts supplémentaires pour les rendre utilisables en ajoutant des attributs tabindex et en contrôlant leur comportement avec JavaScript.
Le focus doit généralement se déplacer de gauche à droite, du haut de la page vers le bas. Si l'ordre du code correspond à l'ordre visuel du contenu et si vous n'interrompez pas intentionnellement l'ordre du focus, c'est ce qui se produira par défaut. Toutefois, vous devez être attentif à certaines situations.
Lorsque des sections de contenu sont développées pour afficher des informations supplémentaires (par exemple, sections de FAQ développables), le focus doit se déplacer sur le contenu développé en tant qu'élément de focus suivant, avant de passer au prochain élément de bascule permettant de le réduire.
Si des informations sont ajoutées à la page de manière dynamique, par exemple lorsqu'une réponse à une question donnée dans un formulaire affiche une question de suivi supplémentaire, le contenu peut être affiché ensuite sous une forme visuelle, mais être ajouté à la fin du contenu dans l'ordre du code. Il est préférable de l'ajouter à l'ordre du code à l'endroit où il apparaît sous une forme visuelle. Lorsque cela n'est pas possible, vous devez modifier l'ordre du focus manuellement dans la section.
Lorsqu'une boîte de dialogue s'ouvre, le focus doit passer dans le mode requis et y demeurer jusqu'à ce que l'utilisateur ferme la fenêtre. Lorsque cette technique n'est pas appliquée, le focus demeure sur le contenu d'arrière-plan qui peut ne pas être visible, et les utilisateurs doivent naviguer dans tous les éléments interactifs de l'arrière-plan avec la touche Tab avant d'atteindre la boîte de dialogue.
Une derrière chose essentielle à garder à l'esprit : vous devez montrer aux utilisateurs sur quel élément le focus est placé. Les navigateurs disposent de leur propre indicateur. Tant que l'indicateur de focus n'est pas désactivé dans votre feuille CSS, les navigateurs mettent en évidence les éléments sur lesquels le focus est placé. Si vous désactivez l'indicateur par défaut pour des raisons esthétiques, remplacez-le par un indicateur personnalisé plus en phase avec votre design visuel. Un indicateur personnalisé est également bénéfique, car les indicateurs par défaut de certains navigateurs, tels que celui utilisé par Chrome, ne satisfont pas aux exigences de contraste et peuvent être difficiles à voir pour certains utilisateurs.
Fournissez des solutions alternatives aux indications d'interaction visuelle
La fourniture de solutions alternatives au contenu visuel, tel que les images et les vidéos, est un concept plutôt intuitif. Toutefois, nous n'avez pas forcément conscience de la quantité d'informations que nous collectons à partir de la représentation visuelle. Par exemple, prenons une liste d'éléments et traçons une ligne la traversant.
Que voyez-vous sur cette image ? En particulier les mots Muffins, Cookies, Gâteaux, Scones.
Vous avez probablement identifié une liste d'onglets. Vous savez que du contenu est associé à chaque élément de la liste, et que le fait de cliquer sur un autre élément va afficher les informations relatives à cet élément « au premier plan » et renvoyer les autres informations « à l'arrière-plan ». Il s'agit d'un modèle mental que vous avez élaboré à partir de quelques indications visuelles. Or, concrètement, il s'agit juste d'une représentation abstraite. Pour que les personnes qui ne peuvent pas voir ces indications visuelles puissent comprendre les relations entre les éléments de contenu, ces relations doivent être communiquées de manière sémantique. Dans de nombreux cas, vous pouvez le faire en utilisant du code HTML sémantique adéquat, mais dans d'autres, vous devez faire appel à ARIA.
Comprenez les capacités et l'importance d'ARIA
Au tout début du HTML, la fonction de tout le contenu pouvait être clairement établie à partir des éléments utilisés. Les titres étaient identifiés par des balises h, les tables par des éléments de table, les boutons par des éléments de saisie, etc. Le rôle et le comportement des éléments HTML sont intégrés dans le balisage, et les technologies d'assistance telles que les lecteurs d'écran peuvent extraire ces informations et les communiquer aux utilisateurs.
Par exemple, supposons que vous disposiez d'un bouton « Télécharger » en HTML. Le lecteur d'écran peut identifier le nom de la commande, la balise <input> et le type de bouton, puis les communiquer aux utilisateurs non voyants. Il lit alors quelque chose comme « bouton Télécharger ».
En réponse aux évolutions technologiques et à la complexité croissante des fonctions, de nombreux sites et applications bureautiques ont commencé à utiliser des balises sans signification inhérente, telles que les éléments <div> et <span>, à organiser leur style avec des feuilles CSS et à contrôler leur comportement via JavaScript. Cela offre davantage de souplesse en termes d'apparence et de comportement des éléments, mais ces éléments n'ont pas de rôle ni de fonction spécifique.
Pour revenir à notre exemple de bouton Télécharger, si, au lieu d'utiliser un élément de saisie HTML, nous créons un bouton personnalisé utilisant une balise div, les technologies d'assistance ne disposent pas d'informations pertinentes pour le détecter et le communiquer à l'utilisateur. Tout ce qu'il peut lire, c'est « Télécharger ». Et c'est là qu'ARIA vient à votre secours.
ARIA vous permet de créer des composants personnalisés dont l'apparence et le comportement sont conformes à vos souhaits, puis d'identifier leur fonction et leur état.
Toutefois, ARIA a d'autres cordes à son arc ! Certains composants et interactions n'ont pas d'éléments sémantiques HTML correspondants. C'est notamment le cas des onglets tels que ceux que nous avons vu dans l'exemple ci-dessus, ainsi que des boutons de bascule Afficher/Masquer, des zones de liste déroulante dans lesquelles les utilisateurs peuvent saisir du texte dans une zone qui présente une liste de suggestions de manière dynamique, ou encore d'autres interactions. ARIA dispose de rôles, d'états et de propriétés spéciaux qui permettent aux technologies d'assistance de communiquer l'interaction de manière accessible. Sans ARIA, cela ne serait pas possible.
ARIA peut également identifier les différentes zones d'une page. Désormais, nous disposons de balises HTML telles que <nav>, <main> et <footer>, mais celles-ci sont apparues avec le balisage ARIA et ont ensuite été adoptées dans HTML5. Nous reviendrons plus en détail sur ces zones de repère dans le prochain chapitre.
Veillez à la cohérence de vos interfaces
Dans les chapitres précédents, nous avons discuté de l'importance de la prévisibilité pour l'intelligibilité. Or, la cohérence est essentielle pour créer des interactions prévisibles. Au minimum, cela implique d'utiliser des éléments de navigation apparaissant dans le même ordre relatif sur toutes les pages, et de nommer ces éléments de manière cohérente lorsqu'ils exécutent la même fonction. Par conséquent, si vous utilisez un bouton « Retour », ne le nommez pas « Retour » dans une instance et « Précédent » dans une autre.
Je vous encourage à aller plus loin dans la cohérence que les exigences très basiques des règles WCAG, car toute incohérence dans la navigation ou le comportement des éléments peut être préjudiciable. Même si des éléments portent le même nom, des modèles ou des comportements qui ne sont pas appliqués de manière fiable peuvent dérouter les utilisateurs. Et même si la navigation semble respecter le même ordre, mais que certaines fonctions ne sont pas disponibles de manière cohérente sur toutes les pages du site, les utilisateurs peuvent être déroutés.
Par exemple, si vous avez plusieurs instances de contenu de type onglet, même si elles sont différentes sur le plan visuel, elles fonctionnent de la même manière en matière d'interaction avec le clavier. Si vous pouvez naviguer entre certains onglets à l'aide de la touche Tab et entre d'autres à l'aide des touches fléchées, cela va à l'encontre des attentes des utilisateurs en matière d'interaction avec ces éléments.
Si votre navigation contient certaines fonctionnalités sur certaines pages, mais pas sur d'autres, par exemple un menu de profil ou un logo qui dirige les utilisateurs vers la page d'accueil, cela peut être très déroutant, même si les éléments disponibles sont présentés dans le même ordre relatif.
Exercice : concevez une maquette de page d'accueil
En vous appuyant sur ce que vous avez appris dans ce chapitre, créez une maquette de page d'accueil. Vous travaillerez avec cette maquette dans le chapitre suivant. Elle ne doit pas nécessairement être très fidèle au résultat attendu. Vous pouvez même créer une vague esquisse avec un crayon et du papier. Sinon, vous pouvez utiliser un outil tel que Figma pour créer une maquette un peu plus élaborée.
Pour commencer, revenez au guide de style du chapitre 1 de la partie 3, et ajoutez des styles de hover et de focus à votre design. Si vous incluez d'autres éléments tels que des boutons, pensez à communiquer les états et les autres informations, sans utiliser exclusivement la couleur.
Si vous avez des interactions complexes, telles que des menus déroulants, des onglets ou des zones rétractables, prenez-en note pour le moment. Nous y reviendrons dans le prochain chapitre.
En résumé
Assurez-vous que le contenu prenne en charge l'interaction via le clavier en rendant tous les éléments utilisables via le clavier, en indiquant le focus et en respectant un ordre de focus logique.
Souvenez-vous que de nombreuses informations concernant les interactions sont communiquées visuellement, et prenez en charge les indications d'interaction visuelle par programmation grâce à l'utilisation du HTML sémantique et d'ARIA.
Veillez à la cohérence de la navigation dans le site et des éléments en termes de noms, de comportement et de présentation.
Vous êtes prêt à appliquer tout cela ? Dans la dernière partie de ce cours, vous allez apprendre à annoter vos maquettes à l'aide d'informations que les développeurs pourront utiliser pour concevoir un contenu web accessible à partir de vos designs visuels.
