Le HTML sert avant tout à structurer l’information et à transmettre du sens. Grâce à lui, chaque élément peut être interprété correctement par les technologies d’assistance, comme les lecteurs d’écran.
Il est la base d’un projet accessible.
Pourquoi la sémantique est essentielle
Le HTML est un langage de balisage. Son rôle ? Structurer l’information et indiquer ce que chaque élément représente : un titre, une liste, un bouton, un formulaire…
Ces informations sont lues et interprétées par les technologies d’assistance (lecteurs d’écran, aides à la navigation…). Si la sémantique est absente ou fausse, le contenu devient illisible ou incompréhensible pour certains utilisateurs.
Par exemple :
- Un
<div>utilisé à la place d’un<button>? Résultat : L’utilisateur qui utilise un lecteur d’écran ne saura pas que l’élément est clicable. - Des titres visuellement en gras mais sans balise
<h1>à<h6>? Résultat : Certains utilisateurs, notamment les utilisateurs malvoyants ou aveugles peuvent avoir du mal à comprendre la structure de la page. - Une navigation faite uniquement avec des
<span>stylisés ? Résultat : la navigation sera très compliqué pour les utilisateurs de lecteurs d’écrans ou de utilisateurs naviguant au clavier/avec des technologies d’assistance matérielles spécifiques.
Ce que ça change pour les utilisateurs
Pour beaucoup d’entre nous, la sémantique est invisible. Mais pour une personne aveugle, malvoyante, ou en situation de handicap moteur ou cognitif, elle structure l’expérience.
- Grâce à des titres bien balisés, on peut naviguer par section, sans lire toute la page.
- Grâce à un bouton et des liens balisé comme tel, on sait que l’on peut interagir.
- Grâce à une zone de recherche ou une navigation identifiée, on peut se repérer.
C’est aussi un gain pour tous : un contenu bien structuré est plus clair, plus rapide à comprendre, plus agréable à parcourir.
Envie de mieux connaître vos utilisateurs ? Nous proposons une gamme de formations, dans lesquelles les différents usages du web sont expliqués et illustrés.
La sémantique, ce n’est pas juste un détail de développeur
Un HTML correctement utilisé, c’est un socle de qualité pour un projet.
Et la bonne nouvelle, c’est qu’il ne s’agit pas d’ajouter des lignes de code, mais d’utiliser les bonnes :
- Un
<main>pour le contenu principal. - Des balises
<nav>pour les menus. - Des
<ul>,<ol>,<li>pour les listes. - Des
<label>pour relier un champ à son intitulé dans un formulaire. - Des
<button>,<fieldset>,<legend>,<form>…
L’idée est d’aller au plus simple, d’utiliser le fonctionnement natif des éléments, de ne pas détourner d’utilisations (exemple : utiliser un <span> et du JS pour faire un lien).
Pour vérifier si votre code est accessible et correctement structuré, Arya Access propose plusieurs formats d'audits. Ces audits d'accessibilité vous restituent ainsi un état des lieux précis et adapté à vos besoins.
Conclusion : écrire pour le web, c’est aussi écrire pour les machines qui parlent aux humains
Un HTML propre et sémantique, c’est plus qu’un code bien rangé. C’est permettre à chacun d’accéder au contenu, de se repérer et comprendre un site de la même manière.
L’accessibilité numérique dans le code commence dans la façon dont on structure l’information.
Envie de comprendre tous les avantages, pour un développeur, de coder accessible ? Découvrez notre article : Pourquoi les développeurs ont tout à gagner à coder accessible ?
