Paginawijzigingen

Wat?

• Een actie van de gebruiker
• Veroorzaakt een dynamische verandering
• Binnen dezelfde webpagina

Voorbeelden

• Extra velden in formulier
• Knop die inhoud toont/verbergt
• Een overlay verschijnt
• Resultaten worden gefilterd
• Een bevestiging of foutmelding verschijnt
• Er verschijnen zoekresultaten
• Single page application

Toegankelijkheid

• Is de verandering voorspelbaar voor alle gebruikers?
• Hoe kunnen we de verandering duidelijk maken voor iedereen die geen overzicht heeft over het scherm?

Mogelijke technieken

• Doe niets
• Volg ARIA design patterns
• Verplaats focus naar nieuw verschenen info
• Kondig wijziging aan via live region
• Geef extra uitleg

Techniek 1: ARIA design patterns

• Sommige ARIA design patterns voegen semantiek toe die helpt om paginawijzigingen te begrijpen.
• Tabs
• Caroussel
• Disclosure = toon/verberg-component

Voorbeeld: disclosure

• = een knop die inhoud toont of verbergt.
• Zie artikel Inhoud tonen of verbergen
• Kan met summary/details
• Disclosure design pattern

aria-expanded

• = een ARIA attribuut dat je toevoegt aan de knop die de zichtbaarheid regelt
• om de status aan te geven
• aria-expanded="true" betekent "knop is uitgeklapt; inhoud is zichtbaar"
• aria-expanded="false" betekent "knop is ingeklapt; inhoud is verborgen"
• Het verduidelijkt de functie van de knop en maakt er een disclosure van.

Voorbeelden

• Uitklapmenu Unia
• Taalkeuze NMBS
• Menu in responsive versie AnySurfer

Opgelet

1. Juiste plaats
2. Geef altijd juiste status aan
3. Neutraal label
4. Juiste verbergtechniek
5. Logische volgorde in broncode

Juiste plaats

• Voeg het aria-expanded-attribuut toe aan de knop die toont/verbergt.
• Niet aan de container van de getoonde/verborgen inhoud.

Goed voorbeeld

<button class="menu-toggle-mobile" 
aria-expanded="false">
Menu
</button>

Fout voorbeeld

Vraag in FAQ met uitgeklapt antwoord:

<a data-toggle="collapse" href="#collapse01">
Vraag 1</a>
<div id="collapse01" class="panel-collapse" 
aria-expanded="true">

Juiste status

• aria-expanded is met juiste status aanwezig bij laden van pagina.
• Niet pas toevoegen als de status wijzigt.
• Status veranderen bij elke wijziging.

Neutraal label

• aria-expanded geeft status aan
• Label van knop hoeft dus geen actie aan te geven
• Niet: "toon menu" of "verberg zoekfunctie"
• Wel: menu of zoeken

Juiste verbergtechniek

• Verberg met display: none
• Niet met techniek die het beschikbaar houdt voor screenreaders (zoals class="sr-only" of "visuallyhidden")

Volgorde in broncode

• Eerst knop die zichtbaarheid regelt
• Meteen daarna de container met inhoud die al dan niet zichtbaar is.

Slecht voorbeeld

• Menu in responsive versie van Koninklijke Musea voor Schone Kunsten
• Uitgeklapte inhoud staat hoger in broncode dan menu-link.
• Screenreader- en toetsenbordgebruikers zullen niet "terugkeren".

Conclusie

De techniek met aria-expanded is geschikt als de nieuwe informatie op dezelfde plaats verschijnt.

Techniek 2: focus management

• Als de nieuwe info elders op de pagina verschijnt,
• Verplaats de focus er naartoe
• Artikel: learning to focus()

Focus management aandachtspunten

• Verplaats focus naar de container van de nieuw verschenen inhoud of het allereerste element daarbinnen.
• Voeg tabindex="-1" toe aan het element waar je de focus naartoe verplaatst.
• Inhoud laden via AJAX neemt wat tijd in beslag. Bouw een seconde vertraging in voordat je de focus verplaatst.

