ARIA live regions

Bart Simons op 13/09/2017 - reageer als eerste

Paginawijzigingen zijn een probleem voor blinden en al wie geen overzicht heeft over het scherm. De wijziging kan het gevolg zijn van een actie: een foutmelding verschijnt wanneer je een formulier verzendt. Of de wijziging kan automatisch zijn: de koers van een beursaandeel wordt om de 30 seconden bijgewerkt. De screenreader synchroniseert continu met het DOM en pikt de wijziging dus wel op, maar de gebruiker wordt hier standaard niet van geïnformeerd. Wie het scherm niet ziet, weet daardoor niet dat er iets is gewijzigd. De focus van een screenreader kan maar op 1 plaats tegelijk zijn. In sommige gevallen kan een ARIA live region hierbij helpen.

Enkele goede voorbeelden

  • Je boekt een vlucht met Brussels Airlines en krijgt een overzicht van de mogelijkheden. Via radio buttons selecteer je een vlucht. Telkens je een andere vlucht aanvinkt, verandert de totale prijs van de reis. Om die gewijzigde prijs te bekijken, moet een screenreadergebruiker er naartoe navigeren. Als hij een andere keuze wil maken, moet hij terugkeren naar het overzicht enz. De prijs is hier echter een live region en wordt daardoor automatisch uitgesproken van zodra hij verandert.

  • Als je een tweet opstelt in de Twitter-website verschijnt een teller in beeld van zodra er nog maar 20 karakters beschikbaar zijn. Een blinde zal die niet opmerken, maar dankzij de live region hoor je deze informatie toch.
  • De zoekresultatenpagina van Gov.uk bevat een filter. Telkens je een optie aan- of uitvinkt, verandert het aantal gevonden resultaten. Ook dit blokje is een live region waardoor de screenreader het nieuwe aantal resultaten uitspreekt.

Hoe werkt het?

Met het attribuut aria-live maakt u van een blok een live region. In dit voorbeeld wijzigt de tekst bovenaan als je op één van de steden klikt. De gewijzigde tekst zit in een live region en screenreaders zullen die dan automatisch uitspreken.

<div id="result" aria-live="polite">U hebt Brussel gekozen.</div>

screenshot aria-live demopagina

Mogelijke waarden voor aria-live zijn:

  • aria-live="assertive": de screenreader spreekt de gewijzigde tekst onmiddellijk uit. Als hij bezig was andere tekst uit te spreken, wordt die onderbroken.
  • aria-live="polite": de screenreader zal de gewijzigde tekst uitspreken van zodra daar ruimte voor is. Dit is de meest geschikte waarde voor een live region.
  • aria-live="off": dit zorgt ervoor dat een blok (tijdelijk) geen live region is.

Standaard zal een screenreader enkel de gewijzigde tekst binnen een live region voorlezen. Als een chat-venster een live region is, zal je dus telkens enkel de laatst toegevoegde boodschap horen en niet alle berichten die al in het blok stonden. Wilt u daarvan afwijken en toch altijd het hele blok laten voorlezen, voeg dan aria-atomic="true" toe. Een mogelijk voorbeeld is de playlist op een radiowebsite: zonder aria-atomic of met aria-atomic="false" zal wanneer een nieuw nummer start, enkel de naam van de artiest en de naam van het volgend nummer worden uitgesproken. De tekst "Volgend nummer" is ongewijzigd en wordt niet voorgelezen.

<p aria-live="polite">
Volgend nummer: <span id="nextsong">Als ze lacht - Yevgueni</span></p>

Door aria-atomic="true" toe te voegen, wordt de volledige inhoud voorgelezen, inclusief de ongewijzigde inhoud "Volgend nummer". Op die manier is er geen verwarring met het nummer dat speelt.

<p aria-live="polite" aria-atomic="true">
Volgend nummer: <span id="nextsong">Als ze lacht - Yevgueni</span></p>

Wil je nog meer controle over welke onderdelen binnen de live region de screenreader uitspreekt? Voeg dan aria-relevant toe. In dit voorbeeld zal de screenreader enkel de toevoegingen aan de live region uitspreken. Een mogelijke toepassing is de deelnemerslijst van een webinar:

<ul id="participants"
aria-live="polite" aria-relevant="additions">
<li>Pierre Jourdain</li>
<li>Gijs Veyfeyken</li>
</ul>

Als in een live region zeer veel wijzigt, kan je die tijdelijk aria-busy="true" geven. Dit onderdrukt de meldingen maar de screenreader verzamelt wel alle wijzigingen. Als u het attribuut daarna verwijdert of wijzigt naar aria-busy="false", leest de screenreader alle wijzigingen achter elkaar voor.

Impliciete live regions

Enkele ARIA roles maken van een blok impliciet een live region. De meest bekende is role="alert". Het blok met deze role wordt impliciet een assertieve live region. De screenreader zal deze informatie dus onmiddellijk voorlezen. Voorbeeld:

<div role="alert">
Het maximum aantal is bereikt.
</div>

Beperkingen

Het enige wat er met een live region gebeurt, is dat een screenreader wijzigingen binnen het blok voorleest. De focus verplaatst zich niet. Dus als de nieuw verschenen informatie interactie van de gebruiker verwacht, dan is focusmanagement een beter idee dan een live region.

De screenreadergebruiker heeft geen controle over de uitgesproken informatie. Als hij (per ongeluk) een toets aanraakt, wordt de aankondiging onderbroken en is er geen manier om de informatie opnieuw te beluisteren.

Het kan erg frustrerend zijn voor een screenreadergebruiker dat de website-ontwikkelaar de controle over de screenreader overneemt en allerlei meldingen forceert. We zagen ooit een slideshow die als live region was gemarkeerd. Die pagina is in de praktijk onbruikbaar voor screenreadergebruikers omdat elke 3 seconden nieuwe informatie wordt voorgelezen zonder dat je daarom vroeg en je kunt het niet uitschakelen.

Tips voor het gebruik

  • Het element waarop aria-live staat, moet aanwezig zijn voor de wijziging gebeurt. Bijvoorbeeld de lege div <div aria-live="polite"></div>. Als de div pas aangemaakt wordt op het moment van de wijziging, werkt het niet.
  • Wees erg spaarzaam met live regions. Gebruik ze enkel voor paginawijzigingen die relevant zijn voor een screenreadergebruiker.
  • Gebruik ze enkel voor korte teksten.
  • Geef anderzijds wel genoeg context: in het voorbeeld van Brussels Airlines: niet enkel de gewijzigde prijs laten uitspreken maar erbij zeggen dat het om de totale prijs gaat.
  • Bij formuliervalidatie: ok om te zeggen dat er foutmeldingen zijn, maar focusmanagement is nog steeds nodig om naar het veld te springen om het probleem op te lossen

Bronnen

Reageer

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