aria-current

Wenn Sie eine Gruppe verwandter Elemente haben, wie beispielsweise mehrere Links in einem Breadcrumb oder Schritte in einem mehrstufigen Ablauf, bei dem ein Element in der Gruppe anders gestaltet ist als die anderen, um dem sehenden Benutzer anzuzeigen, dass dies das aktuelle Element innerhalb seiner Gruppe ist, sollte aria-current verwendet werden, um dem Nutzer von unterstützender Technologie mitzuteilen, was über das Styling angezeigt wurde.

In einer Breadcrumb-Liste, wenn ein Link innerhalb eines Satzes von Paginierungslinks gestaltet ist, um anzuzeigen, dass der Benutzer sich derzeit auf dieser Seite befindet, sollte aria-current="page" auf diesem Link gesetzt werden. In einem mehrstufigen Prozess mit einem Schrittindikator wie einem mehrseitigen Fragebogen oder einem mehrstufigen Checkout- oder Registrierungsprozess, wenn das aktuelle Schritt-Symbol visuell anders dargestellt wird, um zu zeigen, dass es der aktuelle Schritt ist, sollte der Container dieses Symbols aria-current="step" für Nutzer von unterstützender Technologie haben, die den visuellen Unterschied möglicherweise nicht "sehen" können.

Das aria-current Attribut zeigt an, dass das Element, auf dem es gesetzt ist, mit einem Wert ungleich false, das aktuelle Element innerhalb eines Containers oder einer Gruppe verwandter Elemente darstellt. Markieren Sie immer nur ein Element in einem Satz von Elementen als aktuell mit aria-current.

Das aria-current Attribut akzeptiert eine begrenzte Liste von Werten einschließlich page, step, location, date, time, true und false. Jeder nicht-null-String-Wert, der nicht in dieser Liste der aufgezählten Werte enthalten ist, wird behandelt, als wäre aria-current="true" gesetzt, nicht der Standardwert false. Wenn das Attribut nicht vorhanden ist, ein leerer String ist, ohne Wert vorhanden ist oder auf aria-current="false" gesetzt ist, wird es dem Benutzer nicht angezeigt.

Wenn etwas ausgewählt statt aktuell ist, wie beispielsweise ein tab in einer tablist, verwenden Sie aria-selected, um das derzeit angezeigte Tabpanel anzuzeigen.

Das Breadcrumb für die "aktuelle Seite" sollte aria-current="page" gesetzt haben.

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="../../../../../">Web technology for developers</a>
    </li>
    <li>
      <a href="../../../../">Accessibility</a>
    </li>
    <li>
      <a href="../../../">ARIA</a>
    </li>
    <li>
      <a href="../../">ARIA States and Properties</a>
    </li>
    <li>
      <a href="./" aria-current="page">ARIA: `aria-current` attribute</a>
    </li>
  </ol>
</nav>

Wenn das Element, das die aktuelle Seite im Breadcrumb darstellt, kein Link war, ist aria-current optional.

page

Repräsentiert die aktuelle Seite innerhalb eines Satzes von Seiten, wie der Link zum aktuellen Dokument in einem Breadcrumb.

step

Repräsentiert den aktuellen Schritt innerhalb eines Prozesses, wie den aktuellen Schritt in einem aufgezählten mehrstufigen Checkout-Ablauf.

location

Repräsentiert den aktuellen Standort innerhalb einer Umgebung oder eines Kontextes, wie das Bild, das visuell hervorgehoben ist als das aktuelle Element eines Flussdiagramms.

date

Repräsentiert das aktuelle Datum innerhalb einer Sammlung von Daten, wie das aktuelle Datum innerhalb eines Kalenders.

time

Repräsentiert die aktuelle Zeit innerhalb eines Satzes von Zeiten, wie die aktuelle Zeit innerhalb eines Zeitplans.

true

Repräsentiert das aktuelle Element innerhalb eines Satzes.

false (Standard)

Repräsentiert nicht das aktuelle Element innerhalb eines Satzes.

Element.ariaCurrent

Die ariaCurrent Eigenschaft, Teil der Element Schnittstelle, spiegelt den Wert des aria-current Attributs wider.

ElementInternals.ariaCurrent

Die ariaCurrent Eigenschaft der ElementInternals Schnittstelle spiegelt den Wert des aria-current Attributs wider.

Verwendbar in allen Rollen; außer für Elemente mit der Rolle gridcell, option, row und tab, bei denen aria-selected verwendet werden sollte.

• aria-selected
• :local-link
• Breadcrumb-Navigation mit aria-current