15. September 2016

Formularelemente richtig beschriften & Erweiterung für Contact Form 7 Wie ihr barrierefreie Kontaktformulare für WordPress erstellt

,    5 Kommentare

Share on Facebook7Tweet about this on Twitter8Share on Google+1Share on LinkedIn0Email this to someone

Euer Kontaktformular soll für alle Nutzer zugänglich und einfach zu verwenden sein? Wir zeigen euch, wie ihr Formulare barrierefrei macht und stellen euch das WordPress Plugin „Contact Form 7: Accessible Defaults“ vor.

Barrierefreiheit im Netz: ein Thema, das viele bisher nicht auf dem Schirm haben. Eine Website wirklich für alle Nutzer zugänglich zu gestalten, ist gar nicht so einfach und bedarf guter Planung. Eine bestehende Seite komplett umzugestalten, ist oft ziemlich schwierig und aufwändig. Allerdings gibt es ein paar Punkte, an denen ihr relativ einfach ansetzen könnt und die gleichzeitig viel bringen: zum Beispiel Kontaktformulare. Wir zeigen euch, wie ihr barrierefreie Formulare mit WordPress umsetzt.

Barrierefreiheit: Was heißt das?

Was mit Barrierefreiheit bzw. Zugänglichkeit im Netz gemeint ist?

Zugänglichkeit bedeutet in diesem Fall, dass eine Webseite unabhängig von der benutzten Soft- und Hardware, körperlichen Einschränkungen oder vorübergehenden Einschränkungen zum vorgesehenen Zweck verwendet werden kann.

Weitere Infos zum Thema Barrierefreiheit findet ihr in diesem Beitrag.

Warum barrierefreie Kontaktformulare?

Ihr fragt euch, warum ihr ausgerechnet mit dem Kontaktformular eurer WordPress Seite anfangen solltet? Ganz einfach: Findet sich ein Nutzer auf eurer Webseite nicht zurecht, kann er sich per Formular an euch wenden. Mit einem für jeden Nutzer zugänglichen Kontaktformular macht ihr also einen wichtigen Schritt Richtung Barrierefreiheit.

Was macht ein Formular barrierefrei?

Grundsätzlich ist es wichtig, dass euer Kontaktformular verständlich sein sollte, wenn der Nutzer es sich per Screenreader vorlesen lässt. Das heißt vor allem, dass alle Elemente korrekt, beschreibend und konsistent benannt sind. Sprich, jedes Formularelement trägt eine Beschriftung, aus der sich erschließt, wofür dieses Element da ist. Diese Beschriftung wird außerdem innerhalb des Formulars und am besten auf der kompletten Webseite immer mit der gleichen Bedeutung benutzt. Für Formulare außerdem wichtig: sie müssen rein über die Tastatur bedienbar sein.

Konkret setzt ihr die Benennung von Formularelementen am besten mit dem <label>-Element um. Das funktioniert auf zwei verschiedene Arten:

  • Umschließend
    <label>
    <input type="checkbox" name="zustimmen" value="ja" id="checkbox1">Ich stimme zu</label>

    Inmitten des <label>-Elements befindet sich eine Eingabemöglichkeit und der dazugehörige Text.

  • Mit for-Attribut
    <input type="checkbox" name="zustimmen" value="ja" id="checkbox2">
    <label for="checkbox2"> Ich stimme zu </label>

    Das Eingabeelement ist mit seinem Label per ID und for-Attribut verknüpft.

Sollte in eurem Fall eine Benennung per <label> nicht funktionieren oder keinen Sinn machen, könnt ihr auch mit dem title-Attribut oder einer speziellen Beschriftung nur für Screenreader arbeiten:

  • Benennung per title-Attribut
    <input title="Ich stimme zu" type="checkbox" name="checkbox3">

    So wird der title sichtbar, wenn der Nutzer mit der Maus über die Checkbox fährt. Außerdem ist er für Screenreader lesbar.

  • Beschriftung mit aria-label nach WAI-ARIA
    <input aria-label="Ich stimme zu" type="checkbox" name="checkbox4">

    Diese Beschriftung wird nur vom Screenreader gelesen, sie erscheint nicht beim Hovern mit der Maus.

