ARIA: meter-Rolle

Ein Zähler ist eine grafische Anzeige eines numerischen Wertes innerhalb eines definierten Bereichs. Zum Beispiel die Anzeige des Batteriestands in Prozent. Ein Zähler ist nicht geeignet für Werte, die kein sinnvolles maximales Limit haben. Zähler sollten nicht verwendet werden, um Fortschritt anzuzeigen (zum Beispiel beim Laden), hierfür sollte das <progress>-Element verwendet werden.

Jedes Element mit role="meter" muss auch eines der folgenden Attribute haben:

• Ein aria-label-Attribut.
• Ein aria-labelledby-Attribut, das auf ein Element mit Text verweist, der den Zähler beschreibt.

Es gibt einige Arten von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattform-Accessibility-API dargestellt werden, nur Text enthalten können. Accessibility-APIs haben keine Möglichkeit, semantische Elemente, die in einem meter enthalten sind, darzustellen. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle Nachkommenelemente eines meter-Elements an, da es eine Rolle ist, die keine semantischen Kinder unterstützt.

Betrachten Sie zum Beispiel das folgende meter-Element, das eine Überschrift enthält.

<div role="meter"><h3>Title of my meter</h3></div>

Da Nachkommen von meter präsentativ sind, ist der folgende Code gleichwertig:

<div role="meter"><h3 role="presentation">Title of my meter</h3></div>

Aus der Perspektive des Benutzers der unterstützenden Technologie existiert die Überschrift nicht, da die vorherigen Codeausschnitte dem Folgenden im Accessibility-Tree entsprechen:

<div role="meter">Title of my meter</div>

aria-valuenow

Wird auf einen Dezimalwert zwischen aria-valuemin und aria-valuemax gesetzt, der den aktuellen Wert des Zählers angibt.

aria-valuetext

Unterstützende Technologien präsentieren den Wert von aria-valuenow oft als Prozentsatz. Wenn dies nicht genau wäre, verwenden Sie diese Eigenschaft, um den Zählerwert verständlich zu machen.

aria-valuemin

Wird auf einen Dezimalwert gesetzt, der den Mindestwert darstellt und kleiner als aria-valuemax ist.

aria-valuemax

Wird auf einen Dezimalwert gesetzt, der den Maximalwert darstellt und größer als aria-valuemin ist.

Es wird empfohlen, ein natives <meter>-Element anstelle der meter-Rolle zu verwenden. Benutzeragenten bieten ein stilisiertes Widget für das <meter>-Element basierend auf dem aktuellen value, wie es sich auf die min- und max-Werte bezieht. Bei der Verwendung von nicht-semantischen Elementen müssen alle Merkmale des nativen semantischen Elements mit ARIA-Attributen, JavaScript und CSS nachgebildet werden.

Ein Beispiel für einen Zähler mit role="meter":

<div
  role="meter"
  aria-valuenow="90"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-labelledby="cpu_usage_label">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width: 90%">
    <rect x="0" y="0" width="100%" height="100%" fill="currentcolor"></rect>
  </svg>
</div>

Im obigen Szenario muss, wenn sich der Wert von aria-valuenow ändert, auch die Breite des SVG aktualisiert werden, wie im W3C-Arbeitsbeispiel für einen Zähler zu sehen ist.

• <meter>
• <progress>