Wer in WordPress mit Formularen zu tun hat, wird in den meisten F\u00e4llen das Plugin Contact Form 7 <\/a>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\u00a0im Funktionsumfang enthalten und nimmt einem ebenfalls viel Handarbeit ab. Dazu kommen noch ein paar sehr praktische Erweiterungen f\u00fcr 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\u00f6nnen.<\/p>\n Mit \u00fcber 5 Millionen Installationen d\u00fcrfte es auch eins der erfolgreichsten WordPress-Plugins aller Zeiten sein. Da verwundert es mich um so mehr, da\u00df 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.<\/p>\n Dabei ist es eigentlich ganz einfach. \u00a0Nach 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:<\/p>\n Jedes Formularfeld kriegt eine id, und die wird mit dem label-for-Tag logisch verkn\u00fcpft, das wars schon. Eigentlich HTML f\u00fcr Anf\u00e4nger.<\/p>\n In Contact Form 7 siehts so aus – keine id!<\/p>\n Da muss man per Hand nacharbeiten, wenn man barrierefreie Formulare haben m\u00f6chte, und das finde ich ehrlich gesagt unm\u00f6glich f\u00fcr ein so verbreitetes Tool mit Millionen Installationen.<\/p>\n \u00dcber die interessantesten Extensions f\u00fcr Contact Form (CF7 DTX, CF7 Datenbank Plugins) gibts dann sp\u00e4ter noch \u00a0jeweils eigene Artikel, da warten noch interessante Features auf sie!<\/p>\n","protected":false},"excerpt":{"rendered":" Der praktische WordPress-Formulardesigner mit vielen Features Wer in WordPress mit Formularen zu tun hat, wird in den meisten F\u00e4llen 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 … Contact Form 7: N\u00fctzling, aber leider erstmal nicht barrierefrei<\/span> weiterlesen Da fehlen bei den Labels die id’s!<\/h2>\n
<label<\/span> for=<\/span>\"firstname\"<\/span>><\/span>First name:<\/label><\/span> <input<\/span> type=<\/span>\"text\"<\/span> name=<\/span>\"firstname\"<\/span> id=<\/span>\"firstname\"<\/span>><br><\/span> \r\n\r\n<input<\/span> type=<\/span>\"checkbox\"<\/span> name=<\/span>\"subscribe\"<\/span> id=<\/span>\"subscribe\"<\/span>><\/span> <label<\/span> for=<\/span>\"subscribe\"<\/span>><\/span>Subscribe to newsletter<\/label><\/span><\/pre>\n<label> Ihr Name (Pflichtfeld)\r\n [text* your-name] <\/label><\/pre>\n
Jede Menge Extensions<\/h2>\n