Pornöse JavaScript GUIs, die doch barrierefrei sind

Geschrieben von Marc – 14. Januar 2011

Mit Prototype, Scriptaculous, jQuery und Konsorten lassen sich wunderbare Interfaces zaubern, herrlich interaktiv mit tollen Effekten und vorallem wesentlich schneller durch den Einsatz von AJAX. Doch wo bleibt dabei die Barrierefreiheit, die ich übrigens im Netz für sehr wichtig halte, nicht nur weil auch blinde Menschen surfen, sondern weil eine barrierefreie Seite automatisch von jedem Endgerät besser gelesen werden kann.

JavaScript ist alles andere als barrierefrei, denn die Braille Browser, die von blinden Menschen benutzt werden, beherrschen kein JavaScript. Aber: Wir können trotzdem GUIs mit AJAX und jede Menge Eyecandy programmieren und der shit läuft trotzdem auch ohne JavaScript. Im Grunde ist es sogar kein großer Aufwand und bekanntlich führen sogar mehrere Wege zum Ziel. Den Weg, den ich immer gehe, den möchte ich mal kurz vorstellen.

Vorweg: Nicht notwendig, aber hilfreich ist der Einsatz eines Template Systems, wie z.B. Smarty. Da ich Smarty aber ziemlich unhandlich finde, habe ich mir seinerzeit mal eine eigene Template-Klasse geschrieben, mir der ich gut zurecht komme.

Erstmal zum grundlegenden Prinzip: Ein AJAX Request wird in der Regel durch eine onclick Aktion oder über das href Attribut eines Links ausgelöst. Soll das Ganze auch ohne JavaScript noch funktionieren muss im href Attribut ein Link stehen, der die Aktion ohne Einsatz eines asynchronen Requests auslöst, im onclick steht der Aufruf des AJAX Requests und danach, ganz wichtig, “return false”.

Ein Beispiel für einen solchen Link:

<a href="index.php?action=show_entry&entry_id=23" onclick="ajax_request( 'action=show_entry&entry_id=23&ajax=true', 'contentdiv' ); return false;">Zeige Eintrag</a>

Ist JavaScript beim Klicken des Links nicht aktiv, wird der Link regulär aufgerufen, mit Hilfe von PHP entsprechend ausgewertet und das benötigte HTML erzeugt. Ist JavaScript aktiv, dann wird der AJAX Request gestartet und das reguläre Verfolgen des Links im href Attribut durch “return false” unterbunden. An PHP wird mittels Parameter “ajax=true” übermittelt, dass nicht das vollständige HTML zu erzeugen ist, sondern nur das was für den Inhaltsbereich benötigt wird.

Das klingt nun erstmal so, als wäre es sehr aufwändig, aber mit einem Template System ist es ein Kinderspiel. Ein wenig PHP Pseudocode dazu:

	// Auswahl des Templates
	if( empty( $_REQUEST[ 'ajax' ] ) )
	{
		$content = new template( 'templates/tpl_main.html' );
		
		$menu = new template( 'templates/tpl_menu.html' );
		$menu -> finish();
		
		$sidebar = new template( 'template/tpl_sidebar.html' );
		$sidebar -> finish();
		
		$content -> set( 'menu', $menu -> get_html() );
		$content -> set( 'sidebar', $sidebar -> get_html() );
	}
	else
	{
		$content = new template( 'templates/tpl_ajax.html' );
	}

	// Erzeugen und einsetzen des Inhalts der gewünschten Aktion
	if( $_REQUEST[ 'action' ] == 'show_entry' )
		$content -> set( 'content', show_entry( intval( $_REQUEST[ 'entry_id' ) ) );

	// Template rendern und ausgeben
	$content -> finish();
	echo $content -> get_html();

Im Prinzip ist es also ganz einfach: Ist der Parameter “ajax” leer, dann wird mittels des Template Systems die vollständige Seite zusammengebaut. Kommt der Request per AJAX, dann wird nur der benötigte Teil ausgegeben und mittels JavaScript in das entsprechende Div gesetzt. Im Prinzip also doch einfacher, als man vermutet.

Auch Formularübergaben können so sehr einfach sowohl per AJAX, als auch regulär abgesendet werden:

<form name="entryaddform" id="entryaddform" action="index.php" method="post">
<input type="hidden" name="action" id="entryaddform_action" value="entry_add"/>
<input type="hidden" name="ajax" id="entryaddform_ajax" value=""/>

<fieldset>
	<legend>Eintrag anlegen</legend>

	<div>
		<label for="entry_titel">Bezeichnung des Eintrag</label>
	</div>
	<div>
		<input type="text" name="entry_titel" id="entry_titel" size="40"/>
	</div>

</fieldset>

<input type="submit" value="Speichern" onclick="$('entryaddform_ajax').value = 'true'; ajax_form( 'entryaddform' ); return false;"/>

</form>

Auch hier ist es wieder sehr einfach: Genau wie beim Link, liegen auf der onclick Aktion des Submit Buttons die entsprechenden JavaScript Anweisungen, um das Hidden Field “ajax” mit einem Wert zu füllen, das Formular asynchron abszusenden und um schlussendlich das reguläre Senden des Formulars mit “return false” zu unterbinden. Ist JavaScript nicht aktiv, wird das Formular reguläre mit leerem Parameter “ajax” abgesendet.

Es ist also tatsächlich relativ einfach eine moderne Webanwendung barrierefrei zu gestalten.

(368x gelesen)

Email

Verkürzter Link: http://wp.me/pGiiJ-8v

Hinterlasse eine Antwort