HTML : les bonnes bases pour l’accessibilité

Mais comment le HTML peut être utilisé pour garantir une accessibilité maximale ?

Déjà, pour ceux qui sont tombés là par hasard et qui ne savent pas de quoi on parle ; qu’est-ce que l’accessibilité ?

Comme son nom l’indique, l’accessibilité consiste à rendre les sites Web utilisables par tout le monde.

Cela concerne les personnes handicapées bien sûr afin que le Web soit accessible à tous, mais profite également aux utilisateurs d’appareils mobiles ou aux appareils dont les connexions réseau sont lentes.

Le HTML sémantique, qui améliore l’accessibilité, améliore également le référencement et donc son classement dans les SERPs

L’accessibilité démontre une bonne éthique et une bonne moralité, améliorant votre image de marque

De plus, fournir des sites accessibles est même obligatoire dans certains pays.

Alors, comment rendre son site accessible ? Quelles sont les bonnes pratiques ? Notre agence de développement Web vous explique comment rendre votre site accessible à tous.

Quel public est concerné par l’accessibilité ?

Les personnes en situation de handicap sont tout aussi diverses, concernées et intéressées par ce qu’il se passe sur le Web, il faut donc apprendre et comprendre comment ils l’utilisent pour leur proposer la meilleure expérience possible.

Vous devez donc connaître les principaux types de handicaps à considérer, ainsi que tous les outils spéciaux à votre disposition pour que TOUS vos utilisateurs soient satisfaits et reviennent régulièrement sur votre site.

Les personnes ayant une déficience visuelle.
Les personnes ayant une déficience visuelle ou atteintes de cécité, de faible vision et de daltonisme.

De nombreuses personnes malvoyantes utilisent des loupes d’écran qui sont soit des loupes physiques, soit des logiciels de zoom.

La plupart des navigateurs et des systèmes d’exploitation proposent aujourd’hui la possibilité de zoomer.

Certains utilisateurs s’appuieront quant à eux sur des lecteurs d’écran (logiciel qui lit le texte numérique à haute voix).

Exemples de lecteurs d’écran :

• Logiciels payants : JAWS (Windows) ou Dolphin Screen Reader (Windows).
• Logiciels gratuits : NVDA (Windows), ChromeVox (Chrome) ou Orca (Linux).
• Logiciels intégrés au système d’exploitation : VoiceOver (macOS, iPadOS, iOS), Narrator (Windows), ChromeVox (sur Chrome OS) ou TalkBack (Android).

N’hésitez pas à vous familiariser avec les lecteurs d’écran en les configurant et en les testant par exemple.

L’Organisation mondiale de la santé estime que 285 millions de personnes sont estimées être malvoyantes dans le monde : 39 millions sont aveugles et 246 ont une basse vision .

Il est donc important de leur donner accès au Web sans difficulté et avec la même expérience que vos autres utilisateurs.

Les personnes malentendantes.
Comprend les personnes ayant une déficience auditive ou sourde.

Les personnes malentendantes utilisent des TA (Appareils et accessoires fonctionnels pour les personnes souffrant de troubles de l’audition, de la voix, de la parole ou du langage), mais il n’y a pas vraiment de TA spécifique à l’utilisation de l’ordinateur ou du Web.

Il existe cependant des techniques spécifiques pour fournir des alternatives textuelles au contenu audio qui vont de simples transcriptions de texte à des pistes de texte (c’est-à-dire, des légendes) qui peuvent être affichées avec la vidéo.

Les personnes à mobilité réduite.
Personnes ayant des incapacités de mouvement, qui peuvent impliquer des problèmes purement physiques (comme la perte d’un membre ou une paralysie), ou des troubles neurologiques/génétiques qui entraînent une faiblesse ou une perte de contrôle des membres.

Certaines personnes peuvent avoir des difficultés à effectuer les mouvements exacts de la main requis pour utiliser une souris, tandis que d’autres peuvent être plus gravement touchées, peut-être considérablement paralysées au point d’utiliser un pointeur de tête pour interagir avec les ordinateurs.

Au niveau du développement informatique le travail se portera sur la nécessité que les contrôles soient accessibles par le clavier.

Vous pouvez essayer certains sites Web en utilisant uniquement le clavier pour avoir une idée de ce que vous devrez mettre en place comme utiliser la touche Tab pour vous déplacer entre les différents contrôles d’un formulaire Web, par exemple.

Les personnes atteintes de troubles cognitifs.
La déficience cognitive comprend un large éventail de déficiences.

