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

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

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

Das bedeutet

Elemente mit role="meter" haben oft Werte wie aria-valuenow, aber keinen Namen, der erklärt, was gemessen wird. Screenreader geben dann nur den Wert aus, nicht den Zweck. Nutzerinnen und Nutzer verstehen den Kontext nicht.

Auswirkung

Ohne klaren Namen bleibt unklar, ob sich der Wert auf Ladefortschritt, Speicherauslastung, Signalstärke oder etwas anderes bezieht. Das erschwert Orientierung und führt zu Fehlentscheidungen sowie WCAG Verstößen.

Empfehlung

• Bevorzugt das native <meter> mit sichtbarem <label> verwenden.
• Bei role="meter" einen Namen per aria-label oder aria-labelledby vergeben.
• Werte immer mit aria-valuemin, aria-valuemax, aria-valuenow angeben.
• Einheit oder Skala bei Bedarf mit aria-describedby ergänzen.

Beispiel

Problematisch

<div role="meter" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>

Besser

<div role="meter"
     aria-label="Speicherauslastung"
     aria-valuenow="72"
     aria-valuemin="0"
     aria-valuemax="100">
</div>

Am besten (native Elemente)

<label for="storage">Speicherauslastung</label>
<meter id="storage" min="0" max="100" value="72">72%</meter>

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