HTML sémantique
Le HTML sémantique utilise les éléments selon leur sens. Un véritable bouton possède des propriétés qu’un bloc de texte stylisé n’a pas automatiquement.
Utiliser les éléments selon leur fonction
Le HTML sémantique décrit les contenus et commandes avec les éléments HTML adaptés. Les titres structurent le contenu, un lien mène à une destination et un bouton déclenche une action. Les navigateurs et technologies d’assistance reçoivent ainsi des informations sur le sens de l’interface.
Pour enregistrer une adresse dans un portail fictif, un button est adapté. Un bloc div visuellement identique n’a automatiquement ni ce sens ni le comportement clavier habituel. Un élément a doté d’un href adapté convient pour accéder à la liste des adresses.
CSS définit la présentation ; agrandir visuellement un texte n’en fait pas un titre. Le HTML sémantique est une base importante, mais ne garantit pas à lui seul une application entièrement accessible. Libellés, états et comportement réel doivent aussi convenir.
Sources
Termes associés
- ARIAARIA complète les informations de rôle, d’état et de propriété pour les technologies d’assistance. Le comportement annoncé doit réellement fonctionner.
- Lecteur d’écranUn lecteur d’écran rend les contenus numériques accessibles par la voix ou le braille. Structure et libellés explicites facilitent leur utilisation.
- Utilisation au clavierL’utilisation au clavier permet d’accomplir une tâche sans souris, avec des actions accessibles et un parcours compréhensible.
- Ordre du focusL’ordre du focus définit le parcours des éléments pouvant recevoir le focus. Il doit préserver le sens et l’utilisation lors des changements dynamiques.
- Piège au clavierUn piège au clavier bloque la navigation dans une zone. Un confinement volontaire du focus dans une boîte de dialogue doit prévoir une sortie utilisable.
- Lien d’évitementUn lien d’évitement mène au contenu principal en évitant les blocs de navigation répétés. La navigation au clavier doit ensuite continuer au bon endroit.
Articles sur le sujet
Design & UX avec ASES
Expérience utilisateur, interfaces et image de marque