ARIA `progressbar`-Elemente haben zugängliche Namen
Die Bedeutung von ARIA progressbar-Elementen mit zugänglichen Namen
In unserer heutigen Zeit werden Technologien immer häufiger in Benutzerinterfaces und Anwendungen verwendet. Eine solche Technologie ist ARIA, die dazu bestimmt ist, die Barrierefreiheit von Websites und Anwendungen für Menschen mit Behinderungen zu verbessern.
Eines der Elemente, die mit ARIA verwendet werden können, ist das progressbar-Element. Dieses Element wird verwendet, um den Fortschritt einer Aufgabe oder eines Prozesses anzuzeigen, z.B. den Download einer Datei oder die Ausführung einer Operation.
Damit dieses Element jedoch wirklich für Menschen mit Behinderungen nützlich ist, muss es einen zugänglichen Namen haben. Ein zugänglicher Name ist eine Beschreibung des Elements, die von Benutzern mit verschiedenen Einschränkungen, einschließlich Seh-, Hör- oder Motorikeinschränkungen, verstanden werden kann.
Ein zugänglicher Name kann mithilfe der Attribute aria-label oder aria-labelledby angegeben werden. Das erste Attribut ermöglicht die Angabe einer textuellen Beschreibung des Elements, während das zweite Attribut auf ein anderes Element verweist, das die erforderliche Beschreibung enthält.
Zum Beispiel, wenn wir ein progressbar-Element haben, das den Fortschritt beim Herunterladen einer Datei anzeigt, könnten wir einen zugänglichen Namen wie folgt angeben:
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Datei herunterladen: 75% abgeschlossen">
</div>
Oder so:
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-labelledby="download-label">
</div>
<span id="download-label">Datei herunterladen: 75% abgeschlossen</span>
Beide Beispiele stellen einen zugänglichen Namen für das progressbar-Element bereit, der von Benutzern mit verschiedenen Einschränkungen verstanden werden kann. Dies ist sehr wichtig, da das progressbar-Element ohne zugänglichen Namen für einige Benutzer möglicherweise unverständlich ist und seine Funktion nicht erfüllt.
Darüber hinaus ist es wichtig zu beachten, dass nicht nur progressbar-Elemente zugängliche Namen benötigen, sondern alle anderen Elemente im Interface auch. Dies hilft dabei, die Barrierefreiheit der Website oder Anwendung für alle Benutzer, einschließlich solcher mit Einschränkungen, zu verbessern.
Abschließend möchte ich darauf hinweisen, dass die Verwendung von ARIA-Elementen wie progressbar mit zugänglichen Namen ein wichtiger Schritt in Richtung Verbesserung der Barrierefreiheit von Websites und Anwendungen für alle Benutzer ist. Dies hilft dabei, das Internet zu einem zugänglicheren Ort für alle zu machen.
Ähnliche Artikel:
Die Seite enthält eine Überschrift, einen Link zum Überspringen oder einen Landmark-Bereich Custom controls have ARIA roles `[role]`-Elemente verfügen über alle erforderlichen `[aria-*]`-Attribute Überschriftenelemente werden in einer fortlaufenden absteigenden Reihenfolge angezeigt Offscreen content is hidden from assistive technology Listen enthalten nur `<li>`-Elemente und Elemente zur Skriptunterstützung (`<script>` sowie `<template>`). Schaltflächen haben keinen für Screenreader zugänglichen Namen Visual order on the page follows DOM order Interactive elements indicate their purpose and state `[aria-*]`-Attribute weisen gültige Werte auf