ARIA-Eingabefelder haben zugängliche Namen
Die Bedeutung von benannten ARIA-Eingabefeldern für die Barrierefreiheit
Die Barrierefreiheit von Websites und Web-Anwendungen ist ein wichtiges Thema, das sicherstellt, dass das Internet für alle Menschen unabhängig von Alter, Bildungsniveau oder Behinderung nutzbar ist. Ein wichtiges Element, das bei der Entwicklung von barrierefreien Websites berücksichtigt werden muss, sind Eingabefelder.
Um Eingabefelder barrierefrei zu gestalten, müssen sie beschreibende Namen haben, die Screen-Reader dabei helfen, Informationen darüber zu übermitteln, welche Daten in das Feld eingegeben werden sollen. Dies ist besonders wichtig für Menschen mit Sehbehinderungen, die Screen-Reader verwenden, um den Inhalt einer Website zu hören.
Um einem Eingabefeld einen Namen zu geben, können Entwickler den HTML-Attribut aria-label verwenden. Beispiel:
<input type="text" aria-label="Dein Name">
Entwickler können auch den Attribut name in Formularen verwenden, um einem Eingabefeld einen Namen zu geben. Beispiel:
<form>
<label for="name">Dein Name:</label>
<input type="text" id="name" name="name">
</form>
Es ist jedoch zu beachten, dass der Attribut name nicht Teil der ARIA-Spezifikation ist, weshalb manche Screen-Reader ihn möglicherweise nicht berücksichtigen. Daher wird empfohlen, den Attribut aria-label zusammen mit label zu verwenden, um eine zuverlässigere Übertragung von Informationen an Screen-Reader zu gewährleisten.
Zusammenfassend ist das Benennen von ARIA-Eingabefeldern ein wichtiger Schritt bei der Entwicklung von barrierefreien Websites und Web-Anwendungen. Das Zuweisen von beschreibenden Namen zu Eingabefeldern hilft Screen-Readern, Informationen darüber zu übermitteln, was in das Feld eingegeben werden soll, was wiederum Menschen mit Sehbehinderungen dabei hilft, Websites und Web-Anwendungen besser zu nutzen.
Ähnliche Artikel:
Offscreen content is hidden from assistive technology `[role]`-Elemente sind ihren jeweils erforderlichen übergeordneten Elementen untergeordnet `[user-scalable="no"]` wird nicht im `<meta name="viewport">`-Element verwendet und das `[maximum-scale]`-Attribut ist nicht kleiner als 5. `<video>`-Elemente enthalten ein `<track>`-Element mit `[kind="captions"]` Schaltflächen haben keinen für Screenreader zugänglichen Namen `button`-, `link`- und `menuitem`-Elemente haben zugängliche Namen `<frame>`- oder `<iframe>`-Elemente verfügen über einen Titel Listen enthalten nur `<li>`-Elemente und Elemente zur Skriptunterstützung (`<script>` sowie `<template>`). `[role]`-Elemente verfügen über alle erforderlichen `[aria-*]`-Attribute Zellen in einem "`<table>`"-Element, die das Attribut "`[headers]`" enthalten, verweisen auf Zellen in derselben Tabelle.