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!