Dynamische FAQ-Seite – Eine Lektion in Barrierefreiheit und Progressive Enhancement

Die Idee ist, eine Frage-und-Antwort-Seite zu erstellen, deren Funktionalität durch JavaScript (jQuery) erweitert wird. Jede Frage wird in einem Feld mit einem Anhänger am unteren Rand angezeigt. Wenn man auf den Anhänger klickt, gleitet dieser heraus und enthüllt ein weiteres Feld mit der Antwort.

Demo anzeigen   Dateien herunterladen

Überlegungen

Dies ist keineswegs eine schwierige Aufgabe, besonders mit jQuery. Aber dieses Beispiel ist hervorragend geeignet, um die Auswirkungen dessen, was wir tun werden, zu bedenken. Unsere Idee berücksichtigt die Mehrheit der Besucher der Website, die einen Standardbrowser mit aktiviertem JavaScript verwenden. Aber wir müssen auch diejenigen berücksichtigen, die einen nicht standardmäßigen Browser wie einen Screenreader verwenden oder die das Web mit deaktiviertem JavaScript durchsuchen.

Kein JavaScript

In unserem voll funktionsfähigen Beispiel sind die Antworten nicht sichtbar, bis auf den Antwort-Anhänger geklickt wird. Es gibt verschiedene Möglichkeiten, dies zu erreichen, aber wir sollten darauf achten, unser Verbergen mit JavaScript durchzuführen, sodass bei deaktiviertem JavaScript die Antworten nicht verborgen sind. Unser "Antwort"-Zug-Tab wird bei deaktiviertem JavaScript ebenfalls etwas irrelevant, also sollten wir auch darauf achten, diesen per JavaScript anzuwenden, damit er nur vorhanden ist, wenn er nutzbar ist.

Screenreader

Wir haben bereits festgelegt, dass wir das Verbergen unserer Antworten mit JavaScript durchführen werden, also keine Sorge um das Verbergen von Antworten. Unser einziges Anliegen ist nun, dass unser Markup sauber und semantisch ist. Mit anderen Worten, kein zusätzlicher Ballast, den Leute mit Screenreadern nicht sehen müssen, sowie eine klare Trennung zwischen „Frage“ und „Antwort“.

Der Markup

Beginnen wir mit dem Markup. Wir nutzen Definitionslisten, die meiner Meinung nach perfekt für FAQ-Inhalte geeignet sind.

<dl class="faq">
	<dt>How much wood would a wood chuck chuck if a wood chuck could chuck wood?</dt>
	<dd class="answer"><div>1,000,000</div></dd>
</dl>

Ziemlich sauber, aber es gibt ein schlechtes Zeichen in unserer Semantik-Bewertung: das zusätzliche div im Antwort-Element. Dies ist nicht unbedingt notwendig, aber es unterstützt die Geschmeidigkeit der Animation, die wir mit jQuery beabsichtigen. Lang und kurz: Wenn Sie eine Funktion wie .slideToggle verwenden, wird Ihre Animation viel reibungsloser sein, wenn das Element keine Polsterung verwendet. Wir erreichen die benötigte Polsterung durch dieses zusätzliche div. Mehr Infos dazu hier.

Das jQuery JavaScript

Als Erstes laden wir die Bibliothek und verknüpfen unsere externe JavaScript-Datei, um die Dinge sauber zu halten. Beachten Sie, dass wir jQuery von Google laden, was für die Produktion empfohlen wird. Mehr dazu wie und warum.

<script src="//www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.2.6");
</script>
<script src="js/faq.js"></script>

Dann schreiben wir den eigentlichen Code.

1. Antworten verstecken.
2. Hänge-Tab „Antwort“ anfügen
3. slideToggle-Funktionalität auf den Tab anwenden

$(function(){
	$("dd.answer")
		.hide();
	$("dl.faq")
		.append("<dd class='answer-tab-wrap'><a class='answer-tab'>Answer</a></dd>");	
	$(".answer-tab")
		.click(function(){
			$(this)
				.parent()
				.parent()
				.find("dd.answer")
				.slideToggle();
		});
});

Das CSS

dl			{ clear: both; margin: 0 0 20px 0; }

dt			{ border: 8px solid #7ac0d0; padding: 10px; background: white; 
			  position: relative; font-style: italic; }
					
dd.answer		{ background: white; 
			  position: relative; width: 90%; margin: 0 auto; }
dd.answer div		{ padding: 10px; border-left: 8px solid #dedede;
                         border-right: 8px solid #dedede; border-bottom: 8px solid #dedede; }
dd.answer-tab-wrap	{ margin: 0 30px 0 0; }

.answer-tab		{ background: url(images/answer-tag.png); display: block; margin: 0 0 20px 0;
                        text-indent: -9999px; width: 105px; height: 50px; float: right; }

Ein paar interessante Punkte hier. Da wir den Antwort-Tab schweben lassen, werden wir den Float bei den Definitionslisten selbst löschen, um sicherzustellen, dass der Abstand zwischen ihnen stimmt. Wir verwenden auch CSS Image Replacement für die .answer-tab Ankerlinks, um die höchstmögliche Effizienz zu erzielen (Bild muss nur einmal geladen werden).

Erfolg

Oben auf der Seite sehen Sie die Ergebnisse der Demo mit Funktionalität. Hier sind die anderen Szenarien

JavaScript aus

Antworten sichtbar, Styling ergibt immer noch Sinn.

Screenreader

Als Webseite mit deaktiviertem CSS und JavaScript angezeigt.

Getestet und zugelassen in

Firefox 3, Safari 4, Internet Explorer 6 & 7, Opera 9