Ajax und Barrierefreiheit

Eine weitere Hürde bei Ajax stellt die Zugänglichkeit dar. Assistive Technologien wie Screenreader müssen über HTML-Änderungen gesondert informiert werden, damit sie diese Inhalte vorlesen können. Kleinere HTML-Änderungen ohne Interaktionsinhalt, wie beispielsweise eine Änderung eines Warenkorbs, können durch die Aria-Liveregionen zugänglich gemacht werden [6]. Hierbei wird einfach das HTML-Element, dessen Inhalt sich ändert, mit dem Attribut „aria-live="polite"“ versehen. Hierdurch wird bei einer DOM-Änderung dieses Bereichs der neue Inhalt vorgelesen, ohne dass der Nutzer seinen aktuellen Ort/Fokus in der Seite ändert.

Bei größeren Bereichen und jenen, in denen Interaktionselemente wie Links oder Formulare vorhanden sind, sollte mit der DOM-Methode „focus“ die aktuelle Position im Dokument verschoben werden [7]. Die focus-Methode sollte hierbei innerhalb der setTimeout-Methode erfolgen. Nativ nicht fokusierbare Elemente können mit dem tabindex-Attribut fokusierbar gemacht werden.

//success-Handler
myApp.onSuccess = function(content, status){
	$('#main').queue(function(){
		$(this)
			.html(content).fadeTo(400,1).dequeue().trigger(' HTMLchange')
			.parent().removeClass('busy')
			//Vorsicht: focus(1) ist ein a11y-Feature von jQuery UI,
			//welches setTimeout verwendet
			.find(':header:first').attr('tabindex', '-1').focus(1)
		;
	});
};

Der Autor

Alexander Farkas arbeitet bei der Aperto AG in Berlin als Frontend-Developer mit Schwerpunkt DOM-Scripting, liebt und hasst Webstandards, interessiert sich für Zugänglichkeit, Best Practices und Usability.