Sites Web accessibles : toucher plus de monde sur le réseau

L’accessibilité sur Internet garantit que les utilisateurs ayant des restrictions et des besoins divers peuvent utiliser des sites Web accessibles sans restrictions et sans aide extérieure. L’objectif du design de sites Web accessibles est donc de prévenir l’exclusion de certains groupes de personnes sur le Web, par exemple les personnes handicapées physiques ou mentales. En outre, un site Web accessible correspond aux directives de l’UE et à la loi française. Il existe enfin un facteur non négligeable pour les entreprises : les sites Web accessibles atteignent une plus large clientèle parce qu’ils sont accessibles à un plus grand nombre de personnes que les autres sites. De plus, vous pouvez améliorer votre classement dans les moteurs de recherche grâce à la conception de sites Web accessibles.

En général, les obstacles nous empêchent de progresser, et rendent la participation difficile. Sur le Web, les obstacles sont souvent mis en place sans le savoir. En parallèle à la législation spécifique récemment mise en place à travers l’Europe, il existe également de plus en plus de formations pratiques à l’attention des entreprises, pour appliquer au mieux ces règles de façon concrète dans leurs propres sites Web.

Il existe en effet de nombreux terminaux et sites Web difficiles d’accès pour les personnes en situation de handicap. Par ailleurs, de nombreux sites Web utilisent des captchas avec des signes et des images qui étaient difficiles ou impossibles à déchiffrer pour les personnes ayant une déficience visuelle. Pourtant, il semble que la plupart de ces restrictions viennent d’un manque d’information et de sensibilisation des exploitants de sites Web qui, pour la plupart, n’ont jamais entendu parler de l’accessibilité du Web. L’une des principales motivations de Tim Berners-Lee, fondateur du World Wide Web (W3), était que les sites Web devraient être utilisables par le plus grand nombre de visiteurs possible. Le premier site Web publié était relativement simple et formulait les objectifs du projet W3 comme suit :

• L’entreprise fait preuve de responsabilité sociale (Corporate Social Responsibility), ce qui peut également être utilisé pour des mesures de relations publiques.
• Ces mesures permettent de réduire le risque de subir des dommages à l’image en raison de la discrimination.
• L’optimisation des moteurs de recherche et la facilité d’utilisation du site Web sont influencées positivement.
• Le nombre d’utilisateurs potentiels augmente et, par conséquent, la part de marché et les bénéfices augmentent également.
• L’entreprise renforce la participation des employés handicapés.

