Bereits in Accessible Rich Internet Applications (ARIA) 1.0 wurde die Rolle „form“ als „landmark role“ definiert. Allerdings war das nicht übertragbar auf das HTML-Element <form>. In ARIA 1.1 werden <form> Elemente auch als Seitenregionen bestimmt werden können.
Seitenregionen
Seitenregionen sind ein essentieller Aspekt des barrierefreien Webdesigns. Mit Seitenregionen werden (großflächige) Bereiche der Seite semantisch identifiziert, damit Screenreader von Region zu Region per Tastendruck navigieren können. Folgende Beiträge dienen dem tiefergehenden Verständnis:
- Landmark roles mit HTML und ARIA
- Mehr als nur Semantik
- Landmarks mit ARIA und HTML – Stand der Screenreader-Unterstützung in 2016
<form> und role=“form“
Das <form> Element ist zwar ein wichtiges HTML-Element, wenn es um die Verarbeitung von Nutzereingaben geht, aber im Kontext von Barrierefreiheit hatte es bislang eigentlich überhaupt keine Bedeutung. Mit der Rolle „form“ als landmark role hatte sich auch nichts geändert. Um ein Formular als Seitenregion zu bestimmen, durfte das role-Attribut nicht auf das Formular gesetzt werden, sondern die Region und das Formular mussten getrennt bestimmt werden:
<div role="form" aria-label="Kontaktieren Sie uns">
<form action="http://www.seitenadresse.de"> … das Formular … </form >
</div>
Der Übergang von ARIA 1.0 zu ARIA 1.1
Mit ARIA 1.1 wird auf das <div> Element verzichtet werden können, wenn ein Formular als Seitenregion bestimmt werden soll, und das <form> Element selbst kann als Seitenregion genutzt werden. Um zu verhindern, dass sämtliche Formulare des Webs von Browsern als Seitenregionen interpretiert werden (und somit Screenreadern mit zusätzlicher und wahrscheinlich oft überflüssiger Semantik zu füttern) müssen die <form> Elemente explizit mit aria-labelledby oder aria-label beschriftet werden. Der HTML-Code wird dann folgenden Muster haben müssen, um als Seitenregion angesprungen werden zu können:
<form action="http://www.seitenadresse.de" aria-label="Kontaktieren Sie uns">
… das Formular …
</form>
oder
<form action="http://www.seitenadresse.de" aria-labelledby="id1">
<h2 aria-hidden="true" id="id1">Kontaktieren Sie uns</h2>
… das Formular …
</form>
Die (sichtbare) Beschriftung im zweiten Beispiel wird mit aria-hidden=“true“ für Screenreader unzugänglich gemacht, um Redundanzen zu vermeiden. Ohne das Attribut würde ein Screenreader zuerst die Region mit „Kontaktieren Sie uns“ identifizieren und anschließend die Überschrift ebenfalls mit „Kontaktieren Sie uns“.
Unterstützung in Screenreadern
Derzeit ist ARIA 1.1 noch eine candidate recommendation des W3C. Dennoch wurden einige Veränderungen bereits von Browsern implementiert.
Die ersten Tests von Formularen mit aria-label und aria-labelledby mit diversen Screenreadern (u.a. JAWS 18, NVDA 2016.4, ChromeVox und VoiceOver) haben keine positiven Ergebnisse geliefert. Bislang unterstützen einige Screenreader-Browser-Kombinationen die Auszeichnung eines <div> als Seitenregion des Typs „Formular“. Die Techniken nach ARIA 1.1, bei denen das <form> selbst als Seitenregion erkannt werden soll, wurde in keinem der getesteten Screenreader unterstützt.
Wichtig: Screenreader können einzelne Formularelemente im Rahmen der strukturellen Navigation anspringen. Für die meisten Formulare ist es nicht erforderlich, sie als Seitenregion zu kennzeichnen. Wenn beispielsweise der Hauptinhalt einer Webseite aus einem Kontaktformular besteht, ist die Kennzeichnung der Region als <main> völlig ausreichend.
Schlussfolgerungen
Da die Unterstützung der Techniken nach ARIA 1.1 noch gar nicht gegeben ist, muss noch auf die Technik nach ARIA 1.0 zurückgegriffen werden, um ein Formular als Seitenregion auszuzeichnen. Überhaupt, da die Kennzeichnung von Formularen als per Tastatur anspringbare Region nicht in jedem Screenreader funktioniert (etwa in VoiceOver oder Cobra), sind andere Typen von Seitenregionen zu bevorzugen – falls Seitenregionen erforderlich sind.
Dieser Beitrag ist Teil einer mehrteiligen Serie zu Aria 1.1:
- Neues in ARIA 1.1 #1 role="presentation" erhält role="none" als Synonym
- Neues in ARIA 1.1 #2 – Mit aria-current das aktuelle Element anzeigen
- Neues in ARIA 1.1 #3 – Ein form-Element als Seitenregion festlegen
- Neues in ARIA 1.1 #4 – role="application" ist jetzt Teil der Dokumentenstruktur (und keine Region)
- Neues in ARIA 1.1 #5 – Mit aria-owns die Hierarchie von Elementen anpassen
- Neues in ARIA 1.1 #6 – Dialogfenster für Screemreader als modal kennzeichnen