Des personnes ayant une déficience intellectuelle et qui ont des capacités plus limitées

Les personnes atteintes de maladies mentales, telles que la dépression et la schizophrénie.

Les personnes ayant des troubles d’apprentissage, tels que la dyslexie et le trouble d’hyperactivité avec déficit de l’attention.

Bien qu’il existe une grande diversité dans les définitions cliniques des déficiences cognitives, les personnes qui en souffrent éprouvent un ensemble commun de problèmes fonctionnels et celles-ci incluent la difficulté à comprendre le contenu, à se souvenir de la façon d’effectuer les tâches ou la confusion causée par des mises en page Web incohérentes.

Une bonne base d’accessibilité pour les personnes ayant une déficience cognitive comprend :

• La diffusion de contenu de plusieurs manières, par exemple par synthèse vocale ou par vidéo
• Un contenu facile à comprendre, tel que du texte rédigé à l’aide de normes en langage clair
• La concentration de l’attention sur le contenu important La minimisation des distractions, telles que le contenu ou les publicités inutiles Une mise en page et une navigation cohérentes des pages Web
• Des éléments familiers, tels que les liens soulignés en bleu lorsqu’ils ne sont pas visités et en violet lorsqu’ils sont visités
• La division des processus en étapes logiques et essentielles avec des indicateurs de progrès
• Une authentification du site Web aussi simple que possible sans compromettre la sécurité
• Des formulaires faciles à remplir, par exemple avec des messages d’erreur clairs et une récupération d’erreurs simples

Nos conseils pour rendre votre site Web accessible

Choisissez un CMS adapté à l’accessibilité.
Il existe de nombreux CMS sur le marché pour créer votre site Web.

Les plus courants incluent Drupal et Wordpress, mais il existe de nombreuses autres options disponibles.

Une fois que vous avez choisi un CMS qui répond à vos besoins, assurez-vous de choisir un thème accessible.

Pour cela, consultez la documentation du thème afin de vous renseigner et avoir des conseils pour créer du contenu et des mises en page accessibles avec ce thème

Et attention ! Assurez-vous que les modules, plugins ou widgets compatibles soient également prévus pour l’accessibilité.

Pour les éléments tels que les barres d’outils d’édition et les lecteurs vidéo, assurez-vous qu’ils prennent en charge la création de contenu accessible.

Par exemple, les barres d’outils d’édition devraient inclure des options pour les en-têtes et les tableaux accessibles, et les lecteurs vidéo devraient inclure des sous-titres codés.

Et dans l’idéal, les options d’administration du CMS (comme la création d’un article de blog ou la publication d’un commentaire) devraient également être accessibles.

Organisez la structure de votre contenu en utilisant correctement les titres.
Les utilisateurs de lecteurs d’écran peuvent se servir de la structure d’en-tête pour parcourir le contenu.

Ainsi, en utilisant correctement et stratégiquement les titres (<h1>, <h2>, etc.), le contenu de votre site Web sera bien organisé et facilement interprété par les lecteurs d’écran.

Assurez-vous de respecter l’ordre correct des en-têtes et de séparer la présentation de la structure à l’aide de vos CSS.

Ne choisissez pas un en-tête simplement parce qu’il semble bon visuellement (ce qui peut dérouter les utilisateurs de lecteurs d’écran) ; créez plutôt une nouvelle classe CSS pour styliser votre texte. Exemples d’utilisation correcte des titres :

• Utilisez un <h1> pour le titre principal de la page. Évitez de l’utiliser pour autre chose que le titre du site Web et le titre de pages individuelles.
• Utilisez des en-têtes pour indiquer et organiser votre structure de contenu.
• Ne sautez pas les niveaux de titre (par exemple, passer d’un  <h1> à un <h3>), car les utilisateurs de lecteurs d’écran se demanderont s’il manque du contenu.

Soignez le texte alternatif de vos images.
Tout le monde l’a maintenant intégré, il faut fournir un texte alternatif pour les images, afin que les utilisateurs du lecteur d’écran puissent « lire » et comprendre de quoi parle l’image sur la page.

Ceci est particulièrement important pour les images informatives (telles que les infographies).

Lors de la création du texte alternatif, le texte doit contenir le message que vous souhaitez transmettre à travers cette image, et si l’image comprend du texte, ce texte doit également être inclus dans l’Alt.

