Anreicherung meiner Webseite mit WAI-ARIA

• 11 March 2010

Als ich meine Webseite und mein Blog einem Relaunch unterzog war mir klar, daß das Endergebnis nicht in Stein gemeißelt war. Es sollte es auch nicht sein. Natürlich kann man oft an einer Webseite Verbesserungen und Veränderungen vornehmen. Als eine der Verbesserungen plante ich von Anfang an die Einführung von WAI-ARIA ein. Mit diesem gar nicht mehr so neuen Webstandard kann man Screenreadern Feedback u.a. bei dynamischen Elementen der Webseite geben. Da ich hin und wieder Elemente zusammengeklappt lade und diese aufklappbar sind, war es in meinen Augen notwendig, Screenreadern einen Hinweis darauf zu geben.

Marco Zehe hat in seinem Blog freundlicherweise beschrieben, welche Elemente welche Attribute bekommen müssen. Diese Technik ist nur sinnvoll und notwendig beim Einsatz von Javascript. Ich möchte im Folgenden beschreiben, welche Änderungen ich vorgenommen habe, um das Ziel zu erreichen. Die Klapplisten haben drei zu beachtende Aspekte:

1. Die Listencontainer sollen zusammengeklappt sein, wenn die Seite läd. Dies soll aber nur dann passieren, wenn Javascript aktiv ist, denn schließlich benötige ich Javascript zum Öffnen der Container.
2. Die Container sollen separat auf- und zuklappbar sein. Es soll keine gegenseitige Abhängigkeit herrschen.
3. Das Auf- und Zuklappen der Listen soll sich dem Screenreader mitteilen.

Es versteht sich von selbst, daß der Code einfach, semantisch und logisch sein soll.

Wenn die Seite läd, lasse ich mittels Javascript eine Klasse js an das HTML-Element hängen:

<script type="text/javascript"> document.documentElement.className += "js"; </script> 

Danach sorge ich mittels CSS dafür, daß die betreffenden Listen ausgeblendet sind. Durch die Kaskade über die Klasse js sorge ich dafür, daß die Listen nur im Falle der Existenz von Javascript ausgeblendet werden. Denn nur dann haben sie eine Chance, wieder eingeblendet zu werden.

<style type="text/css" media="screen"> 
	.js .toggle > ul { display: none;}
</style>

Die Container mit den Listen sind wie gewünscht einfach und logisch aufgebaut, was angesichts des einfach strukturierten Inhalts auch kein Wunder ist. Ein DIV-Container umfaßt eine Überschrift und eine Liste. Der Container wird benötigt, um den Kontext für das Javascript zu schaffen und für den Rahmen, der den Inhalt optisch zusammenhält. Die Überschrift ist zusätzlich noch der Auslöser für die Klappfunktion. Der eigentliche Inhalt wird in einer Liste transportiert. Das ist allerdings kein Muss.

Ich nutze jQuery für die Klappfunktion. In seiner ursprünglichen Form - ohne die WAI-ARIA-Erweiterungen - sah das Skript folgendermaßen aus:

$('.toggle h3').click(function(){
	$(this).siblings('ul').slideToggle();
	$(this).toggleClass('zuklappen');
})

Der Code sollte einfach zu verstehen sein. Bei jedem Klick auf eine Überschrift, die sich unter einem Element mit der Klasse toggle befindet, wird das direkt folgende Geschwisterelement, das eine ungeordnete Liste sein muss, auf- oder zugeklappt, je nachdem, in welchem Status es sich befindet. Zusätzlich wird an der Überschrift die Klasse zuklappen hinzugefügt oder entfernt. Die toggle-Funktionen bei jQuery sind einfach und elegant benutzbar. Wegen der WAI-ARIA-Erweiterung mußte ich den Code ein wenig umschreiben und erweitern. Herausgekommen ist folgender Code:

$('.toggle h3').each(function() {
	var thingy = $(this);
	var sibid = thingy.next().attr('id');
	thingy.attr({
                'aria-expanded': 'false', 
                'aria-controls': sibid
            })
	thingy.click(function() {
		$(this).siblings().slideToggle('fast', function(){
			if(!(thingy.attr('aria-expanded') == 'true')) {
				thingy.attr('aria-expanded', 'true');
			} else {
				thingy.attr('aria-expanded', 'false');
			}
		});
	});
});

Die oben genutzte kurze Version reichte nicht mehr, da sie nur auf Klick Dinge tut. Mittels jQuery sollten aber auch unabhängig von der konkreten Aktion Attribute zu speziellen Elementen hinzugefügt werden. Also gehe ich erst mit der Funktion each() alle Überschriften in den Klappboxen durch. Bei diesem Durchgang werden den Überschriften zwei Attribute mit passenden Parametern hinzugefügt. Ein Parameter ist der Inhalt der ID der folgenden Liste. Diese ID wird in einer Variable gespeichert und dann zugewiesen. Bei Klick auf eine Überschrift prüfe und ändere ich dann den Inhalt des Attributes aria-expanded.

Die so gefundene Lösung ist zwar eindeutig komplexer, als die ursprüngliche Lösung. Sie ist aber noch immer kein Hexenwerk. Mit ein bischen mehr Mühe habe ich so eine weitere kleine Barriere meiner Webseite entfernt. Sicherlich werde ich noch ein paar weitere kleine Details finden, die ich u.a. mit WAI-ARIA verbessern kann. Ich denke, daß diese Lösung auch bei Deinem nächsten Projekt nützlich sein kann.

• ← Previous
  Aufpassen bei @font-face
• Next →
  Weitere WAI-ARIA-Verbesserungen