`[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:
Für `<th>`-Elemente und Elemente mit `[role="columnheader"/"rowheader"]` sind Datenzellen vorhanden, die sie beschreiben. Überschriftenelemente werden in einer fortlaufenden absteigenden Reihenfolge angezeigt Listen enthalten nur `<li>`-Elemente und Elemente zur Skriptunterstützung (`<script>` sowie `<template>`). Zellen in einem "`<table>`"-Element, die das Attribut "`[headers]`" enthalten, verweisen auf Zellen in derselben Tabelle. `[accesskey]`-Werte sind eindeutig Formularelemente sind mit Labels verknüpft Links haben keinen leicht erkennbaren Namen Schaltflächen haben keinen für Screenreader zugänglichen Namen The user's focus is directed to new content added to the page Custom controls have ARIA roles