Aneamal-Version 2017-K08

Mehrfachauswahl

Ebenfalls aussdrucksstärker und damit barrierefreier ist nun die Übersetzung von Auswahlboxen nach HTML. Nehmen wir das Beispiel:

Welchen Buchstaben möchtest Du?

{ } B
{ } Ä
{ } R

Dies wurde bislang in etwa so nach HTML übersetzt:

<p>Welchen Buchstaben möchtest Du?</p>
<p>
<input id="_1" value="" type="checkbox"> <label for="_1">B</label><br>
<input id="_2" value="" type="checkbox"> <label for="_2">Ä</label><br>
<input id="_3" value="" type="checkbox"> <label for="_3">R</label>
</p>

Statt mit <p>…</p> werden die Auswahloptionen nun mit <fieldset>…</fieldset> gruppiert, was sie als zusammengehörige Formularelemente kennzeichnet. Noch besser ist aber, wenn man die Leerzeile zwischen der Frage und den Optionen weglässt. Dann wird nämlich die Frage auch per HTML eindeutig mit den Antworten verknüpft, was es zum Beispiel Sehbehinderten einfacher macht, die Struktur der Seite zu verstehen:

Welchen Buchstaben möchtest Du?
{ } B
{ } Ä
{ } R

Dies wird nun in etwa so übersetzt:

<fieldset>
<legend>Welchen Buchstaben möchtest Du?</legend>
<input id="_1" value="" type="checkbox"> <label for="_1">B</label><br>
<input id="_2" value="" type="checkbox"> <label for="_2">Ä</label><br>
<input id="_3" value="" type="checkbox"> <label for="_3">R</label>
</fieldset>

Diese Verbesserung setzt eine Richtlinie für barrierefreie Netzinhalte um. Zu beachten ist dabei allerdings, dass Browser standardmäßig <fieldset> und <legend> in besonderer Weise darstellen. Eine unauffälligere Darstellung, die der bisherigen entspricht, erhältst Du, wenn Du Deinen Stilangaben so etwas beifügst:

fieldset {
    border: none;
    margin: 1em 0;
    padding: 0;
}
legend {
    padding: 0 0 1em;
}