AnySurfer home
u bent hier
  1. Home
  2. Documentatie
  3. Componenten
  4. Overlays

Overlays

Laatst gewijzigd op

Modale dialoogvensters, ook overlays genoemd, zijn componenten die verschijnen bovenop de inhoud van het actieve venster. Als een modaal dialoogvenster is geopend, kan men niet meer interageren met de rest van de pagina en de inhoud buiten het modale venster is visueel in de achtergrond geplaatst. Dat is het verschil met niet-modale vensters.

Modale dialoogvensters kunnen uiteenlopende inhoud bevatten: een gewone melding, een fotoalbum of een inschrijvingsformulier, om maar enkele voorbeelden te noemen.

We concentreren ons hier op het verwachte gedrag van een toegankelijk modaal dialoogvenster, zoals beschreven in de ARIA authoring practice voor een modaal dialoogvenster.

Focus management bij openen

Bij het openen, verplaatst de focus naar het modale venster. Zonder die focusverplaatsing weet een screenreadergebruiker niet dat er iets is gebeurd. Hij denkt dat de knop niet werkt. Een gebruiker die met het toetsenbord navigeert, moet tabben langs alle elementen van de pagina voordat hij het modale venster bereikt omdat dit meestal aan het einde van de broncode staat.

Verplaats de focus naar het container element ( <div> ) van het modale venster. De focus kan je verplaatsen via de JQuery-methode .focus(). De <div> van de overlay waar de focus zich naartoe zou moeten verplaatsen, kan normaal gezien geen focus krijgen. Dat kan je oplossen door het attribuut tabindex="-1" toe te voegen. Tabindex="-1" plaatst de <div> niet in de tabvolgorde, maar laat toe dat hij de focus kan krijgen via javascript.

Toetsenbordval

Meestal vermijden we toetsenbordvallen, maar in het geval van een modaal venster mag de focus het modale venster niet verlaten zolang het zichtbaar is. Het is immers niet de bedoeling dat gebruikers kunnen interageren met de rest van de pagina. De toetsenbordval is dus noodzakelijk.

Er zijn twee manieren om te navigeren met het toetsenbord: met de tabtoets en, enkel voor de screenreadergebruikers, met pijl omlaag.

  • Gebruik Javascript om een lus van tabstops te creëren binnen het dialoogvenster. Voorbeeld: keep-focus op Github.
  • Om een screenreadergebruiker te beperken tot het geopende dialoogvenster, gebruik je het attribuut aria-modal="true" op het element dat de overlay bevat.

Noot: Voordat er ondersteuning was voor aria-modal, werd een andere techniek gebruikt om de navigatie met een screenreader binnen het modale venster te houden. De techniek plaatste een attribut aria-hidden op alle inhoud (header, main, footer) die op hetzelfde niveau staat als het dialoogvenster. Screenreaders negeren de elementen met aria-hidden = "true" omdat die inhoud zich niet in de accessibility tree bevindt.

Deze techniek is valide maar gevaarlijker. Als je het attribuut op een parent-element plaatst, zoals <body>, wordt de hele pagina onzichtbaar. Je moet dit attribuut via JavaScript ook togglen van aria-hidden="false" naar aria-hidden="true" bij het openen van het dialoogvenster. Doe het omgekeerde voor de <div> van het dialoogvenster.

Het modale venster sluiten

  • Geef de gebruiker de mogelijkheid om het venster te sluiten met de toets ESC.
  • Als je een sluit-knop voorziet, zorg er dan voor dat hij toegankelijk is met het toetsenbord en dat hij een toegankelijke naam heeft.
  • Bij het sluiten van het dialoogvenster, keert de focus terug naar het element (knop) dat het modale venster heeft geopend.

Noodzakelijke ARIA-attributen

Als je nog niet vertrouwd bent met ARIA, lees dan onze inleiding tot ARIA.

  • Voeg role="dialog" toe aan het element dat de overlay bevat.

    Het element <dialog> is nog niet ondersteund door browsers en screenreaders. Door een <div role="dialog"> te gebruiken, wordt de div beschouwd als een modaal dialoogvenster door de assistive technologies.

  • Gebruik aria-label of aria-labelledby om een naam te geven aan de overlay.

    Als er een titel zichtbaar is in het modale venster, gebruik aria-labelledby om naar die titel te verwijzen.

  • Gebruik aria-modal="true" op het element dat de overlay bevat om de hele inhoud buiten het modale venster ontoegankelijk te maken, terwijl het geopend is.

Andere aandachtspunten

Bovenstaande punten zijn specifiek voor modale dialoogvensters. Maar vergeet niet de andere goede praktijken voor toegankelijkheid.

De focus moet goed zichtbaar zijn tijdens het tabben. Als dat niet het geval is, zal een gebruiker die met het toetsenbord navigeert, niet weten op welk element hij zich bevindt.

Dialoogvensters hebben vaak een sluit-knop in de vorm van een "x" zoals de sluit-knoppen van vensters van het besturingssysteem. Zorg ervoor dat die knop in de tabvolgorde komt en begrijpelijk is voor een screenreadergebruiker.

«x» is geen betekenisvolle naam . Geef een de knop een betekenisvolle naam, bijvoorbeeld 'Sluiten' (<button>Sluiten</button>).

Daarvoor bestaan verschillende technieken, bijvoorbeeld:

  • Gebruik gewoon de tekst 'Sluiten' in plaats van een 'x'.
  • Voeg aan de knop een aria-label="sluiten" toe.
  • Gebruik een afbeelding met alt="sluiten"
  • Gebruik een achtergrondafbeelding met een verborgen tekst in de knop
  • Plaats de letter 'X' in een span met aria-hidden="true" en voeg een span met een verborgen tekst toe in de knop

Voorbeelden

Reacties

Reageer als eerste