Testdatei für Formulare

Zur Verwendung dieser Testdatei

Formulare stellen für die technische Barrierefreiheit eine große Herausforderung dar. Es gilt, die HTML-Syntax korrekt einzusetzen, visuelle Effekte mit CSS ausreichen zu realisieren und für Screen Reader relevante ARIA Attribute richtig einzubinden.

Auf dieser Laborseite sammle ich Codebeispiele, um deren Umsetzung in Browsern und Assistierenden Technologien zu analysieren und für die Community bereitzustellen.

Testbereich

Beispiel 1: Mit Best Practise Anspruch für Standardelemente

Erläuterungen zum Standardbeispiel

Zur Optimierung der Barrierefreiheit werden folgende Techniken eingesetzt:

• Der <div>-Bereich wird mit der ARIA Landmark Rolle FORM gekennzeichnet. Dies ist an sich bei HTML <form>-Elementen nicht nötig, wird hier jedoch zu Testzwecken eingesetzt.

Testbereich zum Standardbeispiel

Erfahrungsberichte zum Formularbeispiel

Checkboxen mit aria-required="true"

• Im Internet Explorer 11 und Firefox 52 wird unter JAWS 17 nicht angesagt, dass eine Eingabe erforderlich ist, wenn sich aria-required="true" im <fieldset>-Element befinden.
• Der W3C HTML Validator liefert eine Fehlermeldung, wenn sich im <fieldset>-Element das aria-required Attribut befindet.