L’exception à cette règle est lorsqu’une image est utilisée uniquement à des fins de décoration ; dans ce cas, le texte alternatif peut être laissé vide afin que l’utilisateur du lecteur d’écran ne soit pas distrait du contenu le plus important de la page.

Si une image est le seul contenu d’un lien, le lecteur d’écran lira le nom du fichier si aucun texte alternatif n’est fourni.

Fournissez toujours un texte alternatif pour les images utilisées comme liens.

Donnez à vos liens des noms uniques et descriptifs.
Lorsque vous incluez des liens dans votre contenu, utilisez un texte qui décrit correctement la destination du lien.

L’utilisation de « cliquez ici » n’est pas considérée comme descriptive et est inefficace pour un utilisateur de lecteur d’écran.

Le contenu le plus unique du lien doit être présenté en premier, car les utilisateurs de lecteurs d’écran navigueront souvent dans la liste des liens en effectuant une recherche via la première lettre.

Utilisez la couleur avec précaution.
La carence de couleur rouge-vert, affecte environ 8% de la population.

Évitez donc d’utiliser ces couleurs en particulier pour indiquer les champs obligatoires dans un formulaire.

D’autres groupes de personnes handicapées, en particulier les utilisateurs ayant des troubles d’apprentissage, bénéficient grandement de la couleur lorsqu’elle est utilisée pour distinguer et organiser votre contenu.

Pour satisfaire les deux groupes, utilisez la couleur, mais assurez-vous également d’utiliser d’autres indicateurs visuels, comme une astérisque ou un point d’interrogation.

Veillez également à distinguer les blocs de contenu les uns des autres en utilisant une séparation visuelle (comme des espaces ou des bordures).

Concevez des formulaires accessibles.
Chaque champ de votre formulaire doit avoir une étiquette descriptive bien positionnée.

Par exemple, si le champ est pour le nom d’une personne, il doit être étiqueté de manière appropriée comme « Nom complet » ou avoir deux champs distincts étiquetés comme « Prénom » et « Nom de famille ».

Utilisez la balise ou une propriété ARIA (voir le conseil suivant) pour associer le texte de l’étiquette au champ de formulaire.

Au fur et à mesure que vous parcourez un champ de formulaire, vous devez pouvoir naviguer dans le formulaire et remplir tous les champs avant d’accéder au bouton « Soumettre », sinon vous pouvez ne pas vous rendre compte que des champs supplémentaires existent.

Pour l’essentiel, l’ordre de tabulation doit suivre l’ordre visuel.

Si vous avez des champs liés ou similaires, envisagez de les regrouper à l’aide de jeux de champs.

Par exemple, des champs tels que « Nom complet » et « Date de naissance » peuvent être regroupés sous « Informations personnelles ».

Ce type d’organisation de formulaire peut aider un utilisateur de lecteur d’écran à suivre la progression et peut fournir le contexte qui pourrait être perdu lors du remplissage du formulaire.

Si certains champs de formulaire sont requis, le champ doit être étiqueté en conséquence et configuré pour alerter l’utilisateur du lecteur d’écran.

Généralement, les champs obligatoires sont signalés comme tels par un astérisque, qui ne sera pas prononcé par certains lecteurs d’écran.

Les astérisques (ou des indications visuelles similaires) doivent toujours être utilisés pour les utilisateurs voyant.

Il est possible d’indiquer qu’un champ est requis pour un lecteur d’écran en ajoutant ARIA required = « true » et ARIA required = « false » pour les champs facultatifs.

Après avoir soumis le formulaire, l’utilisateur devra être alerté de la confirmation de soumission ou de toute erreur de soumission.

Nous vous recommandons d’inclure tout décompte d’erreurs dans le titre de la page (après soumission du formulaire), afin que l’utilisateur soit immédiatement informé qu’il y a des erreurs.

Enfin, l’utilisation de CAPTCHA est inaccessible et ne doit pas être utilisée pour valider les soumissions.

Assurez-vous que tout le contenu est accessible avec le clavier.
Les longues pages avec beaucoup de contenu doivent être séparées par des liens d’ancrage (listes de raccourcis), permettant aux utilisateurs qui ne peuvent se servir que de leur clavier de passer aux parties pertinentes de la page facilement. « Passer au contenu principal » doit être indiqué en haut de chaque page, de sorte que les utilisateurs utilisant uniquement le clavier n’auront pas à parcourir la navigation de la page pour obtenir le contenu principal.

Pour les pages avec des menus locaux et plusieurs niveaux et sous-éléments, les menus doivent être configurés de manière à ce que tous les éléments de menu soient accessibles avec le clavier.

