Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

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.

Anwendungsbeispiel[Bearbeiten]

HTML-Struktur[Bearbeiten]

Beispiel ansehen …
<button id="open-dialog">Zeige die Dialog-Box</button>

<dialog role="dialog" aria-labelledby="dialog-heading">
    <button id="close-dialog">Schließen</button>	
    <h2 id="dialog-heading">Info</h2>
    <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.
Bei einer Implementierung ist geplant, ein geöffnetes dialog-Element z.B. durch das Absenden eines Formulars automatisch zu schließen. Bei dieser Info-Box benötigen wir dafür einen Schließen-Button mit der id close-dialog.
dialog {
  display: none;
  position: relative;
  z-index:1002;

}

dialog[open="open"] {
    display: block;
}

@media (min-width: 30em) { 
  dialog {
    width: 20em; 
  }
}
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 über einen CSS-Attributselektor ausgewählt und mit display: block; sichtbar gemacht werden.

JavaScript[Bearbeiten]

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

Beispiel ansehen …
document.querySelector('#open-dialog').addEventListener('click', toggleDialog);
	
  ...
  
function toggleDialog(){ 
	var dialog = document.querySelector('dialog'),
    	closebutton = document.getElementById('close-dialog'),
    	pagebackground = document.querySelector('body');
			
	if (!dialog.hasAttribute('open')) {
		// show the dialog 
		dialog.setAttribute('open','open');
		// after displaying the dialog, focus the closebutton inside it
		closebutton.focus();
		closebutton.addEventListener('click', toggleDialog);
		...
	}
	else {		
 		dialog.removeAttribute('open');  
		var div = document.querySelector('#backdrop');
		...
	}
}
Die Funktion toggleDialog () wird mit einem Klick auf den Button mit der id open-dialog aufgerufen.
Die Funktion überprüft mit hasAttribute das Vorhandensein, bzw. durch den logischen Operator ! das Fehlen des open-Attributs. Wenn es fehlt, erhält das dialog-Element mit dialog.setAttribute('open','open'); ein open-Attribut mit dem gleichnamigen Wert open. Wie oben gezeigt, wird dann über CSS selektiert, dass der display von none auf block gestellt wird und so angezeigt wird.

backdrop-Filter[Bearbeiten]

Das Standardverhalten des dialog-Elements beinhaltet, dass der Seitenhintergrund mit einem durchscheinenden Overlay verdunkelt wird. Das kann durch durch das Pseudoelement ::backdrop mit CSS festgelegt werden:

Beispiel ansehen …
dialog::backdrop, #backdrop {      
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);    
}
Zwischen Dokument und der geöffneten Dialog-Box befindet sich nun eine durchscheinende Schicht, die einen Zugriff auf das darunterliegende Dokument solange verhindert, bis die Dialog-Box geschlossen ist.
function toggleDialog(){ 
	...		
	if (!dialog.hasAttribute('open')) {
		...		
		var div = document.createElement('div');
		div.id = 'backdrop';
		document.body.appendChild(div); 
	}
	else {		
    	...
		var div = document.querySelector('#backdrop');
		div.parentNode.removeChild(div);
		lastFocus.focus(); 
 	}
}
Da die Browerunterstützung für das ::backdrop-Pseudoelement noch schlechter als für dialog ist, wird nun mit createElement ein div mit der id backdroperzeugt, bzw. beim Schließen der Dialog-Box mit removeChild wieder entfernt.

Zugänglichkeit[Bearbeiten]

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 …
function toggleDialog(){ 
	...
	closebutton = document.getElementById('close-dialog');
			
	if (!dialog.hasAttribute('open')) {
		dialog.setAttribute('open','open');
		// after displaying the dialog, focus the closebutton inside it
		closebutton.focus();
		closebutton.addEventListener('click', toggleDialog);
		// EventListener für ESC-Taste
		document.addEventListener('keydown', function(event) {
			if (event.keyCode == 27) {
				toggleDialog();
			}
		}, true);			
	}
	else {		
 		dialog.removeAttribute('open');  
		...
		lastFocus.focus(); 
	}
}
closebutton.focus sorgt dafür, dass der Schließen-Button der geöffneten Dialog-Box den Focus erhält. Bei einem Klick mit der Enter-Taste wird erneut die Funktion toggleDialog aufgerufen.

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 ebenfalls die Funktion toggleDialog aufgerufen.

In beiden Fällen wird beim Überprüfen auf das Open-Attribut festgestellt, dass es existiert und deshalb sowohl das Attribut als auch das div für den backdrop entfernt und damit die Dialog-Box geschlossen.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]