jQuery UI Dialog

Update 27 mei 2015: er is een meer recente blogpost over toegankelijkheid van dialoogvensters.

jQuery UI laat toe om op een eenvoudige manier een dialoogvenster te openen. Hier kan een melding instaan met of zonder buttons, een volledig formulier of nog andere content.

De standaard dialog geeft echter wat problemen voor zowel toetsenbord- als screenreadergebruikers. Een dialog wordt, net zoals een lightbox, geïnjecteerd in de broncode en komt via CSS 'over' je pagina heen te staan.

• Bij openen van de dialog, wordt de focus niet voor iedereen naar de dialog gebracht.
• Bij tabben kan je uit de dialog geraken maar er niet meer in.
• Als screenreader gebruiker tab je niet en kan je met je pijltjes buiten de dialog geraken.

Door enkele opties te configureren die standaard in de code bibliotheek zitten, wordt de dialog zo goed mogelijk bruikbaar voor iedereen.

modal

We zetten modal="true" zodat andere elementen in de pagina niet meer bereikbaar zijn met het toetsenbord. Je creëert als het ware een keyboard trap die ervoor zorgt dat je in de dialog blijft.

Sommige screenreadergebruikers geraken echter wel uit de dialog. Afhankelijk van de screenreader software, tab je niet door de pagina maar gebruik je pijltjes om door de pagina heen te gaan. Dit wordt niet opgevangen door de JavaScript. Dit is echter geen ramp. Als de focus verplaatst wordt naar de dialog, heeft de gebruiker de boodschap gelezen en kan hij ook terug gaan om bijvoorbeeld de Ok button te gebruiken die in het button paneel zit.

Focusbaar element

Het is heel belangrijk dat de focus verplaatst wordt naar de dialog als de gebruiker in de pagina op een link klikt of een andere actie onderneemt waardoor een dialog geopend wordt. Een blinde of slechtziende gebruiker kan denken dat een link niet werkt omdat er op het eerste zicht niets gebeurd. Een slechtziende gebruiker met vergrotingssoftware, kan het venster mischien niet zien. Gelukkig zit het verplaatsen van de focus standaard in jQuery UI.

aria-hidden

ARIA is een techniek specifiek voor hulpmiddelengebruikers. Het geeft hen meer informatie over elementen. In deze context is het nuttig om aria-hidden te gebruiken.

Aria-hidden is een booleaanse waarde. Aria-hidden true wil zeggen dat een element onzichtbaar is voor een screenreadergebruiker. Aria-hidden false maakt het zichtbaar.

Door de content (hier een div met id="wrap") op true te zetten, wordt de inhoud onzichtbaar. De dialog zelf plaatsen we achteraf op aria-hidden="false" zodat de dialog zelf niet onzichtbaar blijft. Wat we niet mogen vergeten, is bij het sluiten deze waarden om te draaien: de content wordt opnieuw zichtbaar en de dialog mag verdwijnen.

Codevoorbeeld

Onderstaande code staat online in een voorbeeld.

<a href="#" id="opener">Open het dialoogvenster.</a>
<div id="dialog">
  <!-- autofocus zorgt dat jQuery UI de focus naar dit element brengt
       tabindex -1 zorgt ervoor dat de h1 focusbaar is -->
  <h1 autofocus tabindex="-1" >Dialog title</h1>
  <p>Dialog content.</p>
</div>

$("#dialog").dialog( {
  // de dialog wordt niet getoond bij laden van de pagina
  autoOpen : false,
  // hij kan niet versleept worden
  draggable: false,
  // we voegen een sluit button toe
  buttons: {
    Close: function() {
      $( this ).dialog( "close" );
    }
  },
  open: function() {
    // we willen geen title venster met sluit button
    $(".ui-dialog-titlebar").hide();
    // content mag verborgen zijn voor screenreader gebruikers
    $("#wrap").attr("aria-hidden", "true");
    // de dialog zelf natuurlijk niet
    $(".ui-dialog").attr("aria-hidden", "false");
  },
  close: function() {
    // bij het sluiten moet de content opnieuw zichtbaar zijn
    $("#wrap").attr("aria-hidden", "false");
    // de dialog mag volledig onzichtbaar zijn
    $(".ui-dialog").attr("aria-hidden", "true");
  },
  // we zorgen voor de keyboard trap
  modal: true
});
// de link met id opener, opent de dialog
$("#opener").click(function(e) {
  // de pagina scrollt niet tot boven bij het openen van de link
  e.preventDefault();
  $("#dialog").dialog("open");
});

Besluit

jQuery UI Dialog is met enkele kleine aanpassingen goed bruikbaar voor zoveel mogelijk gebruikers. Een screenreader zoals Supernova heeft wel problemen met het verplaatsen van de focus en blijft in ons voorbeeld op de openen link.

Een muisgebruiker kan bij een dialog niet meer interageren met andere elementen op de pagina. Idealiter is dit voor een toetsenbord- en/of screenreadergebruiker exact hetzelfde.

Een mooi voorbeeld is online banking. Als je een melding krijgt dat je sessie zal verlopen, wil je dat de gebruiker niets anders kan dan op Ok klikken in de dialog om zijn sessie te verlengen. Dit moet voor een muisgebruiker en toetsenbordgebruiker hetzelfde zijn. Door de eerder getoonde configuratie van de jQuery UI Dialog, bereiken we dit resultaat:

Openen dialog

• Verplaatsen van de focus in de dialog.
• Aria-hidden toepassen op de content (true) en dialog (false).

Sluiten dialog

• Verplaatsen van de focus naar de content.
• Aria-hidden omwisselen: content (false) en dialog (true).