Comment concevoir des mises en page de sites Web pour les lecteurs d'écran

Il est facile de penser à une mise en page comme étant une préoccupation principalement visuelle. L'en-tête va vers le haut, la barre latérale est ici, l'appel à l'action est une superposition au-dessus du contenu (je plaisante). Les grilles, les bordures, les espaces et les couleurs représentent tous des données visuelles précieuses, mais si ces indications sur la structure d'une page ne sont visibles que, certains utilisateurs peuvent juger votre contenu incompréhensible.

Vous pouvez faire l'expérience de cette première main si vous essayez d'utiliser un lecteur d'écran sur le Web. Lorsque j’ai lancé VoiceOver sur mon Mac et que j’en ai profité pour faire un essai, j’ai réalisé que, pour un utilisateur de lecteur d’écran, de nombreuses pages ne sont qu’un gros tas de «contenu», manquant ainsi de repères organisationnels utiles.

L’expérience peut ressembler à l’écoute d’une longue histoire décousue sans aucune indication des détails importants ou liés au fil conducteur de l’histoire. À mi-chemin de l’histoire, vous ne savez pas vraiment si cela vaut la peine de continuer à écouter, car vous ne savez même pas si vous trouverez ce que vous recherchez.

Dans le contexte d’un site Web, votre lecteur d’écran risque de vous lire une liste de 50 liens dans la barre latérale lorsque vous vous demandez s’il existe un contenu intéressant sur le site.

Des expériences comme celle-ci sont causées par des sites Web construits avec des dispositions uniquement visuelles. Idéalement, toutefois, nos dispositions visuelles devraient indiquer un modèle organisationnel sous-jacent de notre contenu. Ils doivent être des indicateurs visuels pour un modèle conceptuel. Les indicateurs visuels ne sont qu’un moyen de révéler ce modèle. Le projet ARIA (Applications Internet enrichi accessible) de la Web Accessibility Initiative fournit des indicateurs alternatifs aux utilisateurs qui pourraient en avoir besoin.

Je vais expliquer comment utiliser ces indicateurs pour rendre une simple page Web facile à utiliser, à naviguer et à lire pour les utilisateurs de technologies d’assistance. Tous les exemples de code sont disponibles sur GitHub.

Mise en page initiale

Voici un exemple de page avec une mise en page assez simple. Nous avons un en-tête en haut contenant un logo et une navigation, du contenu du corps, une barre latérale à droite avec une liste de messages liés et une liste de liens de partage de médias sociaux, un champ de recherche sous le contenu et un pied de page contenant les coordonnées de notre entreprise.

Capture d'écran de la mise en page initiale.
  • Prévisualiser la mise en page initiale
  • Voir le HTML

Visuellement, le contenu est assez bien divisé, utilisant une simple grille et des couleurs d'arrière-plan pour distinguer les différents éléments. Si vous lancez VoiceOver sur cette page, vous pouvez très bien naviguer à travers la page en utilisant la commande element suivante. L'ordre des éléments dans le balisage suit à peu près l'ordre visuel des éléments. Nous lisons d’abord l’en-tête, puis le corps du texte, puis la barre latérale, puis le champ de recherche, puis le pied de page. C'est plutôt bien. Si j'appuie sur CAPS + U pour afficher les menus de VoiceOver, je peux obtenir une liste de tous les en-têtes de la page et de tous les liens et y accéder directement.

VoiceOver affiche une liste de navigation de tous les en-têtes d'une page.VoiceOver affiche également une liste de navigation de tous les liens d’une page.

En utilisant simplement du code HTML bien structuré, un regroupement simple avec des éléments

et une bonne utilisation des balises de titre, nous avons une expérience décente. C’est mieux que les sites Web décousus que j’ai mentionnés ci-dessus, mais cela pourrait être encore mieux.

Ignorer le lien

  • Prévisualiser la mise en page du lien ignoré
  • Voir le HTML

Nous allons d’abord ajouter un lien sautant comme premier élément de la page. Un lien de saut est une fonctionnalité d’accessibilité très courante qui permet aux utilisateurs de passer au-delà des longues listes de liens et d’autres informations répétées sur chaque page Web, directement au contenu principal de la page en cours. C’est un lien qui constitue le premier élément de l’ordre des tabulations de la page.

Juste à l’intérieur de la balise de corps d’ouverture, ajoutons:

Nous souhaitons également masquer ce lien visuellement, mais le faire apparaître à l’écran quand il reçoit le focus. Pour masquer visuellement le lien, nous allons ajouter le CSS suivant:

.skip {
    clip: rect (1px, 1px, 1px, 1px);
    position: absolue! important;
    hauteur: 1px;
    largeur: 1px;
    débordement caché;
    Word Wrap: normal! important; / * De nombreuses combinaisons de lecteurs d'écran et de navigateurs annoncent les mots brisés tels qu'ils apparaissent visuellement. * /}
/ * Affiche le lien mis au point. * /
.skip: focus {
    couleur d'arrière-plan: #fff;
    border-radius: 3px;
    boîte-ombre: 0 0 2px 2px rgba (0, 0, 0, 0.6);
    clip: auto! important;
    couleur: # 888;
    bloc de visualisation;
    poids de police: gras;
    hauteur: auto; à gauche: 5px;
    hauteur de trait: normale;
    rembourrage: 15px 23px 14px;
    texte-décoration: aucun;
    en haut: 5px;
    largeur: auto;
    z-index: 100000;
}

L'emplacement du lien à ignorer doit être un identifiant pointant vers le contenu principal de la page. Dans notre cas, j'ai ajouté id = "main" à la section

et donné au lien de saut une url de href = "# main".

Si vous visitez la page de lien de saut et que vous appuyez sur la touche de tabulation, le lien devrait s'afficher. Si vous lancez VoiceOver et commencez à naviguer dans la page, le lien ignorer devrait être la première chose que vous rencontrez et cliquer dessus devrait inciter VoiceOver à commencer à lire le contenu principal de la page.

Techniques WCAG utilisées

Grâce à cette étape, nous avons permis aux utilisateurs de passer directement à la chair de notre page, mais au-delà d’un accès facile au contenu principal, ils n’ont toujours pas une bonne carte conceptuelle du reste de la page.

ARIA Rôles et Monuments

Une façon de fournir aux utilisateurs une carte conceptuelle de la page consiste à utiliser des éléments sémantique HTML5 tels que ,