HTML5, ARIA landmark roles en screenreaders

Bart Simons op 16/07/2013 - reageer als eerste

HTML structureert de informatie op websites en dat heeft ook voordelen voor toegankelijkheid. Wie het scherm niet of moeilijk kan zien, heeft geen overzicht over de pagina. Goede structuur helpt de lezer de informatie beter te begrijpen en sneller te vinden wat hij/zij zoekt. Het is bekend dat screenreadergebruikers van kop naar kop springen en gemakkelijk door lijsten kunnen navigeren als de structuur van de pagina de HTML-specificatie respecteert. Recent zijn daar twee mogelijkheden bijgekomen: ARIA landmark roles en HTML5 sectioning elementen.

ARIA is een W3C recommendation die webomgevingen beter toegankelijk moet maken. Een onderdeeltje hiervan zijn de landmark roles. Kort gezegd, laten ze toe om aan te geven wat elk blok van een pagina bevat. Voorbeelden zijn role="navigation", role="main", role="search" enz.

HTML5 introduceerde iets gelijkaardigs maar dan in de vorm van nieuwe HTML-elementen zoals <nav>, <main>, <section> enz.

We hebben getest welke roles en HTML5 sectioning elementen ondersteund worden door screenreaders en komen zo tot volgende aanbevelingen:

  • Enkel Jaws ondersteunt het <nav>-element terwijl role="navigation" wel door alle screenreaders wordt herkend. Het is een prima idee om beide te combineren: <nav role="navigation">. Merk op dat dit enkel gebruikt mag worden voor het hoofdmenu en eventueel het submenu. Het is niet de bedoeling dat u elk groepje van 2 of 3 links in een nav-element plaatst.
  • Er is nog geen ondersteuning voor het <main>-element maar wel voor role="main". Het is zeer nuttig om role="main" toe te voegen aan de div die de inhoud van de pagina bevat. Dit kan dan op termijn de "skip to content" link overbodig maken. Gebruikt u HTML5 dan kunt u het main-element gebruiken in plaats van een div maar altijd in combinatie met de role="main": <main role="main">.
  • Er is goede ondersteuning voor role="search". Voeg dit toe aan de div die het zoekveld en de zoekknop bevat. Er is geen overeenkomstig HTML5-element.
  • Er bestaan nog andere HTML5-elementen zoals <section>, <article>, <header> en <footer>: sommige screenreaders kondigen ze aan en andere niet. We beschouwen dit niet als essentieel en waarschuwen alleen om ze correct te gebruiken. Zo is het niet de bedoeling dat u alle div's en p's door sections vervangt. Hou ook rekening met onze vorige blogpost over het gebruik van koppen bij het outline algorithm.
  • Er bestaan nog andere ARIA roles zoals role="article", role="banner", role="region" role="complementary": sommige hiervan worden door een aantal screenreaders ondersteund. Ook hier is ons advies om niet te overdrijven.

(X)HTML of HTML5?

We hebben geen voorkeur voor HTML4, XHTML of HTML5. Van zodra u een HTML5-element gebruikt, zal de browser de hele pagina als HTML5 interpreteren. Gebruikt u geen HTML5 dan kunt u wel ARIA roles toevoegen. Dit is zeker een goed idee zolang u niet overdrijft. Gebruikt u HTML5 dan moedigen we u aan om ook de sectioning elementen correct toe te passen. Omdat nog weinig screenreaders de nieuwe elementen ondersteunen, moet u er wel de bijhorende ARIA roles aan toevoegen. Een webpagina kan er dan ongeveer als volgt uitzien:

Screenshot

Gebruikt u geen HTML5 dan behoudt u de ARIA roles en vervangt u de nav-, header-, footer- en aside-elementen door div's.

De screenreader JAWS versie 14 in Internet Explorer 9 leest dan het volgende voor:

Banner <!-- role="banner" -->
Afbeelding logo
Zoekgebied <!-- role="search" -->
Invoerveld
Zoeken knop
Einde zoekgebied <!-- /role="search" -->
Navigatiegebied <!-- role="navigation" -->
Lijst met 4 items
Link Home
Link Over ons
Link Diensten
Link Contact
Einde lijst
Einde navigatiegebied <!-- /role="navigation" -->
Einde banner <!-- /role="banner" -->
Reeks <!-- section -->
U bent hier:
Link Home
Blog
Einde reeks <!-- /section -->
Hoofdgebied <!-- role="main" -->
Kop niveau 1 Welkom
Tekst
Kop niveau 2 Tussenkop
Tekst
Einde hoofdgebied <!-- /role="main" -->