Voorbeeld: laad meer

• Zoekresultaten politiewebsite
• Toont tien zoekresultaat en een knop "laad meer".
• Die knop vervangt de eerste tien zoekresultaten door tien nieuwe.
• Knop "laad meer" blijft onderaan staan maar focus verplaatst van "laad meer" knop naar begin van nieuw verschenen info.

Voorbeeld: overlay

• Verschijnt bovenop actieve venster
• Niet de bedoeling om nog te interageren met achterliggend venster
• Bouw ze liefst als modaal dialoogvenster

Modaal dialoogvenster

• ARIA design pattern
• Voorbeeld
• Artikel: toegankelijke overlays

Focus management

• Bij openen: focus naar begin van nieuwe inhoud
• Focus beperkt tot overlay (toetsenbordval)
• Bij sluiten: terug naar component waarmee werd geopend

ARIA

• role="dialog"
• aria-modal="true" om de inhoud buiten het modale venster ontoegankelijk te maken
• Kan ook met aria-hidden="true", maar dat is omslachtiger en riskanter

Andere aandachtspunten

• Zichtbare focus
• Toegankelijke sluitknop
• Sluiten met ESC-toets

Conclusie

• Focus management is geschikte techniek als nieuwe inhoud elders verschijnt.
• En de gebruiker ermee moet interageren.
• Soms verschijnt er nieuwe inhoud waar de focus niet naartoe moet.

Techniek 3: live region

• = een container waarvan de inhoud kan wijzigen.
• Screenreader spreekt de gewijzigde inhoud automatisch uit

Voorbeeld: wachtwoordsterkte

Voorbeeld: waarschuwing

Technisch

• aria-live="polite"
• aria-live="assertive"
• Polite wacht tot screenreader is uitgesproken; assertive onderbreekt
• aria-live="off": container is tijdelijk geen live region.

Technisch

• Polite live region kan ook met role="status"
• Assertive live region kan ook met role="alert"
• Alert kan bij laden van pagina
• Screenreader meldt ook "waarschuwing".

Aandachtspunten

• Voordat inhoud wijzigt of verschijnt moet container al bekend zijn als live region.
• Vb. als je bij formulierveld dynamisch een foutmelding wil tonen, moet er bij het laden van de pagina een lege container zijn met aria-live="polite". Daarin injecteer je later de tekst.

Aandachtspunten

• Leest enkel voor; focus verplaatst niet.
• Geen mogelijkheid om wijziging te laten herhalen.
• Enkel voor korte info: vb. bij filter: enkel het aantal resultaten; niet de hele resultatenlijst
• Je neemt de controle over de screenreader over.

Niet gebruiken

• Als gewijzigde informatie niet belangrijk is: vb. niet gebruiken voor slideshow
• Als info snel wijzigt: vb. verstreken tijd van video
• Bij veel wijzigende info op een pagina: vb. realtime beurskoersen
• Invoervelden

Meer lezen

Artikel over live regions

Conclusie

• Live region kan nuttige techniek zijn om aandacht te trekken op gewijzigde info.
• Enkel als je daarmee niet moet interageren.

Techniek 4: extra uitleg

• Als er geen design pattern bestaat voor de widget die je bouwt,
• zal je de voorgaande technieken zo goed mogelijk gebruiken
• en soms extra (verborgen) uitleg toevoegen
• of extra koppen om het navigeren tussen onderdelen te vergemakkelijken.

Voorbeeld: dynamische zoekpagina

Onzichtbare tekst voor zoekveld:

Zodra u vijf letters invoert in het zoekveld, verschijnen er zoekresultaten onder de kop "Gevonden publicaties".

Voorbeeld: dynamisch filter

Voorzie een "onzichtbare" kop boven de kolom met filtermogelijkheden en eentje boven de resultaten.

Meerdere wijzigende items tegelijk "in het oog houden" op een scherm blijft een uitdaging voor wie geen overzicht heeft. Vb. webinar.