Hallo,
ich versuche gerade ein Formular (Ext:form) barrierefrei bzw. überhaupt valide zu bekommen.
Standardmäßig fallen die Templates im W3C Validator an mehreren Stellen durch.
Mir sind hier die folgenden Probleme / Fehler aufgefallen
1. Das Template für den Honeypot verwendet eine zufällige Element-ID als Wert für das autocomplete-Attribut. Das ist laut https://validator.w3.org/nu/ nicht zulässig:
Hier der zugehörige HTML-Quelltext:
<input autocomplete="ZePKHq7216SL5" aria-hidden="true" id="anmeldung-82-ZePKHq7216SL5" style="position:absolute; margin:0 0 0 -999em;" tabindex="-1" type="text" name="tx_form_formframework[anmeldung-82][ZePKHq7216SL5]">
Habt ihr hier eine Idee, wie man den Honeypot benutzen kann und gleichzeitig valides HTML bekommt?
2. Das Template für ein Datumsfeld benutzt zur Validierung der Eingaben ein pattern-Attribut und die Attribute für min und max welche per additionalAttributes befüllt werden.
min und max können im Form-Editor gesetzt werden. Wenn sie nicht gesetzt sind, ist das ausgegebene HTML nicht valide. Das Attribut pattern ist laut w3c für ein input vom type date gar nicht zulässig:
Hier der zugehörige HTML-Quelltext:
<input pattern="([0-9]{4})-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])" min="" max="" step="1" required="required" class=" form-control" id="anmeldung-82-date-1" type="date" name="tx_form_formframework[anmeldung-82][date-1]" value="">
Ich habe mir jetzt so geholfen, dass ich in den additionalAttributes nur prüfe, ob required gesetzt ist und auf die restlichen Validierungsmöglichkeiten verzichte.
3. Werden Form-Gruppen wie z.B. mehrere Radio-Buttons oder Multi-Checkboxen mit einem Label versehen, das für das for-Attribut kein korrektes Ziel enthält. Das for zeigt auf ein die inputs umgebendes div und nicht auf eines der möglichen Inputs. M.E. kann das bei einem solchen Gruppenelement auch gar nicht funktionieren, weil es mehrere mögliche Ziele gibt. Ich habe das Field-Template daher so geändert, dass ich bei derartigen Gruppen eine Fieldset nebst Legend-Tag um die Input-Gruppe baue.
Beispiel-Code:
<div class="form-group">
<label class="control-label" for="anmeldung-82-multicheckbox-1">Titel</label>
<div class="input checkbox">
<div id="anmeldung-82-multicheckbox-1" class="inputs-list">
<div class="form-check ">
<label class="form-check-label" for="anmeldung-82-multicheckbox-1-0">
<input type="hidden" name="tx_form_formframework[anmeldung-82][multicheckbox-1]" value=""><input id="anmeldung-82-multicheckbox-1-0" type="checkbox" name="tx_form_formframework[anmeldung-82][multicheckbox-1][]" value="Foo">
<span>Checkbox-Label</span>
</label>
</div>
</div>
</div></div>
Bis auf das erste Problem habe ich für mich eine akzeptable Lösung gefunden, es wäre natürlich schöner, wenn man das Datumsfeld auch validieren könnte, aber gut damit könnte ich leben.
Habt ihr ähnliche Probleme mit dem Formframework in Bezug auf Barrierefreiheit oder sind das vielleicht auch zur vernachlässigende Themen?
Wenn nicht, wo könnt ich einen entsprechenden Bugreport machen?
Danke und VG
Michael