Obwohl die meisten HTML5-Formularelemente zumindest ordnungsgemäß von Screenreadern verarbeitet werden können, gibt es - je nach Element - zusätzliche Eigenheiten, welche für eine optimale Barrierearmut beachtet werden sollten. Um beispielsweise Inputs für den Screenreader kenntlich zu machen genügt grundsätzlich ein korrekt gesetztes name-Attribut. Weitere Möglichkeiten zur Beschreibung durch aria-Attribute sind zwar möglich, können aber zu unerwünschten Dopplungen führen. Einige Besonderheiten sind:
Checkboxen
Checkboxen, die etwas ändern, sollten role=“switch“ besitzen
Buttons
Inhalt eines Buttons ist für den Screenreader der Name des Buttons, sprich es ist kein zusätzliches Tag erforderlich sofern der Inhalt korrekt platziert wurde
Sonderfall: Toggle-Buttons. Für diesen ist zwingend ein aria-pressed="true/false" zu setzen.
Aber: Toggles, deren Inhalt sich ändern, sollten kein aria-pressed besitzen - z.B. Play/Pause-Buttons
Selects
Selects benötigen grundsätzlich ein aria-label, wenn der Inhalt nicht statischer Natur ist
Formularvalidierung
Generell sollte eine Formularvalidierung, welche Clientseitig erfolgt, stets durch eine Live-Region-Role gestützt werden. Dabei muss das Element, welche die Fehleranzeige beinhalten soll, auf dem ersten Render bereits im DOM vorhanden sein und mit role="status" ausgestattet werden. Der Inhalt des Elements, bspw. ein p-Element, kann dann dynamisch gerendert werden und wird trotzdem korrekt vom Screenreader vorgelesen.