Formulare zugänglicher machen mit Contact Form 7: Accessible Defaults

Update 15.9.: Seit dem letzten Plugin-Update versieht Contact Form 7 selbst inzwischen seine Formularelemente mit Labels. Die Standardvorlage des Plugins ist also bereits barrierefrei! Einziger Unterschied: Contact Form 7 benutzt umschließende <label>-Elemente, während Contact Form 7: Accessible Defaults mit dem for-Attribut arbeitet.

Korrekte Beschriftung und Co. könnt ihr natürlich selbst umsetzen. Aber es wäre ja nicht WordPress, wenn’s da nicht auch ein passendes Plugin gäbe! Zumindest für diejenigen unter euch, die für ihre Formulare Contact Form 7 benutzen. Dafür gibt es nämlich die (kostenlose) Erweiterung Contact Form 7: Accessible Defaults!

Hinweise zur Installation

Falls ihr die beiden Plugins neu installieren wollt, dann installiert und aktiviert zuerst Contact Form 7: Accessible Defaults, und danach erst das Contact Form 7 Plugin. Macht ihr das in dieser Reihenfolge, dann ist das Beispielformular direkt barrierefrei.

Habt ihr bereits Kontaktformulare mit Contact Form 7 erstellt und installiert euch zusätzlich die Erweiterung Accessible Defaults, so ändert dies nichts an bestehenden Formularen. Sprich, wollt ihr ein barrierefreies Formular, müsst ihr erstmal ein neues erstellen.

Contact Form 7: Accessible Defaults – das Plugin in Aktion

Habt ihr beide Plugins erfolgreich installiert und aktiviert, sieht das Standardtemplate für Kontaktformulare so aus:

Standardvorlage Contact Form 7 Accessible Defaults

Standardvorlage für Kontaktformulare unter Contact Form 7: Accessible Defaults

Erstellt ihr nach der Installation von Contact Form 7: Accessible Defaults ein neues Formular, sieht dieses standardmäßig so aus.

Dem aufmerksamen Betrachter fallen direkt die <label>-Elemente auf, die die Beschriftung des jeweiligen Formularelements kennzeichnen. Diese sind in der Standardversion von Contact Form 7 nicht enthalten.

Mit der installierten Erweiterung könnt ihr jetzt wie gewohnt euer Formular zusammenstellen und müsst euch um barrierefreies Gestalten keine Gedanken mehr machen: das übernimmt das Plugin für euch. Im Frontend sieht das Formular dann so aus:

Barrierefreies Standardformular unter Twenty Sixteen

Barrierefreies Standardformular mit deutscher Beschriftung; Theme: Twenty Sixteen

Fazit

Kontaktformulare sind ein hervorragender Angriffspunkt, um die eigene Webseite zugänglicher zu gestalten. Gute Beschriftungen aller Formularelemente spielen dabei eine zentrale Rolle. Besonders einfach könnt ihr barrierefreie Formulare unter WordPress mit Contact Form 7 und der Erweiterung für Accessible Defaults umsetzen.

Achtet ihr auf Barrierefreiheit eurer WordPress Seite? Wie habt ihr Kontaktformulare umgesetzt?

Share on Facebook7Tweet about this on Twitter8Share on Google+1Share on LinkedIn0Email this to someone
Katharina

Katharina

Beim Webseiten basteln vergesse ich schnell mal die Zeit. An WordPress gefällt mir besonders die vielfältige Welt der Plugins und Themes, die zum Ausprobieren einlädt.
Katharina

Du willst up-to-date bleiben?

Trage dich jetzt in unseren kostenlosen Newsletter ein, um stets die aktuellsten Neuigkeiten rund um Wordpress zu erhalten.

Wir geben deine Daten nicht weiter! Wir hassen Spam genauso wie du!

5 Kommentare

Reaktionen auf diesen Beitrag

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.