`[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:
Kein Element hat einen `[tabindex]`-Wert größer als 0 `[role]`-Elemente sind ihren jeweils erforderlichen übergeordneten Elementen untergeordnet `[lang]`-Attribute weisen einen gültigen Wert auf User focus is not accidentally trapped in a region Überschriftenelemente werden in einer fortlaufenden absteigenden Reihenfolge angezeigt `[aria-*]`-Attribute sind gültig und richtig geschrieben Für `<th>`-Elemente und Elemente mit `[role="columnheader"/"rowheader"]` sind Datenzellen vorhanden, die sie beschreiben. `[role]`-Werte sind gültig The page has a logical tab order Links haben keinen leicht erkennbaren Namen