Aanvullende informatie <!-- role="complementary" -->
Tijd voor reclame
Einde aanvullende informatie <!-- /role="complementary" -->
 
Inhouds informatie <!-- role="contentinfo" -->
Copyright Ik heb dit geschreven
Einde inhouds informatie <!-- /role="contentinfo" -->

Opmerkingen

  • Elke screenreader(versie) gaat hier momenteel anders mee om. Benamingen als "reeks" voor section en "inhouds informatie" voor de footer zijn nog voor verbetering vatbaar.
  • De bijkomende informatie is nuttig maar het is ook duidelijk dat men niet moet overdrijven.
  • Met een sneltoets kan je van gebied naar gebied springen. Je komt achtereenvolgens bij de banner, zoekgebied, navigatiegebied, reeks, hoofdgebied, aanvullende informatie en inhouds informatie. Zo kan je dus vrij snel naar de navigatie (drie keer op de sneltoets drukken) en naar de hoofdinhoud (5 keer drukken). In de toekomst komen er wellicht specifieke sneltoetsen om rechtstreeks naar het zoekveld, de navigatie of de hoofdinhoud te springen. Dit op voorwaarde dat websites de ARIA roles en sectioning elementen correct en consequent toepassen.

Enkel voor screenreaders?

De gemiddelde bezoeker zal het niet merken dat u een nav-element en/of ARIA roles gebruikt. Het zijn vooral screenreadergebruikers die hiermee geholpen zijn, maar ook toetsenbordgebruikers hebben baat bij een snelle manier om door een pagina te navigeren. Tabben van link naar link is hopeloos traag op websites met veel links. Helaas hebben browsers nog geen functionaliteit voorzien. Er is nu wel een add-on voor Firefox.

Hoe testen?

De net genoemde add-on voor Firefox is een prima testinstrument om te kijken of u de ARIA roles en sectioning elementen logisch heeft gebruikt. Als Firebug openstaat, wordt de regel code van de landmark automatisch gehighlight terwijl u navigeert met de sneltoetsen. Zo kunt u nagaan of u niets vergeten bent en of u niet overdreven heeft. Een alternatief is, testen met een screenreader.

Testresultaten

We hebben ondersteuning getest in vier screenreaders: VoiceOver voor Mac, Supernova, NVDA en Jaws voor Windows. De Windows-tests gebeurden in Internet Explorer 9. Eerst bekijken we ondersteuning van ARIA roles in een HTML4/XHTML-website, daarna testen we de ondersteuning van HTML5 sectioning elementen zonder ARIA roles en vervolgens met ARIA roles.

HTML4 of XHTML met ARIA roles
NVDA 2013.1.1, IE9 VoiceOver
OSX 10.8.4
SuperNova 13.03, IE9 JAWS11, IE8 JAWS13, IE9 JAWS14, IE9
<div role="banner"> Ondersteund Ondersteund Ondersteund Niet ondersteund Ondersteund Ondersteund
<div role="navigation"> Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
<div role="main"> Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
<div role="article"> Niet ondersteund Niet ondersteund Niet ondersteund Ondersteund Ondersteund Ondersteund
<div role="complementary"> Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
<div role="contentinfo"> Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
HTML5 zonder ARIA roles
NVDA 2013.1.1, IE9 VoiceOver
OSX 10.8.4
SuperNova 13.03, IE9 JAWS11, IE8 JAWS13, IE9 JAWS14, IE9
<header> Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund
<nav> Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund Ondersteund Ondersteund
<main> Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund
<section> Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund Ondersteund
<article> Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund Ondersteund Ondersteund
<aside> Niet ondersteund Ondersteund Niet ondersteund Niet ondersteund Niet ondersteund Ondersteund
<footer> Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund Niet ondersteund
HTML5 met ARIA roles
NVDA 2013.1.1, IE9 VoiceOver
OSX 10.8.4
SuperNova 13.03, IE9 JAWS11, IE8 JAWS13, IE9 JAWS14, IE9
<header role="banner"> Ondersteund Ondersteund Ondersteund Niet ondersteund Ondersteund Ondersteund
<nav role="navigation"> Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
<main role="main"> Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
<article role="article"> Niet ondersteund Niet ondersteund Niet ondersteund Ondersteund Ondersteund Ondersteund
<aside role="complementary"> Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
<footer role="contentinfo"> Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund

Reageer

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