`[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 Formularfeld hat mehrere Labels Interactive elements indicate their purpose and state Listen enthalten nur `<li>`-Elemente und Elemente zur Skriptunterstützung (`<script>` sowie `<template>`). `<video>`-Elemente enthalten ein `<track>`-Element mit `[kind="captions"]` Das Kontrastverhältnis von Hintergrund- und Vordergrundfarben ist ausreichend Listenelemente (`<li>`) befinden sich in übergeordneten `<ul>`- oder `<ol>`-Elementen HTML5 landmark elements are used to improve navigation Die Elemente mit einer ARIA-`[role]`, deren untergeordnete Elemente eine bestimmte `[role]` enthalten müssen, haben alle erforderlichen untergeordneten Elemente. `button`-, `link`- und `menuitem`-Elemente haben zugängliche Namen ARIA `tooltip`-Elemente haben zugängliche Namen