Accessibilité du Web : touchez plus de monde sur la toile

L’accessibilité sur Internet garantit que les utilisateurs ayant des restrictions et des besoins divers peuvent utiliser des sites Web accessibles sans restriction et sans aide extérieure. L’objectif 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.

L’accessibilité sur Internet : de quoi s’agit-il ?¶

En général, les barrières sont des obstacles qui nous empêchent de progresser, et rendent la participation difficile. Alors que dans le monde extérieur, nous sommes de plus en plus conscients des barrières existantes, 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.

Par exemple, un test captcha avec des signes et des images difficiles ou impossibles à déchiffrer pour les personnes ayant une déficience visuelle pose problème.

L’accessibilité sur Internet vise à permettre à chaque groupe de personnes de participer à part égale aux contenus du Web. Cela signifie que toutes les personnes peuvent utiliser l’offre du Web de la même manière, sans être exclues de certains contenus ou médias en raison de restrictions. Dans le cadre de l’inclusion numérique, les sites Web sans barrières sont un facteur important dont les entreprises devraient être conscientes. Enfin, l’accessibilité des sites Web a également une influence positive pour améliorer son référencement sur les moteurs de recherche.

Accessibilité du Web : les standards¶

La norme la plus importante pour permettre l’accessibilité sur Internet est WCAG. Il s’agit des lignes directrices du W3C pour des contenus Web accessibles.

Le W3C a identifié dans le cadre de cette directive cinq facteurs importants pour que les utilisateurs puissent pleinement profiter d’Internet : perception, compréhension, navigation, interaction et contribution. En particulier au sein de ces catégories, il vous faut veiller à supprimer toute barrière pouvant réduire l’accessibilité Web des personnes handicapées.

Perception¶

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, les utilisateurs utilisent leur 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, en revanche, ne reconnaissent pas les avertissements uniquement exprimés par la couleur. Les personnes sourdes quant à elles, ne perçoivent pas l’information d’un fichier audio et d’une grande partie des fichiers vidéo.

Compréhension¶

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.

Interaction et navigation¶

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 également 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 personnes 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.

Contribution¶

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 personnes. Les individus 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.

Qui dit site Web accessible, dit avantages pour tous¶

Un site Web accessible améliore la convivialité et donc votre référencement Google. La conception d’un site dépourvu d’obstacles est donc rentable et ne nécessite qu’un petit effort supplémentaire. Qui plus est, les sites Web accessibles sont conformes aux directives européennes. Un facteur également non négligeable pour les entreprises : les sites Web accessibles atteignent un plus grand nombre de clients, car ils sont à la portée d’un plus grand nombre de personnes.

Comment réaliser l’accessibilité Web : conseils et exemples¶

Si vous souhaitez créer un site Web accessible, vous devez notamment porter une attention particulière aussi bien à la structure de l’information qu’aux différents supports visuels, qui font partie intégrante de votre présence sur le Web.

Une structure d’information claire¶

Structurez votre site Web clairement et utilisez un langage convivial. Il attirera plus de lecteurs et améliorera votre référencement 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 sous-page.
• 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 sous-pages 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 recherche ou la page d’accueil peuvent être atteintes par les utilisateurs à partir de n’importe quelle sous-page 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.

Composants visuels pour un site Web accessible¶

Agrandir ou changer la couleur des polices de caractères aide les personnes ayant une déficience visuelle ou un défaut de vision des couleurs à mieux reconnaître le contenu du site Web. Le contenu doit se démarquer de l’arrière-plan en termes de couleur, afin qu’il puisse être lu le plus facilement possible. Mettez en évidence les éléments interactifs à l’aide de boutons ou de marqueurs de couleur, par exemple avec un lien changeant de couleur lorsque les utilisateurs naviguent dessus avec le clavier, maintiennent la souris ou cliquent dessus. Outre les couleurs, il est essentiel d’utiliser également d’autres signaux d’information tels que des chiffres ou des astérisques pour transmettre l’information.

Les personnes qui souffrent de crises d’épilepsie sont soumises à un risque si un site Web 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.

Présentation multi-canaux pour un site Web accessible¶