N’utilisez pas d'éléments qui ne s’activent que lorsque l’utilisateur survole des éléments avec une souris, car ils ne seront pas accessibles à tout le monde.

Utilisez les rôles et points de repère ARIA (mais uniquement lorsque cela est nécessaire).
ARIA (Accessible Rich Internet Applications) est une spécification technique complexe et puissante permettant d’ajouter des informations d’accessibilité à des éléments qui ne sont pas nativement accessibles.

Vous devez toujours utiliser des éléments HTML natifs lorsqu’ils sont disponibles.

N’oubliez pas que la première règle d’ARIA est « N’utilisez pas ARIA ».

De nombreuses fonctions qui nécessitaient des attributs ARIA sont désormais implémentées en HTML5.

Par exemple :

• Utilisez la balise de bouton HTML native au lieu du rôle ARIA de bouton.
• Utilisez la balise HTML label au lieu de aria-label ou arial-labelby.
• Utilisez la balise de navigation HTML 5 au lieu du rôle de navigation ARIA.

Les attributs ARIA peuvent être ajoutés à votre code HTML, de la même manière que vous ajoutez des classes au HTML afin de charger des attributs depuis le fichier CSS.

Veuillez noter que l’ajout d’attributs ARIA n’est pas suffisant pour rendre les widgets les plus complexes accessibles. ARIA ne fait rien pour les utilisateurs qui ne peuvent se servir que de leur clavier pour naviguer ; il n’affecte que les personnes utilisant des technologies d’assistance.

Vous devez encore configurer vos interactions et vos comportements en utilisant Javascript.

Voici des exemples d’utilisation appropriée d’ARIA :

• Ajout d’alertes pour informer les utilisateurs de lecteurs d’écran des changements de page dynamiques
• Rendre les widgets complexes et interactifs tels que les sélecteurs de dates accessibles aux utilisateurs de lecteurs d’écran

Par exemple, vous pouvez utiliser aria-role et aria-label pour le menu de navigation.

Rendez le contenu dynamique accessible.
Lorsque le contenu est mis à jour dynamiquement (c’est-à-dire sans actualisation de la page), les lecteurs d’écran peuvent ne pas en être informés.

Cela comprend les superpositions d’écrans, les lightboxes, les mises à jour sur la page, les fenêtres contextuelles et les boîtes de dialogue modales.

Les utilisateurs utilisant uniquement le clavier peuvent être coincés dans des superpositions de pages.

Les utilisateurs de logiciels d’agrandissement peuvent zoomer sur la mauvaise section de la page.

Mais ces fonctions peuvent être facilement rendues accessibles.

Les options incluent les rôles et alertes ARIA, ainsi que les cadres de développement frontaux qui prennent spécifiquement en charge l’accessibilité.

Assurez-vous que les lecteurs vidéo ne fonctionnent pas automatiquement et qu’ils peuvent être utilisés avec un clavier.

De plus, toutes les vidéos doivent avoir des options de sous-titrage codé et de transcriptions pour les malentendants.

Si votre site contient un diaporama, assurez-vous que chaque photo contient un texte alternatif et peut être parcourue via le clavier.

Si vous utilisez des widgets uniques (tels qu’un sélecteur de calendrier ou un glisser-déposer), assurez-vous de tester l’accessibilité.

Votre HTML doit être sémantique

En ne plaçant pas tout dans des divs ou une mise en page de tableau, il est plus facile pour les technologies d’assistance de lire les éléments de la page.

Utilisez des balises html sémantiques adaptées au contenu.

Par exemple ; Utilisez la balise button pour la fonctionnalité des boutons ;

Utilisez une bonne structure de contenu des en-têtes, paragraphes, listes, etc.

Langage clair, n’utilisez pas de tirets.

N’utilisez pas d’abréviations.

Déclarez le langage dans le balisage « html » comme suit.

Vous pouvez utiliser l’attribut lang si vous changez de langue dans le document.

L’accessibilité ne doit jamais être considérée comme un supplément facultatif.

Si vous avez un site corporate ou un e-commerce, vous devez lever les barrières qui empêchent des clients potentiels de naviguer sur votre site.

Pour les organisations du secteur public, une conception accessible est une exigence légale.

Mais dans l’ensemble, faire preuve d’empathie et permettre à tout le monde, sans exception, d’accéder au Web est la meilleure chose que vous puissiez faire.

N’hésitez pas à nous contacter.