JavaScript/Anwendung und Praxis/zugängliche Dialog-Box

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Eine Dialog-Box ist ein neues Fenster, das sich über die Webseite legt, um eine Frage zu stellen, eine Eingabe abzufragen oder mehrere Optionen anzubieten. Während die Dialog-Box aktiv ist, ist die darunter liegende Webseite nicht aktiv und kann erst wiederverwendet werden, wenn die Dialog-Box geschlossen ist. Herkömmliche Dialog-Boxen vernachlässigen die Steuerung mit der Tastatur, die einerseits aktiv bleibt, andererseits nicht zum Öffnen benutzt werden kann.

In HTML5 wurde das dialog-Element eingeführt, dessen Browserunterstützung für einen Einsatz aber noch nicht gut genug ist. Dieses Beispiel verwendet das dialog-Element in Verbindung mit konventionellen HTML-Elementen, die durch ARIA-Attribute semantisch zugeordnet werden.

Inhaltsverzeichnis

[Bearbeiten] Anwendungsbeispiel

[Bearbeiten] HTML-Struktur

Beispiel ansehen …
<button onclick="toggleDialog('show');">Zeige die Dialog-Box</button>
 
<dialog tabindex="-1" role="dialog" aria-labelledby="myDialog">
    <button onclick="toggleDialog('hide');" class="close-button">OK</button>
    <button onclick="toggleDialog('hide');" class="close-button">Abbrechen</button>	
    <h3 id="myDialog">Beispiel</h3>
    <p>Dies ist eine zugängliche Dialog-Box, die Sie auch mit der Tastatur benutzen können.</p>
</dialog>
Das dialog-Element wird leider noch nicht durchgehend unterstützt, sodass wir es zwar verwenden können, seine Funktionalität aber mit JavaScript nachbauen müssen. Um Screenreadern, die die Semantik des nativen Elements nicht erkennen zu helfen, werden eine landmark-role und ein aria-Attribut aria-labelledby="myDialog" hinzugefügt.
dialog {
  display: none;
  z-index: 1002;
  background: #fffbf0;
  border: 1px solid #e7c157;
  border-radius: 0 .5em .5em;
  padding: .5em 1em;	
  width: 100%;
  height: auto;
}
 
[open="open"] {
    display: block;
}
 
@media (min-width: 30em) { 
  dialog {
    width: 17em; 
  }
}
Auch das Erscheinungsbild muss mit CSS festgelegt werden. Damit es ursprünglich ausgeblendet ist, erhält es ein display: none;. Der z-index: 1002; sorgt dafür, dass es im eingeblendeten Zustand im Vordergrund angezeigt wird.

Wenn das dialog-Element das Attribut open="open" erhält, kann es durch CSS-Selektoren sichtbar gemacht werden:

Beachten Sie: ARIA-Attribute können ab IE10 über das CSS selektiert werden. Wenn Sie ältere Versionen unterstützen müssen, können Sie anstelle von open='open' eine Klasse open einsetzen.

[Bearbeiten] JavaScript

Da die elementeigenen Methoden dialog.showModal() und dialog.close() in den meisten Browsern nicht funktionieren, erledigt nun die Funktion toggleDialog() diesen Job:

Beispiel ansehen …
var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground;
 
function showDialog(el) {
	lastFocus = el || document.activeElement;
	toggleDialog('show');
}
function hideDialog(el) {
	toggleDialog('hide');
}
function toggleDialog(sh) {
	dialog = document.querySelector('dialog');
	okbutton = document.getElementById('ok');
	pagebackground = document.getElementById('bg');
 
	if (sh == 'show') {
		dialogOpen = true;
		// show the dialog  
		dialog.setAttribute('open','open');
 
		// after displaying the dialog, focus an element inside it
		okbutton.focus();
 
		// only hide the background *after* you've moved focus out of the content that will be "hidden"
		pagebackground.setAttribute('aria-hidden','true');
 
	} else {
		dialogOpen = false;
		dialog.setAttribute('open','false');
		pagebackground.setAttribute('aria-hidden','false');
		lastFocus.focus(); 
	}
}
Wenn die Funktion toggleDialog() aufgerufen wird, erhält das dialog-Element mit dialog.setAttribute('open','open'); ein open-Attribut mit dem gleichnamigen Wert open. Wie oben gezeigt, wird so über CSS selektiert, dass der display von none auf block gestellt wird und so angezeigt wird.

[Bearbeiten] Zugänglichkeit

Die Dialogbox soll nicht nur mit Maus oder anderen Zeigegeräten, sondern auch mit der Tastatur bedient werden können. Durch die Verwendung semantisch richtiger Elemente wie den button-Elementen ist bereits sichergestellt, dass Benutzer die UI-Elemente mit der Tab-Taste erreichen und dann mit Enter auswählen können.

Beispiel ansehen …
document.addEventListener('focus', function(event) {
 
    var d = document.querySelector('dialog');
 
    if (dialogOpen && !d.contains(event.target)) {
        event.stopPropagation();
        d.focus();
    }
 
}, true);
 
 
document.addEventListener('keydown', function(event) {
    if (dialogOpen && event.keyCode == 27) {
        toggleDialog('hide');
    }
}, true);
addEventListener("focus", function(event) {} sorgt dafür, dass die geöffnete Dialog-box den Focus erhält. Bei einem Tab mit der Tabulator-Taste erhält der erste Button der Dialog-Box den Fokus.
Der zweite addEventListener weist dem keydown-Event eine bedingte Anweisung zu: Wenn die Taste mit dem keyCode 27 (die [ESC]-Taste) gedrückt wird, wird die Dialog-Box geschlossen.

[Bearbeiten] Siehe auch

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML