En rendant votre site Web accessible aux personnes handicapées, vous finissez par rendre accessible à tous. En fait, rendre votre site Web plus accessible peut même aider les gens à trouver votre site dans les moteurs de recherche. Pourquoi? Parce que les moteurs de recherche utilisent les mêmes signaux que les lecteurs d'écran pour trouver et comprendre le contenu de votre site Web.
Mais comment créer un site Web accessible sans devenir un expert en codage?
Voici quelques conseils et astuces que presque toutes les personnes possédant des connaissances de base en HTML peuvent utiliser pour améliorer l'accessibilité de leur site Web.
Outils d'accessibilité Web
Le W3C dispose d'une liste fantastique d'outils d'accessibilité Web que vous pouvez utiliser en tant que vérificateur pour détecter les problèmes potentiels de votre site Web. Cela dit, je recommande quand même de faire de l’exploration avec un lecteur d’écran et de l’expérimenter par vous-même.
Comprendre les lecteurs d'écran
L’un des moyens les plus importants d’améliorer l’accessibilité de votre site Web est de s’assurer qu’il peut être compris des lecteurs d’écran. Les lecteurs d'écran utilisent une voix synthétisée pour lire le texte à l'écran. Cela semble assez simple; Cependant, les lecteurs d'écran ou autres technologies d'assistance risquent de ne pas comprendre votre site Web de la manière dont vous l'avez configuré.
La première chose à faire est d’essayer un lecteur d’écran et de voir comment cela se passe. Si vous utilisez un Mac, essayez d’utiliser VoiceOver.
- Aller à Préférences de système.
- Sélectionner Accessibilité.
- Sélectionner Voix off.
- Cochez la case pour activer VoiceOver.
Vous pouvez l'activer ou le désactiver à l'aide de la commande F5.
Si vous utilisez une machine Windows, vous pouvez télécharger NVDA. Vous pouvez le configurer pour l'activer ou le désactiver avec le raccourci clavier contrôle + alt + n.
Les deux lecteurs d’écran fonctionnent en laissant l’utilisateur naviguer à l’aide du clavier (c’est logique - si vous ne pouvez pas voir, utiliser une souris serait un défi) et en créant une zone de mise au point pour la navigation. Le focus est essentiellement l'endroit où le clavier est "pointé", mais il est généralement affiché sous la forme d'une zone en surbrillance autour de l'objet sélectionné au lieu d'un curseur.
Vous pouvez modifier le ton de la voix et la vitesse de lecture de la voix si les paramètres par défaut sont gênants (ils le sont généralement après environ cinq minutes d'écoute d'une lecture vocale lente standard). Les personnes aveugles lisent généralement les sites Web avec leurs lecteurs d'écran réglés sur des vitesses élevées.
Il peut être utile de fermer les yeux pendant que vous faites cela, mais cela peut également aider de les garder ouverts et de les comparer. Lorsque vous essayez d'écouter votre site Web, vous remarquerez peut-être tout de suite que du texte est peut-être irrecevable. Les en-têtes et les tableaux peuvent être confus. Les images peuvent être ignorées ou elles peuvent dire "image" ou quelque chose d'aussi inutile. Les tableaux ont tendance à être lus comme une série d'éléments sans contexte.
Vous pouvez, espérons-le, résoudre ce problème.
Balises alt ou attribut alternatif
La balise alt ou l'attribut alternatif (alt) est utilisé en HTML pour décrire une image. En HTML, cela ressemble à ceci:
Même si vous créez votre site Web avec un outil visuel qui cache votre code HTML, vous aurez presque toujours une chance de saisir une description d'image. Vous ne pouvez rien entrer (alt = "") mais il serait préférable de donner à chaque image une description utile. Si vous étiez aveugle, que devriez-vous savoir à propos de l'image? "Femme" n'est pas très utile, mais peut-être que "Femme dessine un organigramme de conception incluant l'accessibilité, la convivialité, la stratégie de marque et le design".
Titre du texte
Les sites Web n'affichent pas toujours la balise de titre HTML, mais elle est utile pour les lecteurs d'écran. Assurez-vous que chacune des pages de votre site Web a un titre descriptif (mais pas trop détaillé) qui indique aux visiteurs en quoi consiste la page.
Donnez à votre site Web une bonne hiérarchie d'informations
Casser de gros morceaux de texte avec des en-têtes et, si possible, utiliser des en-têtes avec la hiérarchie H1, H2, H3 de manière appropriée. Cela rend non seulement votre site Web plus facile pour les lecteurs d'écran, mais également pour tous les autres. C'est également un excellent signal pour Google et les autres moteurs de recherche afin de les aider à mieux indexer votre site Web.
De même, vous devez vous assurer que votre site Web se trouve dans un ordre de contenu logique et que vous ne voyez pas de boîtes d’informations non liées. Si vous utilisez des annonces, veillez à ce que celles-ci ne soient pas trop intrusives et à la fragmentation trop fréquente du texte sur votre site Web.
Faire de meilleures tables
Si vous utilisez des tableaux HTML, vous pouvez ajouter des légendes à l’aide de la balise afin de faciliter leur compréhension par les lecteurs d’écran plutôt que de simplement rendre le titre d’un tableau en gras. Vous pouvez également ajouter l'élément "scope" et étiqueter clairement les nouvelles lignes et colonnes de votre tableau afin que les lecteurs d'écran ne provoquent pas simplement une série de cellules de tableau sans donner de contexte.
Navigation au clavier
En général, tout ce que vous mettez sur votre site Web devrait être quelque chose que quelqu'un pourrait éventuellement faire en utilisant un clavier uniquement. Cela signifie que vos boutons de navigation ne doivent pas être des boutons déroulants animés si vous ne pouvez pas les utiliser avec un lecteur d'écran (essayez-le et voyez si vous n'êtes pas sûr - certains boutons sont programmés pour être utilisés au clavier.)
Sous-titres
Si vous ajoutez des vidéos ou des éléments audio à votre site Web, ils doivent comporter des légendes. HTML5 et de nombreux services de streaming vidéo (tels que YouTube) offrent une prise en charge du sous-titrage. Les sous-titres codés sont utiles non seulement pour l'accessibilité, mais également pour les utilisateurs susceptibles de naviguer sur votre site Web là où ils ne peuvent pas lire de l'audio, comme dans un bureau ou dans un endroit bruyant.
Pour les podcasts ou autres éléments audio, envisagez de fournir une transcription textuelle. Non seulement est-il utile pour les personnes qui ne peuvent pas écouter l'audio, mais le texte facilitera l'indexation de ce contenu par Google et les autres moteurs de recherche, ainsi que par votre référencement Google.
ARIA
Si vous souhaitez atteindre le niveau d'accessibilité avancé, les spécifications HTML5 ARIA ou WAI-ARIA visent à devenir la nouvelle norme. Cependant, il s'agit d'un manuel technique complexe (et en constante évolution). Vous pouvez donc utiliser un validateur ARIA pour analyser si votre site Web présente des problèmes que vous pouvez résoudre. Mozilla propose également un guide plus accessible pour commencer à utiliser ARIA.
