Part of a Whole

Mon nom est Nicolas Steenhout.
Je présente, forme, et consulte au sujet de l’inclusion, de l’accessibilité et du handicap.

Mal de titre

J’ai trouvé un morceau de code qui m’a estomaqué. Je croyais à peine ce que je voyais. J’ai partagé avec d’autres gens dans la communauté de l’accessibilité Web, et ils étaient aussi étonnés que moi. Nous avons tous bien rigolé. Cet extrait était vraiment bizarroïde. Mais un pauvre programmeur l’a écrit. Il pensait qu’il faisait la bonne chose. Examinons ce bout de code et expliquons pourquoi ça ne fonctionne pas.

Le mauvais extrait

<h2 class="h3" role="heading" aria-level="1">Un titre quelconque </h2>

Pourquoi les spécialistes en accessibilité lèvent-ils les yeux vers le ciel? Parce que ce code sape l’objet des titres HTML. Mais décortiquons cela un peu.

Titres HTML

  • Les titres HTML sont utilisés pour définir la structure et la hiérarchie d’une page.
  • Il y a, comme vous le savez probablement, 6 niveaux de titres HTML.
  • Les titres ne sont pas des en-têtes (en anglais: heading vs header)
  • Les titres sont hiérarchique. Cette hiérarchie doit être disponible au visuel ainsi qu’au programmatique.
  • Les utilisateurs de lecteur d’écran peuvent utiliser les titres pour avoir un aperçu de la page.
    • Les utilisateurs de lecteur d’écran peuvent passer d’un titre à l’autre.
    • Les utilisateurs de lecteur d’écran peuvent accéder à une liste de tous les titres sur une page, et aller directement à un titre spécifique.

Capture d'écran montrant le menu titre
Voilà de quoi à l’air la liste des titre sur VoiceOver.

Le bout de code examiné

L’utilisation d’une classe CSS

Il n’y a rien de mal à attribuer une classe CSS à un titre. Il y a toutes sortes de raisons de le faire. Par contre, dans ce cas ci, la classe est h3, quand le titre est de niveau 2. J’assume ici que l’intention était de pouvoir donner un style au h2 pour qu’il aie l’air d’un h3. C’est un problème parce que cela a un impact pour les personnes voyantes qui se fient sur les titres pour comprendre la hiérarchie d’une page.

L’utilisation d’un rôle

Il n’y a rien de mal à attribuer un role aux éléments HTML. Par contre, un rôle ne devrait pas changer la signification sémantique des éléments HTML auxquels ils sont attribués. Ici, ça va parce que le role “heading” (donc titre), est attribué à une balise titre. C’est superflu de faire cela, mais ça ne fait rien de mal.

Le problème est que l’attribut aria-level est utilisé pour définir un niveau de titre différent que celui de la balise. Et c’est une mauvaise idée de changer la nature d’une balise. Si vous voulez un h1, utilisez un h1. Si vous utilisez un h2, ne forcez pas la balise à se comporter comme un h1.

Gardez ça simple

Utilisez les balises HTML existantes quand possible. N’essayez pas de les forcer à se comporter différemment de la manière prévue. Gardez ça simple, hein?

Voici de quoi ça pourrait avoir eu l’air:

<h2 class="display1">Un titre quelconque</h2>