Ce ne sont que quelques-uns des avantages de l’inclusion digitale. Pour en savoir plus sur les bénéfices de l’accessibilité sur Internet, consultez l’article Developing a Web Accessibility Business Case for Your Organization (Shawn Lawton Henry and Andrew Arch, eds. Copyright © 2012 W3C® (MIT, ERCIM, Keio). Si vous souhaitez en savoir plus sur les normes générales d’accessibilité du Web, lisez notre article sur les WCAG.

Avoir un accès illimité à Internet constitue une évidence pour beaucoup. Mais il y existe des groupes de personnes qui, pour diverses raisons, ne peuvent pas utiliser certains sites Web. Le W3C a identifié cinq facteurs importants pour que les utilisateurs puissent pleinement profiter d’Internet : perception, compréhension, navigation, interaction et contribution. Nous expliquons ces termes plus en détail ci-dessous.

De nombreux sites Web contiennent des annonces clignotantes, les colonnes de commentaires sont remplies de petits textes et parfois même de la musique de fond pour souligner l’humeur ou le thème de la page. Selon le type et le degré de restriction, certains visiteurs de votre site Web peuvent ne pas percevoir ces éléments, que ce soit partiellement ou intégralement. Par exemple, les personnes aveugles naviguent sur Internet sans stimuli visuels. À la place, c’est un lecteur d’écran qui déchiffre le site Web. L’appareil transmet les données lisibles à la technologie d’assistance. Un afficheur braille, par exemple, peut convertir le texte en braille. De cette façon, la personne perçoit votre site Web grâce au toucher. Un outil de synthèse vocale joue le contenu en format audio. Avec cette technologie, l’utilisateur utilise son ouïe pour traiter le contenu du site Web. Dans cet exemple cependant, une musique de fond est dérangeante.

Les personnes ayant un handicap visuel moins grave, y compris de nombreuses personnes âgées, saisissent le contenu de votre site Web avec leurs yeux, mais ont besoin d’une image considérablement agrandie. Les personnes ayant un problème de vision des couleurs, par contre, ne reconnaissent pas les avertissements qui ne sont exprimés que par la couleur. Les personnes sourdes, elles, ne perçoivent pas l’information d’un fichier audio et d’une grande partie des fichiers vidéo.

Les très jeunes utilisateurs, les personnes âgées ou les personnes ayant des déficiences cognitives ont parfois du mal à comprendre un texte rempli de termes techniques modernes ou d’abréviations inexpliquées. Même si le site Web présente un contenu qui appartient à un ensemble thématiquement éloigné, il est difficile pour beaucoup de gens de reconnaître le contexte.

Dans la mesure où de plus en plus de gens visitent des sites Web avec un smartphone, c’est extrêmement ennuyeux pour eux si les liens ne peuvent pas être sélectionnés avec précision avec leurs doigts. Si le site Web n’est pas optimisé pour les smartphones et que les liens en petites tailles de caractères sont proches les uns des autres, c’est très peu pratique pour les personnes âgées aux mains tremblantes. Cependant, de nombreux outils ont été développés pour les personnes handicapées physiques afin de faciliter l’utilisation des ordinateurs : pour ce faire, certains outils capturent les mouvements oculaires tandis que d’autres technologies sont utilisées via le clavier. En principe, le site Web devrait être conçu de manière à pouvoir être évalué à l’aide de ces technologies de soutien. Si votre site Web n’est pas navigable, les clients potentiels qui en dépendent n’ont aucune chance d’utiliser l’ensemble de votre offre.

Si les utilisateurs sont censés remplir un formulaire, par exemple pour s’abonner à une newsletter, il est fréquent que des erreurs se produisent, par exemple si le mot de passe est trop court ou que la date de naissance ne correspond pas aux paramètres enregistrés. Il est donc recommandé de formuler des instructions claires pour le dépannage. L’interaction avec un site Web comprend également la navigation. Les utilisateurs qui utilisent des appareils avec un petit écran ou qui travaillent avec un grand agrandissement de l’écran ont besoin de chemins de navigation adaptés et dépendent d’une structure claire du site Web.

Les colonnes de commentaires permettent à vos utilisateurs d’exprimer leur avis. Par leur intermédiaire, ils peuvent exprimer leur opinion sur un produit ou un contenu ou échanger leurs points de vue avec d’autres utilisateurs. Les personnes ayant une déficience visuelle utilisent souvent un agrandisseur d’écran lorsqu’elles écrivent sur l’écran. Cela fait apparaître les éléments considérablement plus grands et la distance entre la colonne de lecture et le champ d’entrée augmente. Disposez les éléments optiquement proches les uns des autres et facilitez leur échange par vos utilisateurs.

Vous recevez des commentaires ou des commandes de vos clients par le biais de formulaires. Les programmes de correction orthographique intégrés affichent souvent les erreurs en mettant en évidence les mots mal orthographiés en rouge. Cependant, pour les personnes qui ne distinguent pas les couleurs, le texte en couleur ne diffère pas toujours du reste du texte. Pensez donc toujours à un marquage supplémentaire (par exemple, sous forme de soulignement).

Un site web accessible améliore la convivialité et donc votre classement Google. La conception d’un site sans obstacles est donc rentable et ne nécessite qu’un petit effort supplémentaire. Le W3C recommande divers outils de test pour tester un site Web accessible. Cependant, les résultats des tests W3C ne sont attribués que par des testeurs humains expérimentés qui examinent le site Web dans son ensemble. Ils examinent l’ensemble du site Web et certifient différents niveaux d’accessibilité : de A (« faible accessibilité ») à AAA (« haute accessibilité »).

Structurez votre site Web clairement et utilisez un langage convivial. Ceci attirera plus de lecteurs et améliorera votre classement Google, car les moteurs de recherche évaluent également la lisibilité des textes. Si vous souhaitez continuer à fournir un bon référencement et rendre l’architecture de votre site Web compréhensible et claire, faites attention aux aspects suivants :

• Identification claire des URL et du contenu : l’orientation et le thème de base du site Web devraient être facilement reconnaissables sur chaque souspage.
• Structure compréhensible : les utilisateurs doivent toujours savoir où ils se trouvent sur le site.
• Hiérarchies plates : quelques clics mènent au contenu.
• Séparation de la mise en page et du contenu : utilisez le CSS pour la conception.
• Catégories avec une structure conviviale : les souspages ont une connexion sémantique intuitive à la page source.
• Présentation de tous les contenus compatibles avec le Web.
• Langage convivial : les formulations sont faciles à comprendre ou sont expliquées plus en détail.
• Des zones importantes du site Web telles que les contacts, les mentions légales, le champ de rechercheou la page d’accueil peuvent être atteintes par les utilisateurs à partir de n’importe quelle souspage en un seul clic.
• Les éléments de navigation sont clairement reconnaissables et structurés de façon identique sur chaque page.
• Les sites Web les plus importants proposent un plan du site et une FAQ pour les questions les plus fréquentes.
• Les polices évolutives, les couleurs et la mise en page adaptable facilitent l’affichage sur différents appareils et dans différents navigateurs. Dans l’idéal, ils sont compatibles avec la technologie d’assistance.
• Le site Web peut être utilisé avec la souris et le clavier.
• Les textes alternatifs pour les images sont nécessaires parce que les lecteurs d’écran et les robots de recherche ne peuvent entrer que du contenu textuel.

Les personnes qui souffrent de crises d’épilepsie sont soumises à un risque si un site Web qui contient des graphiques ou des vidéos qui s’illuminent plus de trois fois en une seconde. Les scientifiques ont également découvert que des motifs de grilles aux contours nets avec un contraste élevé peuvent également causer des crises chez les personnes souffrant d’épilepsie photosensible.

Envisagez le design de sites Web accessibles dans votre travail quotidien. Pour l’optimisation des moteurs de recherche, à des fins de relations publiques ou pour présenter de nouvelles offres de vente, vous téléchargez chaque jour de nouveaux contenus. Facilitez l’accès de vos visiteurs en adaptant l’information à leurs besoins. Un élément fondamental d’un site Web accessible, qui joue également un rôle dans l’optimisation des moteurs de recherche, est l’attribution d’un texte alternatif pour les images. Les robots et les lecteurs d’écran ne peuvent pas évaluer le contenu de l’image, mais cela s’applique également aux utilisateurs aveugles. Le texte alternatif informe donc sur le contenu de l’image, mais sert aussi aux visiteurs avec de mauvaises connexions Internet, à cause desquelles les images se chargent lentement ou pas du tout.

Créer en continu des transcriptions et des sous-titres adaptés constitue une entreprise plus vaste. Avec ces outils, vous pouvez préparer les informations de contenu audio pour les sourds. Pour ce faire, vous placez la transcription, qui reproduit la langue parlée ainsi que les sons et les bruits sous forme de texte aussi près que possible du contenu audio, par exemple par un bouton avec un lien vers le document. Les sous-titres facilitent la compréhension des vidéos sur le Web pour les personnes qui n’entendent pas. Les utilisateurs qui ne souhaitent pas utiliser la reproduction sonore (par exemple, parce qu’ils ne veulent pas déranger leur environnement par du bruit) bénéficient également de cette fonction. Les personnes souffrant de troubles cognitifs ou de troubles du comportement tels que le trouble de déficit de l’attention, semblables aux personnes malentendantes, absorbent mieux l’information transmise par vidéo lorsqu’elles peuvent désactiver le bruit de fond à l’aide d’un lecteur vidéo.

Les personnes dont l’acuité visuelle est inférieure à 30 % sont considérées comme ayant une déficience visuelle, et aveugles lorsqu’elles présentent une acuité visuelle inférieure à 2 %. Elles ne perçoivent les stimuli visuels que de façon limitée, ou alors pas du tout. Pour aider ces personnes à comprendre les contenus vidéo, il est recommandé d’ajouter une piste audio supplémentaire, qui décrit les éléments visuels tels que les lieux, les paysages et les gens et les actions. Placez ces explications dans le discours et les pauses sonores de l’enregistrement audio original afin que les pistes sonores ne se chevauchent pas.

La vidéo suivante montre une courte introduction au sujet de l’explication audio et comment l’intégrer dans une vidéo. Les sous-titres fermés ci-joints sont également un exemple de préparation de contenu pour les malentendants.

Un langage facile exprime le contenu très simplement. Il aide les personnes ayant des déficiences cognitives à mieux comprendre des questions complexes. Par exemple, il évite le subjonctif, les synonymes, les négations et les métaphores. Les phrases sont courtes et n’ont qu’un seul énoncé en ce qui concerne le contenu. L’Unapei, fédération des associations de représentation des handicapés mentaux, a mis au point un guide, qui propose des conseils pour cette aide à la compréhension. Il inclut notamment des recommandations pour le fond, comme les énoncés simples et le choix d’un vocabulaire sans ambiguïté, mais aussi sur la forme, avec notamment des conseils portant sur les choix de typographies lisibles et sur la façon de combiner texte et image.

Les personnes atteintes de troubles cognitifs ont le même droit à l’information que les autres. C’est pourquoi les quotidiens proposent de plus en plus souvent des versions en langage simple de leurs articles sur leurs plateformes en ligne comme un bon exemple de sites Web accessibles. Les institutions publiques utilisent de plus en plus souvent un langage simple pour les textes d’information.

Le langage facile correspond à un niveau A2 ou B1.

Les lecteurs d’écran et autres technologies d’assistance sont ce qui rend l’accessibilité du Web possible pour de nombreuses personnes. Les programmes traitent les documents Web complètement de gauche à droite et de haut en bas. Ils travaillent de façon strictement linéaire. Par conséquent, vous devez séparer la mise en page et la conception, sinon les lecteurs d’écran traiteront la page de façon incorrecte. Aidez les utilisateurs à naviguer efficacement sur votre site en suivant ces règles de base.

Les frame sets constituent un outil très apprécié par les concepteurs de sites Web. Cependant, l’absence de contenu pertinent pour la page dans les documents sous-jacents crée un problème : les robots lisent la page de démarrage sans contenu et la placent au bas du classement du moteur de recherche en conséquence. Même les lecteurs d’écran de la première heure ne pouvaient pas reconnaître les images. Ils n’étaient compatibles qu’avec les navigateurs texte qui n’affichent que le nom du cadre. Cependant, les nouvelles versions des lecteurs d’écran peuvent être utilisées avec presque tous les navigateurs.

Les lecteurs d’écran transmettent l’information textuelle au logiciel de traduction vocale et aux affichages en braille. Pour ce faire, lisez la page de haut en bas ; ceci inclut également des éléments récurrents tels que la barre de navigation, des icônes ou des liens vers des pages subordonnées. Afin que les lecteurs ne répètent pas inutilement cette information à chaque page ouverte, vous devez installer des liens de saut de navigation. Même les utilisateurs qui ne naviguent qu’avec le clavier, éventuellement avec un micro, ont beaucoup de difficultés lorsqu’ils doivent cliquer sur plusieurs éléments. Vous bénéficiez d’un lien de saut en haut de la page qui est aussi visible que possible :

Il y a des liens de saut qui sont invisibles dans la mise en page, mais le lecteur d’écran envoie à l’utilisateur le message du texte alternatif « saut de navigation » si le code ressemble à ceci :

Il est important que les liens de saut soient le plus en avant possible dans le code. Il faut définir le texte de l’ancre au début du contenu principal :             

Utilisez les liens de saut avec parcimonie, car une accumulation annule l’effet positif et amène les utilisateurs à cliquer sur un trop grand nombre d’éléments. Une solution plus élégante est l’utilisation des repères ARIA et une bonne structuration du document. WebAIM recommande l’utilisation d’éléments HTML5. Cependant, les navigateurs actuels ne sont pas encore entièrement compatibles avec cette méthode. Une autre aide serait une table des matières au début du document, qui redirige les utilisateurs vers les sections respectives via des liens de page. Les lecteurs d’écran modernes lisent les titres correspondants. Travailler avec des titres significatifs et bien structurés augmente la lisibilité pour les moteurs de recherche et les technologies d’assistance.

Pour les sites Web accessibles selon les directives du W3C, l’idéal serait de n’utiliser que des tableaux de données. Avec ce format, les lecteurs d’écran ont moins de difficultés à reproduire l’information de manière significative après la conversion. Les tableaux de présentation, d’autre part, donnent à la page une structure optique, mais rendent la compréhension du contenu difficile pour les lecteurs d’écran. Ce type de conception de site Web est encore très populaire, mais pas absolument nécessaire avec les dernières versions de Netscape.

Il est recommandé de définir les tableaux de présentation, s’ils sont jugés absolument nécessaires, uniquement à l’aide d’éléments simples : TABLE, TR, et TD (respectivement tableau, ligne et colonne). Si vous utilisez des éléments de structuration pour rendre les liens de cellules logiques, le lecteur d’écran lit le tableau de présentation comme un tableau de données. Il faut pallier ce problème en supprimant certains éléments du tableau. Pour votre site Web accessible, utilisez le code role=“none“ comme dans l’exemple. Ceci s’applique à la table et à ses éléments fils. Lorsque vous regroupez des tableaux dans d’autres, vous devez les utiliser pour définir les deux éléments.

Exemple :

Ceci est affiché ainsi dans l’interface, par exemple en aria :