Het HTML5 outline algoritme werkt niet

Bart Simons op 03/06/2016 - 4 reacties

Dit is een geactualiseerde versie van een artikel dat werd gepubliceerd in juni 2013. Cet article en français: HTML5 outline n'est pas supporté

In het kort

  • Gebruik altijd een logische en hiërarchische volgorde van kopniveaus <h1>, <h2>, <h3> om pagina's te structureren.
  • Vertrouw niet op het HTML5 outline algoritme om automatisch de koppenstructuur te berekenen op basis van de "sectioning content" (<section>, <nav>,<aside> en <article>).

Structuur

Mensen die geen overzicht van het scherm hebben, zoals blinden en slechtzienden, kunnen software gebruiken die alles voorleest wat op het scherm staat. Die software, ook screenreader genoemd, doet meer dan alles letterlijk voorlezen. Zo worden ook lijsten, tabellen en titels (koppen) aangekondigd. Wanneer een kop wordt voorgelezen, vermeldt een screenreader ook het niveau van de kop. Bijvoorbeeld op onze pagina over captcha's leest een screenreader de kop <h1>Spam vermijden zonder captcha</h1> als volgt voor: "Spam vermijden zonder captcha - kopniveau 1". De subtitel "geen captcha" iets verderop wordt aangekondigd met kopniveau 2. En zo verder.

kopniveaus artikel captcha

Dit is cruciale informatie voor wie het scherm niet (of nauwelijks) ziet. Aan de hand van de kopniveaus kan men de structuur van een pagina beter begrijpen. Men kan ook "koppen springen" door middel van een sneltoets (h van heading) of een overzicht (outline) van alle koppen op een pagina oproepen. Onderstaande screenshot is de "headings outline" van de screenreader VoiceOver op Mac.

Lijst van headings met VoiceOver

Daarom vragen toegankelijkheidsrichtlijnen om een hiërarchische en logische volgorde van koppen te hanteren. Het is essentieel voor bezoekers met een visuele beperking en het helpt bij zoekmachine-optimalisatie (SEO).

HTML5 heeft verschillende nieuwe elementen geïntroduceerd die het mogelijk maken om pagina's beter te structureren. Elementen zoals <section>, <nav>,<aside> en <article>, ook "sectioning content" genoemd.

In HTML4 moest u zelf het niveau van koppen aanduiden. De titel van de pagina is h1, een subtitel een h2 enzoverder. Als u de nieuwe HTML5 elementen gebruikt, mag u (maar moet niet) altijd h1 gebruiken. Het HTML5 outline algorithm zal automatisch het kopniveau bepalen. Voor elk niveau van nesting wordt een kopniveau bijgeteld. Een h1 binnen een section die zelf binnen section staat, wordt zo automatisch een h2. Wanneer u een h1 gebruikt binnnen een element dat 3 niveaus diep is genest, wordt dat automatisch een h3. Enzoverder.

Theorie

Hieronder een voorbeeld (bron: W3C) met een normale, hiërarchische volgorde van koppen.

<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>

De outline van koppen wordt dan:

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

Volgens de HTML5 specificatie mag u nu ook enkel h1's gebruiken:

<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>

Dit wordt omwille van de sections automatisch omgevormd tot de onderstaande identieke outline van koppen:

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

In theorie maakt dit outline algoritm het dus makkelijker voor de developer zolang hij een logische structuur van sections (en andere "sectioning content" zoals <nav>, <aside> en <article>) hanteert. Maar kunnen screenreaders hier wel mee overweg? Krijgen blinde en slechtziende gebruikers nog steeds het juiste kopniveau te horen?

Praktijk

Het voorbeeldje van "apples" met <section>'s en enkel h1's levert de volgende resultaten op met de meest gebruikte screenreaders.

logo NVDA NVDA versie 2016.1 met IE11 en Firefox 46: geen ondersteuning, leest enkel h1's
logo Supernova Supernova versie 13.59 met Internet Explorer 11: geen ondersteuning, leest enkel h1's
logo VoiceOver VoiceOver OS X 10.11.5 (El Capitan) met Safari 9.1.1: geen ondersteuning, leest enkel h1's
logo Jaws Jaws versies 15, 16 en 17 met IE11 en Firefox 46: geen ondersteuning, leest enkel h1's

Conclusie van de test:

Er is duidelijk geen ondersteuning voor het HTML5 outline algorithm onder screenreaders. Als u "sectioning content" (<section>, <nav>,<aside> en <article>) met daarbinnen enkel h1's gebruikt, verdwijnt alle structuur van de pagina's voor screenreadergebruikers. Daarom raden we deze techniek op dit moment af. We volgen daarmee de HTML5.1 specificatie:

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.

Reacties

Tijs schreef 3 jaar geleden

Respecteren de andere screenreaders de aria-codes? Want anders zou je toch

section > h1

section > h1

kunnen fixen door de aria-codes mee te geven?

Gijs schreef 3 jaar geleden

De ondersteuning voor ARIA is in opmars bij recente versies van screenreaders. Helaas surfen de meeste mensen nog met verouderde versies zonder ARIA-support.

Men is ook niet happig om te updaten. Jaws of Supernova kost meer dan 1000 EUR en een update brengt vaak ook frustratie met zich mee omdat sommige vertrouwde functionaliteiten niet meer werken zoals voorheen. Om diezelfde reden wachten screenreader gebruikers ook vaak lang met browser-updates. Of ze kunnen niet hoger gaan dan IE8 omdat ze nog met Windows XP werken. Met toegankelijkheidsproblemen als gevolg...

Hiërarchische koppenstructuur blijft daarom op dit moment nog noodzakelijk.

Gerty schreef 10 maanden geleden

We zijn nu toch wel 2 (bijna 3) jaar verder, is hier ondertussen al beterschap in?

Bart Simons schreef 10 maanden geleden

in tegendeel: na de bug in JAWS13 en 14 hebben ze in versies 15, 16 en 17 de ondersteuning voor het outline algorythm er uitgehaald. De enige betrouwbare methode blijft dus om zelf h2, h3 elementen te gebruiken waar nodig

Reageer

De volgende HTML tags zijn toegestaan: <a> <b> <ul> <li>