Conception pour l’accessibilité
L’accessibilité est un sujet relativement vaste. Nous ne pouvons pas le couvrir entièrement dans un seul module d’apprentissage. Toutefois, il existe quelques principes fondamentaux que vous souhaiterez implémenter dans chaque page que vous créez. La conception d’une page accessible dès le départ est toujours plus facile que de revenir à une page existante pour la rendre accessible.
Utilisez HTML comme il a été conçu
HTML fournit de nombreux éléments que vous pouvez utiliser pour créer une page, y compris des boutons, des liens et des contrôles de formulaire. Chacun de ces éléments possède un ensemble de fonctionnalités intégrées, comme le fait de pouvoir recevoir un clic, pointer vers un lien accepter d’être focal.
Remarque
Un élément focal en développement web signifie qu’un contrôle peut accepter l’entrée d’un clavier. Un bouton peut être focal, ce qui permet à une personne de l’activer ou de « cliquer » dessus avec la barre d’espace.
Avec CSS et JavaScript, il est possible de faire en sorte qu’un élément ressemble à n’importe quel type de contrôle. Par exemple, vous pouvez utiliser <span> pour créer un élément <button>, et <b> peut devenir <a>. Bien que cette capacité offre des raccourcis pour la mise en forme ou la disposition de votre page, elle élimine des fonctionnalités intégrées. Des outils comme un lecteur d’écran ne pourront pas comprendre que <span> est utilisé comme <a>. Une personne qui navigue avec un clavier ne peut pas utiliser un élément <div> qui a été programmé pour simuler un élément <button>.
Les en-têtes sont un autre élément HTML souvent ignoré (<h1> à <h6>). D’un point de vue visuel, les balises d’en-tête commencent de la plus grande à la plus petite taille de texte. Cette convention amène de nombreux développeurs à renoncer aux éléments d’en-tête et à styliser <div> ou d’autres éléments génériques à la place.
Malheureusement, les éléments génériques stylisés transmettent uniquement des informations visuelles plutôt que structurelles. Les utilisateurs de lecteurs d’écran s’appuient fortement sur les en-têtes pour trouver des informations et parcourir une page. L’écriture de contenu descriptif et l’utilisation de balises d’en-tête sémantiques sont importantes pour la création d’un site facilement navigable pour les utilisateurs de lecteurs d’écran.
En guise de meilleure pratique, vous devez toujours utiliser le code HTML approprié lors de la création de contrôles sur une page. Si vous souhaitez un lien hypertexte, utilisez <a> ou <button> pour un bouton.
Utiliser les bons signaux visuels
Les développeurs considèrent souvent les lecteurs d’écran comme le seul outil d’accessibilité. Toutefois, les utilisateurs peuvent utiliser de nombreux autres outils, ou ils peuvent ne pas utiliser d’outils du tout. Les utilisateurs qui utilisent un navigateur s’appuient sur certains signaux visuels pour comprendre comment interagir avec votre page.
L’une des fonctionnalités les plus intéressantes de CSS est qu’il fournit un contrôle total sur l’affichage d’une page, notamment la suppression de certains éléments d’affichage. Par exemple, vous pouvez supprimer le contour d’une zone de texte ou le soulignement d’un lien hypertexte. Malheureusement, la suppression de ces types de signaux peut compliquer la recherche d’une personne qui en dépend pour reconnaître le type de contrôle.
Envisager le clavier
Certains utilisateurs ne peuvent pas utiliser de souris ou de pavé tactile. Au lieu de cela, ces utilisateurs s’appuient sur les interactions du clavier pour passer d’un élément à l’autre. Il est important que vos pages présentent votre contenu dans l’ordre logique pour qu’un utilisateur de clavier puisse accéder à chaque élément interactif à mesure qu’il descend.
Lorsqu’un utilisateur parcourt une page par tabulation, l’attention se déplace d’un contrôle à l’autre en fonction de l’ordre dans lequel ceux-ci sont répertoriés dans la source HTML. Les contrôles de votre page doivent être répertoriés dans la source HTML dans l’ordre dans lequel vous vous attendez à ce que la page soit explorée, tout en vous appuyant sur CSS pour présenter la page visuellement aux utilisateurs.
Par exemple, imaginez que vous créez un formulaire avec deux colonnes. Vous devez prendre en compte ce qui est le flux naturel pour un utilisateur remplissant le formulaire, puis répertorier les contrôles dans cet ordre. Vous pouvez ensuite utiliser CSS pour créer les colonnes et afficher les contrôles à leurs emplacements appropriés.
La navigation au clavier s’appuie fortement sur le code HTML sémantique. Certains contrôles (comme les boutons) acceptent la focalisation, alors que les éléments div non. Si vous recréez des contrôles qui existent déjà en HTML, il est plus difficile pour une personne d’utiliser votre page avec un clavier.
Important
La navigation au clavier doit être testée manuellement, et vous devez le faire sur chaque page que vous créez. WebAIM contient des informations supplémentaires sur les stratégies de navigation au clavier.