`[aria-hidden="true"]`-Elemente enthalten keine fokussierbaren Unterelemente
Die Bedeutung von aria-hidden="true" für Elemente ohne fokussierbare Nachkommen
In der Webentwicklung ist es wichtig, nicht nur visuelle, sondern auch nicht-visuelle Elemente der Website zu berücksichtigen. Eines dieser Elemente ist das aria-hidden-Attribut. Es hilft, Elemente von Screenreadern zu verstecken, d.h. Geräten, die den Inhalt der Website für Menschen mit Einschränkungen vorlesen.
Aber warum müssen Elemente vor Screenreadern versteckt werden? Nun, nicht alle Elemente auf der Website sind für Benutzer mit Einschränkungen relevant. Zum Beispiel können Platzhalterbilder, die nur dafür verwendet werden, damit die Seite im Browser korrekt angezeigt wird, für Screenreader-Benutzer unverständlich oder sogar störend sein. Deshalb sollten solche Elemente vor Screenreadern versteckt werden, damit sie ihre Arbeit nicht stören.
Es ist jedoch wichtig zu beachten, dass das aria-hidden-Attribut nur dann verwendet werden sollte, wenn das Element keine fokussierbaren Nachkommen hat. Als fokussierbare Nachkommen gelten Elemente, die mithilfe der Tastatur den Fokus erhalten können (z.B. Links oder Schaltflächen). Wenn das Element fokussierbare Nachkommen hat, aber Sie es trotzdem vor Screenreadern verstecken möchten, verwenden Sie das aria-hidden="true" Attribut zusammen mit dem tabindex="-1" Attribut. Dies ermöglicht es dem Screenreader, das Element zu überspringen, ohne es zu fokussieren, aber ermöglicht es gleichzeitig, dass das Element mithilfe der Tastatur fokussiert werden kann.
Abschließend ist es wichtig zu sagen, dass aria-hidden="true" ein wichtiges Werkzeug für Entwickler ist, das es ermöglicht, unbedeutende Elemente vor Screenreadern zu verstecken und die Zugänglichkeit der Website zu verbessern. Es ist jedoch wichtig zu beachten, dass aria-hidden nur dann verwendet werden sollte, wenn das Element keine fokussierbaren Nachkommen hat. Andernfalls kann dies für Benutzer mit Einschränkungen Schwierigkeiten bei der Verwendung der Website verursachen. Auf diese Weise ist der Einsatz des Attributs aria-hidden ein wichtiger Schritt auf dem Weg zur Erstellung einer barrierefreien und benutzerfreundlichen Website für alle Benutzer.
Ähnliche Artikel:
`[user-scalable="no"]` wird nicht im `<meta name="viewport">`-Element verwendet und das `[maximum-scale]`-Attribut ist nicht kleiner als 5. Die Elemente mit einer ARIA-`[role]`, deren untergeordnete Elemente eine bestimmte `[role]` enthalten müssen, haben alle erforderlichen untergeordneten Elemente. `[role]`-Elemente sind ihren jeweils erforderlichen übergeordneten Elementen untergeordnet Kein Element hat einen `[tabindex]`-Wert größer als 0 `[aria-*]`-Attribute entsprechen ihren Rollen Kein Formularfeld hat mehrere Labels `[role]`-Werte sind gültig ARIA `meter`-Elemente haben zugängliche Namen `<object>`-Elemente haben alternativen Text `[accesskey]`-Werte sind eindeutig