Pflichtfelder für Screenreader

Die besten Formulare im Web sind möglichst kurz und haben möglichst wenige Pflichtfelder. Manchmal aber lassen sich diese nicht umgehen. Wie aber macht man Nutzern von Sreenreadern klar, welche Felder sie unbedingt ausfüllen müssen?

Beinahe schon Standard ist es, Pflichtfelder mit einem Sternchen zu markieren und unter das Formular zu schreiben, das so markierte Felder auszufüllen sind. Diese Methode mag für Sehende akzeptabel erscheinen, für Blinde ist sie es nicht. Ein wenig zusätzlicher Code im Label schafft Abhilfe.

Dazu muss lediglich das Stern-Zeichen als Abkürzung betrachtet werden.

<abbr title=&#8221;Bitte dieses Feld ausfüllen>*</abbr>

Und es geht noch ein wenig schicker. Statt des schnöden Zeichens lässt sich auch eine Grafik verwenden.

<img src="foo" title="Bitte dieses Feld ausfüllen" alt="Pflichtfeld" />

In beiden Fällen werden Screenreader die Information im title ausgeben.

Update vom 25-Jun-2011: Nachdem zuerst WAI-ARAI eine Erweiterung mitbrachte, die Pflichtfelder markierte, wurde diese Vorlage von HTML5 aufgenommen. So könnte heute eine Lösung aussehen, die sowohl HighTech Screenreader zu bedienen vermag als auch altertümliche Software berücksichtigt.

<label for="ort" >Wohnort <abbr title="Pflichtfeld">*</abbr></label>
<input type="text" id="ort" name="Wohnort" required aria-required="true" value="" />