Zu Content springen
Deutsch
Kontakt
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

A: ARIA-progressbar Knoten müssen einen zugänglichen Namen (accessible name) besitzen (WCAG 1.1.1)

aria-progressbar-name

Stellt sicher, dass jeder ARIA progressbar Knoten einen zugänglichen Namen (accessible name) besitzt.

Das bedeutet

Elemente mit role="progressbar" zeigen Fortschritt an, haben aber oft keinen Namen, der erklärt, worum es geht. Screenreader geben dann nur einen Wert aus, nicht den Zweck. Nutzerinnen und Nutzer wissen nicht, welcher Vorgang gemeint ist.

Auswirkung

Ohne klaren Namen bleibt unklar, ob sich der Fortschritt auf Upload, Zahlung, Import oder etwas anderes bezieht. Das erschwert Orientierung und führt zu WCAG Verstößen.

Empfehlung

  • Bevorzugt das native <progress> mit sichtbarem <label> verwenden.
  • Bei role="progressbar" einen Namen per aria-label oder aria-labelledby vergeben.
  • Werte mit aria-valuemin, aria-valuemax, aria-valuenow angeben.
  • Für unbestimmten Fortschritt aria-valuenow weglassen, der Name bleibt Pflicht.
  • Bei Bedarf Kontext mit aria-describedby ergänzen.

Beispiel

Problematisch

<div role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>

Besser

<p id="upload-label">Upload Fortschritt</p>
<div role="progressbar"
     aria-labelledby="upload-label"
     aria-valuenow="45"
     aria-valuemin="0"
     aria-valuemax="100">
</div>

Am besten (native Elemente)

<label for="prog">Upload Fortschritt</label>
<progress id="prog" max="100" value="45">45%</progress>

Verknüpftes WCAG-Kriterium:
WCAG 1.1.1 – Nicht-Text-Inhalt