Notre conseil : envisagez d’intégrer la conception 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. Vous faciliterez l’accès de vos visiteurs en adaptant l’information à leurs besoins. Un élément fondamental pour l’accessibilité du Web, qui joue également un rôle fondamental 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, cela s’applique également aux utilisateurs aveugles. Le texte alternatif sert aussi aux visiteurs avec de mauvaises connexions Internet, à cause desquelles les images se chargent lentement ou pas du tout.

Transcription et sous-titres¶

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 en étant bruyants) bénéficient également de cette fonction. Les personnes souffrant de troubles cognitifs ou du comportement tels que le trouble de déficit de l’attention peuvent mieux assimiler les informations transmises par vidéo lorsqu’elles peuvent désactiver le bruit de fond.

Explications audio¶

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’y ajouter une piste audio supplémentaire, qui décrit les éléments visuels tels que les lieux et les paysages, les gens ainsi que 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 vous expliquent 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.

Langage simple¶

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, un langage simplifié évite le subjonctif, les synonymes, les négations et les métaphores. Les phrases sont courtes et chacune d’entre elles émet une seule et même idée. L’Unapei, fédération des associations de représentation des handicapés mentaux, a mis au point un guide de langage simple créé par l’Unapei, 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. Un bon exemple de sites Web accessibles : les quotidiens proposent de plus en plus souvent des versions en langage simple de leurs articles sur leurs plateformes en ligne. 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.

Technologie d’assistance : renforcez l’accessibilité de votre site Web¶

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.

Liens de sauts de navigation et autres abréviations¶

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. Ces personnes bénéficient d’un lien de saut en haut de la page qui est aussi visible que possible :

<body><a href=“#content“>saut de navigation </a>…<main id=“content“><h1>titre principal</h1><p>premier paragraphe</p>

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 :

<a href="#content"><img src="https://www.ionos.fr/digitalguide/empty.gif" height="15" border="0" alt="saut de navigation" width="5"></a>

Il est important que les liens de saut soient le plus haut possible dans le code, et que le texte de l’ancre se trouve au début du contenu principal :

<a name="content"></a>

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.

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. C’est pourquoi, travailler avec des titres significatifs et bien structurés augmente la lisibilité pour les moteurs de recherche et les technologies d’assistance.

Remplacer les tableaux de présentation par les tableaux de données¶

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.

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.

<table role="none">

<tr>

<td>

<table role="none">

<tr>

<td>

Texte <abbr titre="exemple">ex.</abbr> en ARIA

</td>

</tr>

</table>

</td>

</tr>

</table>

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

Texte <abbr titre="exemple">ex.</abbr> en ARIA

Accessibilité du Web : check-list des points les plus importants¶

Une fois que vous avez terminé la création de votre site Web, vous référer à notre check-list peut vous aider pour vous assurer d’avoir pris en compte les éléments les plus importants.

• ✔ Information bien structurée et compréhensible
• ✔ Utilisation d’un langage simple et accessible
• ✔ Textes alternatifs pour les images
• ✔ Transcriptions vidéo et audio
• ✔ Signalisation en couleur des contenus importants
• ✔ Renforcement des contrastes
• ✔ Prise en charge des lecteurs d’écran

Accessibilité du Web : l’exemple du site W3C¶

Vous ne serez peut-être pas surpris de constater que le site Web W3C est un exemple parfait d’une présence Web accessible. Il contient les éléments principaux définis comme standards :

• Langage simple
• HTML clairement structuré
• Indicateur pour les éléments couramment sélectionnés
• Contraste des couleurs
• Structure claire et compréhensible

Outils gratuits pour la création de sites Web accessibles¶

Il existe un certain nombre d’outils différents pour tester l’accessibilité Web. Nous vous présentons ci-dessous quelques-uns des outils les plus connus, une liste complète des outils en langue anglaise se trouve sur le site du W3C.

• Test d’accessibilité Web d’EXPERTE.com : un test d’accessibilité dans les pays francophones.
• Accessibility Checker : l’aide du Webapp Accessibility Checker, vous pouvez tester gratuitement la conformité de votre site Web aux WCAG dans les pays anglophones.
• Siteimprove : l’Accessibility Checker de Site improve propose un contrôle gratuit de votre site Web, qui vous est envoyé par email.