Respecter la sémantique HTML

Cible : tout le monde, et en particulier les personnes déficientes visuelles, avec des déficiences cognitives et les seniors.
Quand : dès la conception et à la rédaction du contenu.

Description : Utiliser correctement les éléments HTML, en respectant ce pourquoi ils sont faits (validation du code et respect des spécifications) et donc leur sémantique.

À vérifier : Vérifier que la page, si besoin, utilise des listes sémantiquement pertinentes (pas de liste vides ou ne contenant qu’un seul élément) :

  • <ol> pour les listes ordonnées,
  • <ul> pour les listes non ordonnées,
  • <li> pour les éléments de liste.
  • <dl>, <dt> et <dd> pour les listes de définitions

Les listes possèdent au moins deux éléments car sinon ce ne sont pas des listes (sauf si elles sont générées dynamiquement)

S’assurer de bien baliser les citations longues <blockquote> ou brèves <q>.

Les liens sont bien des liens (i.e. balise <a>) : ils pointent effectivement vers une autre adresse, page ou onglet…

Les boutons sont bien des boutons (i.e. balise <button>, ou <input type="button">) : ils déclenchent une action, une validation, ou encore permettent de faire un choix…

Penser, dans la mesure du possible, à respecter l’apparence classique de ces éléments pour ne pas perturber l’utilisateur habitué à leur aspect spécifique.

Dans le code HTML s’assurer, lors de la validation, qu'à minima :

  • les éléments ont des balises de début et de fin,
  • les éléments sont imbriqués conformément à leurs spécifications,
  • les éléments ne contiennent pas d’attributs dupliqués,
  • chaque id est unique.

Objectif utilisateur :
Permettre à tous les utilisateurs d’anticiper la manière d’utiliser et les comportements possibles pour un élément d’interface donné, en assurant que le bon fonctionnement des AT.

Objectif technique :
Oblige à la structuration cohérente du contenu par le créateur du site et permet d'améliorer la maintenabilité.

Exemple non-valide :
Exemple non-valide de mauvaise utilisation d ’un lien
Dans cet exemple, le lien « Actualiser » devrait être un bouton « Actualiser » car ici il déclenche une action et non le chargement d’une URL (page).

Référence WCAG :

Outil : validateur HTML et CSS du W3c