ARIA: Progressbar-Rolle

Das progressbar-Bereichs-Widget zeigt an, dass eine Anforderung 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 anzuzeigen. Andernfalls folgen ihre impliziten Werte den gleichen Regeln wie HTMLs <input type="range">:

• Wenn aria-valuemin fehlt oder keine Zahl ist, wird es standardmäßig auf 0 (null) gesetzt.
• Wenn aria-valuemax fehlt oder keine Zahl ist, wird es standardmäßig auf 100 gesetzt.
• Die Eigenschaften aria-valuemin und aria-valuemax müssen nur für die progressbar-Rolle festgelegt werden, wenn das Minimum der Fortschrittsanzeige nicht 0 oder der Höchstwert nicht 100 ist.
• Der schreibgeschützte Wert aria-valuenow sollte bereitgestellt und aktualisiert werden, es sei denn, der Wert ist indeterminate (unbestimmt); in diesem Fall sollte das Attribut nicht enthalten sein. Wenn festgelegt, stellen Sie sicher, dass der aria-valuenow-Wert zwischen den minimalen und maximalen Werten liegt.

Wenn die progressbar-Rolle auf ein HTML <progress>-Element angewendet wird, kann der zugängliche Name von dem 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-Zugänglichkeits-API dargestellt werden, nur Text enthalten können. Zugänglichkeits-APIs haben keine Möglichkeit, semantische Elemente in einem progressbar zu repräsentieren. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle Nachkommenelemente eines jeden progressbar-Elements an, da es sich um eine Rolle handelt, die semantische Kinder nicht 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äsentational sind, ist der folgende Code gleichwertig:

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

Aus Sicht eines Benutzers von unterstützenden Technologien existiert die Überschrift nicht, da die vorherigen Code-Snippets im Zugänglichkeitsbaum gleichwertig mit dem folgenden sind:

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

aria-valuenow

Nur vorhanden und erforderlich, wenn der Wert nicht unbestimmt ist. Setzen Sie einen Dezimalwert zwischen 0 oder aria-valuemin, wenn vorhanden, und aria-valuemax, 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 korrekt wäre, verwenden Sie diese Eigenschaft, um den Wert der Fortschrittsanzeige verständlich zu machen.

aria-valuemin

Setzen Sie einen Dezimalwert darstellend den minimalen Wert, der kleiner ist als aria-valuemax. Wenn nicht vorhanden, ist der Standardwert 0.

aria-valuemax

Setzen Sie einen Dezimalwert darstellend den maximalen Wert, der größer ist als aria-valuemin. 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 mit einem zugänglichen Namen kennzeichnen. Ein zugänglicher Name ist erforderlich.

Es wird empfohlen, native <progress>- oder <input type="range">-Elemente anstelle der progressbar-Rolle zu verwenden. Benutzeragenten bieten ein stilisiertes Widget für das <progress>-Element basierend auf dem aktuellen value, wie es sich auf 0, den minimalen Wert, und den max-Wert bezieht. Bei der Verwendung nicht-semantischer Elemente müssen alle Funktionen 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 semantischen HTMLs 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 den Status der Fortschrittsanzeige zu referenzieren, und setzen Sie das Attribut aria-busy auf true für den Bereich, 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