HTML5 outline n'est pas supporté

Sophie Schuermans le 03/06/2016 - Réagissez

Traduction de l'article en néerlandais HTML5 outline algorithm. Mis à jour le 2 juin 2016

En résumé

  • Continuez à utiliser une hiérarchie correcte de titres ( <h1>, <h2>, <h3>,...) pour structurer vos pages web, même lorsque vous utilisez des éléments sectionnants.
  • Ne vous appuyez pas sur le nouvel outline HTML5 qui calcule automatiquement le niveau de titre sur base de l'imbrication des éléments sectionnants (<section>, <nav>,<aside> et <article>).

Les personnes qui n'ont pas de vue d'ensemble de leur écran, comme les personnes aveugles ou malvoyantes, peuvent utiliser un logiciel qui lit tout ce qui est affiché à l'écran. Ce logiciel, appelé lecteur d'écran, fait plus que simplement lire le contenu affiché. Il annonce entre autres les titres, les listes et les tableaux. Lorsqu'un lecteur d'écran vocalise un titre, le lecteur d'écran annonce également le niveau du titre. Par exemple sur notre page Eviter le spam sans captcha un lecteur d'écran lira 'Eviter le spam sans captcha titre de niveau 1'. Un peu plus bas le sous-titre 'pas de captcha' est lu 'Pas de captcha titre de niveau 2'. Et ainsi de suite.

indication des niveaux de titre dans l'article sur les captcha

Cette information est cruciale pour ceux qui ne peuvent pas (ou à peine) voir l'écran. Les niveaux de titre permettent de mieux comprendre la structure de la page. Le lecteur d'écran permet également de sauter d'un titre à l'autre en utilisant un raccourci clavier ('t' pour 'titre') ou d'obtenir un liste de tous les titres (outline) de la page. La capture d'écran ci-dessous montre une liste de titres obtenue avec le lecteur d'écran VoiceOver sur Mac.

liste de titres obtenue avec VoiceOver

C'est pour cela que les directives d'accessibilité demandent d'utiliser une structure de titres logique. C'est essentiel pour les visiteurs ayant une déficience visuelle. Cela favorise également le référencement naturel.

HTML5 a introduit de nouveaux éléments qui permettent de mieux structurer les pages web. Ce sont les éléments sectionnants, comme par exemple <section>, <nav>,<aside> et <article>.

En HTML4 il était toujours nécessaire d'indiquer explicitement les niveaux de titre. Le titre principal de la page est un h1, un sous-titre un h2 etc. Si vous utilisez les nouveaux éléments sectionnants proposés par HTML5, vous pouvez (mais n'êtes pas obligé) utiliser toujours h1 en début de section. C'est l'imbrication des éléments sectionnants qui détermine la structure du document, et donc les niveaux de titre (voir l'algorithme d'outline d'HTML5). Pour chaque niveau d'imbrication le niveau de titre est incrémenté de 1. Un h1 qui se trouve à l'intérieur d'un élément section imbriqué dans un autre élément section devient automatiquement un h2. Si vous utilisez un h1 dans un élément sectionnant qui est imbriqué au 3ème niveau, il devient un h3 dans l'outline, etc.

En théorie

Ci-dessous, un exemple (source: W3C) avec une hiérarchie de titres traditionnelle.

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <section>
   <h3>Sweet</h3>
   <p>Red apples are sweeter than green ones.</p>
  </section>
 </section>
 <section>
  <h2>Color</h2>
  <p>Apples come in various colors.</p>
 </section>
</body>

L'outline des titres devient::

<h1>Apples</h1>
<h2>Taste</h2>
<h3>Sweet</h3>
<h2>Color</h2>

La spécification HTML5 permet de n'utiliser que des h1:

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h1>Taste</h1>
  <p>They taste lovely.</p>
  <section>
   <h1>Sweet</h1>
   <p>Red apples are sweeter than green ones.</p>
  </section>
 </section>
 <section>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
 </section>
</body>

Grâce à l'utilisation de sections ce sera interprété exactement de la même manière:

<h1>Apples</h1>
<h2>Taste</h2>
<h3>Sweet</h3>
<h2>Color</h2>

En théorie cet algorithme devrait faciliter la vie d'un développeur, à conditions qu'il utilise un hiérarchie correcte de sections (et autres éléments sectionnants comme <nav>, <aside> et <article>). Mais est-ce que cela donne de bons résultats lors d'une lecture avec un lecteur d'écran? Est-ce que les personnes aveugles et malvoyantes vont entendre des niveaux de titre corrects?

En pratique

L'exemple ci-dessus ("apples") utilisant des éléments <section> et uniquement des h1 donne les résultats suivants pour les lecteurs d'écrans les plus courants:

logo NVDA NVDA
  • version 2016.1 avec IE11 et FireFox 46: pas de support, ne lit que des h1
logo Supernova Supernova
  • version 13.59 avec Internet Explorer 11: pas de support, ne lit que des h1
logo VoiceOver VoiceOver
  • OS X 10.11.5 (El Capitan) avec Safari 9.1.1: pas de support, ne lit que des h1
logo Jaws Jaws
  • versions 15, 16 et 17 avec IE11 et Firefox 46: pas de support, ne lit que des h1

Conclusions du test:

Il n'y a pas de support pour l'outline HTML5 de la part des principaux lecteurs d'écran. Si vous utilisez des éléments sectionnants en combinaison avec des h1 uniquement, la structure des pages ne sera pas visible pour la majorité des visiteurs utilisant un lecteur d'écran. La spécification HTML5.1 déconseille de compter sur l'algorithme d'outline pour construire la hiérarchie de titres

There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

Réagissez

Les balises HTML suivantes sont autorisées: <a> <b> <ul> <li>