ARIA: meter-Rolle

Ein Messgerät ist eine grafische Anzeige eines Zahlenwerts innerhalb eines festgelegten Bereichs. Zum Beispiel die Anzeige des Batteriestands in Prozent. Ein Messgerät ist nicht geeignet für Werte, die kein sinnvolles Höchstlimit haben. Messgeräte sollten nicht verwendet werden, um Fortschritt (zum Beispiel Ladefortschritt) anzuzeigen, dies sollte mit dem <progress>-Element kommuniziert werden.

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

• Ein aria-label-Attribut.
• Ein aria-labelledby-Attribut, das auf ein Element verweist, das den Messwert beschreibt.

Es gibt einige Arten von Benutzeroberflächen-Komponenten, die, wenn sie in einer Plattform-Barrierefreiheits-API dargestellt werden, nur Text enthalten können. Barrierefreiheits-APIs haben keine Möglichkeit, semantische Elemente innerhalb eines meter zu repräsentieren. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle Nachkommelemente eines meter-Elements an, da es sich um eine Rolle handelt, 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äsentationsorientiert sind, ist der folgende Code äquivalent:

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

Aus der Perspektive eines Nutzers von unterstützender Technologie existiert die Überschrift nicht, da die vorherigen Codebeispiele dem folgenden im Barrierefreiheitsbaum 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 Messgeräts angibt.

aria-valuetext

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

aria-valuemin

Auf einen Dezimalwert gesetzt, der den minimalen Wert darstellt und kleiner als aria-valuemax ist.

aria-valuemax

Auf einen Dezimalwert gesetzt, der den maximalen Wert 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 in Bezug auf die min- und max-Werte. Bei der Verwendung nicht-semantischer Elemente müssen alle Funktionen des nativen semantischen Elements mit ARIA-Attributen, JavaScript und CSS nachgebildet werden.

Ein Beispiel für ein Messgerät, das role="meter" verwendet:

<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, wenn der Wert von aria-valuenow aktualisiert wird, muss auch die Breite des SVG aktualisiert werden, wie dies im W3C-Arbeits-Messgeräte-Beispiel zu sehen ist.

• <meter>
• <progress>