Accessibilité et rubriques : conception pour les utilisateurs malvoyants

Publié: 2021-07-19

Un petit détail tel que la façon dont vous utilisez les en-têtes sur votre site Web ou votre application peut vous coûter des prospects ou des ventes. Lisez la suite pour découvrir pourquoi votre site Web doit être accessible, ce qui pourrait arriver s'il ne l'est pas et quelques bonnes pratiques sur la façon d'utiliser les titres pour guider correctement les utilisateurs à travers une page.

Le cas de l'accessibilité

Les titres peuvent être facilement négligés lors de la conception d'un nouveau site Web ou de la mise à jour de l'ancien. Les spécialistes du marketing ont tendance à se concentrer davantage sur le côté esthétique du design et moins sur le côté pratique. Il est vrai que les éléments visuels jouent un rôle important dans l'expérience utilisateur (UX) d'un site Web, mais le rendre plus accessible aux utilisateurs malvoyants peut augmenter le nombre de visiteurs qui se convertissent.

Les statistiques renforcent nos arguments en faveur de l'accessibilité :

environ 253 millions de personnes dans le monde souffrent de déficience visuelle
chaque jour 250 personnes commencent à perdre la vue au Royaume-Uni
plus de 2 millions de personnes au Royaume-Uni vivent avec une perte de vue qui a un impact significatif sur leur vie quotidienne, par exemple l'incapacité de conduire
La dégénérescence liée à l'âge est la principale cause de cécité chez l'adulte.

homme aveugle utilisant un téléphone

Avec 4,1 millions de personnes qui devraient être touchées par la perte de la vue au Royaume-Uni d'ici 2050 , les entreprises ne peuvent pas se permettre de ne pas adapter leurs sites Web à tous les publics. Ceci est particulièrement important si leur marché cible est une population plus âgée, qui est plus susceptible d'avoir des problèmes de vue.

Un aspect simple comme l'utilisation correcte des titres peut faire une énorme différence et ce n'est pas difficile à appliquer. Cela pourrait également vous faire économiser les frais de poursuites judiciaires.

Le cas de Domino

Domino's Pizza est un bon exemple de la façon dont négliger l'accessibilité pour les utilisateurs malvoyants peut être coûteux.

Un client américain aveugle a déposé une plainte en 2016 après avoir eu du mal à choisir les garnitures, à utiliser un code de réduction et même à terminer sa commande sur l'application iPhone du restaurant. Le problème était que l'application ne s'intégrait pas au logiciel de lecture d'écran du téléphone, qui vocalise le contenu en fonction du texte utilisé correctement et des images étiquetées avec du texte. L'application et le site Web de l'entreprise ne disposaient pas du code correct pour permettre à l'iPhone de lire les options.

recherche vocale d'accessibilité

Alors que les juges se sont initialement rangés du côté de Domino's, la cour d'appel a statué en faveur du client la semaine dernière au motif que « l'inaccessibilité présumée du site Web et de l'application Domino's empêche l'accès aux biens et services de ses franchises de pizzas physiques - qui sont des lieux de logement ».

Au Royaume-Uni, le Royal National Institute of Blind People a également salué la décision en commentant pour le BCC : « Toutes les organisations ont la responsabilité, en vertu de la loi sur l'égalité de 2010, de garantir que leurs sites Web et applications peuvent être utilisés par des personnes aveugles et malvoyantes, y qui utilisent des lecteurs d'écran ».

Les entreprises peuvent rendre leurs sites Web plus accessibles de différentes manières et l'utilisation correcte des balises d'en-tête aide grandement un utilisateur à naviguer sur une page.

Bonnes pratiques des titres pour l'accessibilité

Il y a pas mal de confusion et d'utilisation abusive des en-têtes, en partie à cause du fait que les développeurs suivent une conception de trop près ou que les concepteurs ne connaissent pas la bonne façon d'utiliser les en-têtes.

Si vous n'êtes pas sûr de ce qu'est un titre, le W3C a une bonne définition et Yoast explique son utilisation du référencement.

Le W3C définit l'utilisation correcte comme :

« Les six éléments de titre, H1 à H6, désignent des titres de section. Bien que l'ordre et l'occurrence des titres ne soient pas limités par la DTD HTML, les documents ne doivent pas sauter de niveaux (par exemple, de H1 à H3), car la conversion de tels documents en d'autres représentations est souvent problématique.

Non seulement l'utilisation correcte des titres a un impact sur la façon dont les gens et Google lisent votre page, mais elle a également un impact énorme sur la façon dont les lecteurs d'écran présentent votre contenu à l'utilisateur. Les personnes utilisant des outils d'accessibilité peuvent naviguer dans la page via vos en-têtes, donc si vous avez quelque chose d'important à dire, il doit être structurellement et visuellement présenté comme vous l'aviez prévu.

Aucun travail supplémentaire n'est nécessaire pour rendre les en-têtes accessibles lorsque vous créez votre page. Si vous suivez l'utilisation correcte, les critères d'accessibilité seront remplis. Les conseils d'accessibilité du W3c pour les en-têtes expliquent cela assez bien, et comme vous pouvez le voir, cela a non seulement du sens pour l'accessibilité, mais aussi structurellement et visuellement.

Comment vérifier les en-têtes ?

Si vos développeurs ou votre thème suivent l'utilisation correcte des en-têtes, vous devriez pouvoir simplement ajouter votre contenu et ajouter votre en-tête de la bonne manière via votre éditeur/CMS.

En passant, vous n'avez pas besoin d'ajouter des titres partout, un simple H1 (qui est généralement le titre de la page) suivi d'un H2 suffirait - mais disons que vous voulez structurer correctement une page particulièrement longue ou que vous vérifiez celui de quelqu'un d'autre travail? Essayez d'utiliser l'un de ces plugins pour votre navigateur préféré :

Carte des titres pour Chrome
Carte des titres pour Firefox

Une fois installés, ils sont très faciles à utiliser et tout en-tête incorrect apparaît surligné en rouge dans la barre latérale lorsque vous cliquez sur le bouton du plugin. Cette fonctionnalité sera également une option par défaut dans l'éditeur Gutenberg dans la version WordPress 5.0 et est expliquée sur ce site.