ARIA: progressbar Rolle

Das progressbar-Bereichs-Widget zeigt an, dass eine Anfrage eingegangen ist und die Anwendung Fortschritte bei der Ausführung der angeforderten Aktion macht.

Autoren können aria-valuemin und aria-valuemax festlegen, um die minimalen und maximalen Werte des Fortschrittsindikators anzugeben. Andernfalls folgen ihre impliziten Werte denselben Regeln wie die von HTMLs <input type="range">:

• Wenn aria-valuemin fehlt oder kein Wert ist, wird er standardmäßig auf 0 (null) gesetzt.
• Wenn aria-valuemax fehlt oder kein Wert ist, wird er standardmäßig auf 100 gesetzt.
• Die Eigenschaften aria-valuemin und aria-valuemax müssen nur dann für die progressbar-Rolle festgelegt werden, wenn das Minimum der Fortschrittsanzeige nicht 0 oder der Maximalwert nicht 100 ist.
• Der schreibgeschützte Wert aria-valuenow sollte bereitgestellt und aktualisiert werden, es sei denn, der Wert ist unbestimmt, in welchem Fall das Attribut nicht enthalten sein sollte. Wenn festgelegt, stellen Sie sicher, dass der Wert von aria-valuenow zwischen den Minimal- und Maximalwerten liegt.

Wenn die progressbar-Rolle auf ein HTML-<progress>-Element angewendet wird, kann der barrierefreie Name von der zugehörigen <label> stammen. Andernfalls verwenden Sie aria-labelledby, wenn ein sichtbares Label vorhanden ist, oder aria-label, wenn kein sichtbares Label vorhanden ist.

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 einer progressbar enthalten sind, darzustellen. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle Nachkommenelemente eines progressbar-Elements an, da es sich um eine Rolle handelt, die keine semantischen Kinder unterstützt.

Zum Beispiel betrachten Sie das folgende progressbar-Element, das eine Überschrift enthält.

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

Da Nachkommen von progressbar präsentativ sind, ist der folgende Code äquivalent:

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

Aus Sicht eines Nutzers der unterstützenden Technologie existiert die Überschrift nicht, da die vorherigen Code-Snippets dem folgenden im Barrierefreiheitsbaum gleichwertig sind:

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

aria-valuenow

Nur vorhanden und erforderlich, wenn der Wert nicht unbestimmt ist. Soll auf einen Dezimalwert zwischen 0 oder aria-valuemin, falls vorhanden, und aria-valuemax gesetzt werden, der den aktuellen Wert der Fortschrittsanzeige 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 Wert der Fortschrittsanzeige verständlich zu machen.

aria-valuemin

Soll auf einen Dezimalwert gesetzt werden, der den Mindestwert darstellt und kleiner als aria-valuemax ist. Wenn nicht vorhanden, ist der Standardwert 0.

aria-valuemax

Soll auf einen Dezimalwert gesetzt werden, der den Höchstwert darstellt und größer als aria-valuemin ist. Wenn nicht vorhanden, ist der Standardwert 100.

aria-label oder aria-labelledby

Definiert den Zeichenfolgenwert oder identifiziert das Element (oder die Elemente), die das progressbar-Element beschriften und einen barrierefreien Namen bereitstellen. Ein barrierefreier Name ist erforderlich.

Es wird empfohlen, native <progress>- oder <input type="range">-Elemente zu verwenden, anstatt die progressbar-Rolle. Benutzeragenten bieten ein gestaltetes Widget für das <progress>-Element basierend auf dem aktuellen value, wie es sich auf die 0, den Mindestwert, und den max-Wert bezieht. Beim Verwenden von nicht semantischen Elementen müssen alle Funktionalitäten des nativen semantischen Elements mit ARIA-Attributen, JavaScript und CSS neu erstellt werden.

Im folgenden Beispiel verwendet die Fortschrittsanzeige die Standardwerte 0 und 100 für aria-valuemin und aria-valuemax:

<div>
  <span id="loadinglabel">Loading:</span>
  <span role="progressbar" aria-labelledby="loadinglabel" aria-valuenow="23">
    <svg width="100" height="10">
      <rect height="10" width="100" stroke="black" fill="black" />
      <rect height="10" width="23" fill="white" />
    </svg>
  </span>
</div>

Unter Verwendung von semantischem HTML könnte dies wie folgt geschrieben werden:

<label for="loadinglabel">Loading:</label>
<progress id="loadinglabel" max="100" value="23"></progress>

Wenn die Fortschrittsanzeige den Ladefortschritt eines bestimmten Bereichs einer Seite beschreibt, fügen Sie das Attribut aria-describedby hinzu, um auf den Status der Fortschrittsanzeige zu verweisen, und setzen Sie das Attribut aria-busy auf true bis das Laden abgeschlossen ist.

Es wird empfohlen, native <progress>- oder <input type="range">-Elemente anstelle der progressbar-Rolle zu verwenden.

• HTML <progress>-Element
• Andere Bereichs-Widgets umfassen:
  • meter
  • scrollbar
  • separator (wenn fokussierbar)
  • slider
  • spinbutton