Archiv der Kategorie: Formulare

Barrierefreiheit im Internet, Formulare, PHP, Plugins, Wordpress

Contact Form 7: endlich barrierefreie Formulare!

Wie ich in diesem Artikel vorgestellt habe, produziert das populäre Plugin Contact Form 7 so wie es ist nicht barrierefreie Formulare, da die Label-Tags fehlen und mühsam per Hand eingepflegt werden müssen. Aber Abhilfe ist in Sicht!

Das Erweiterungs-Plugin Contact Form 7: Accessible Defaults liefert  neue Templates, in denen die Labels für die Formularfelder bereits korrekt definiert sind. Leider können bereits bestehende Formulare damit nicht aktualisiert werden, die Templates wirken nur für neu erstellte Formulare. Der Autor empfiehlt eine Installation seines Plugins vor der Installation von Contact Form 7, wo das nicht möglich ist sollte man dann nur noch die neuen Templates benutzen, um barrierefreie Formulare zu erzeugen. Aber immerhin – CF7 Accessible Defaults erspart einem viel mühsame Handarbeit – das geht schon in die richtige Richtung!

 

Barrierefreiheit im Internet, Der Werkzeugkasten, Formulare, Wordpress

Contact Form 7: Nützling, aber leider erstmal nicht barrierefrei

Der praktische WordPress-Formulardesigner mit vielen Features

Wer in WordPress mit Formularen zu tun hat, wird in den meisten Fällen das Plugin Contact Form 7 einsetzen. Es bietet einen sehr praktischen Formulareditor, in dem sie ihre Kontaktformulare und Anmeldungen und Bestellungen und was man halt so alles an Formularen brauchen kann in wenigen Schritten zusammenklicken. Eine komplette E-Mail-Response Verwaltung ist auch im Funktionsumfang enthalten und nimmt einem ebenfalls viel Handarbeit ab. Dazu kommen noch ein paar sehr praktische Erweiterungen für Hidden Fields und zum Speichern der Formulardaten in der Datenbank. Insgesamt ein rundes Paket, mit dem sie ihrem Kunden schnell und effizient eine komplette Formularabwicklung anbieten können.

Mit über 5 Millionen Installationen dürfte es auch eins der erfolgreichsten WordPress-Plugins aller Zeiten sein. Da verwundert es mich um so mehr, daß Contact Form 7 mit den Default-Einstellungen Formulare produziert, die nicht barrierefrei sind und im WAVE-Tool haufenweise Errors anzeigen. Wie kommts? Da wurde beim Programmieren geschlampert.

Da fehlen bei den Labels die id’s!

Dabei ist es eigentlich ganz einfach.  Nach WCAG 2.0 braucht jedes Formularfeld ein identifizierendes Label, das es dem Screenreader erlaubt, das Formular gezielt zu bedienen. Das sieht dann ganz einfach so aus, ich zeig hier mal ein Formular mit zwei Feldern:

<label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname"><br> 

<input type="checkbox" name="subscribe" id="subscribe"> <label for="subscribe">Subscribe to newsletter</label>

Jedes Formularfeld kriegt eine id, und die wird mit dem label-for-Tag logisch verknüpft, das wars schon. Eigentlich HTML für Anfänger.

In Contact Form 7 siehts so aus – keine id!

<label> Ihr Name (Pflichtfeld)
 [text* your-name] </label>

Da muss man per Hand nacharbeiten, wenn man barrierefreie Formulare haben möchte, und das finde ich ehrlich gesagt unmöglich für ein so verbreitetes Tool mit Millionen Installationen.

Jede Menge Extensions

Über die interessantesten Extensions für Contact Form (CF7 DTX, CF7 Datenbank Plugins) gibts dann später noch  jeweils eigene Artikel, da warten noch interessante Features auf sie!