ARIA: aria-sort Attribut

Wenn ein Raster oder eine Tabelle Sortierfunktionen bereitstellt, sollte das aria-sort Attribut entweder auf ascending oder descending (oder other) im Kopfzellen-Element der sortierten Spalte oder Zeile gesetzt werden.

Das aria-sort Attribut wird nur auf der aktuell sortierten Spalte oder Zeile gesetzt. Setzen Sie aria-sort="ascending", um anzuzeigen, dass die Datenzellen in der Spalte oder Zeile in aufsteigender Reihenfolge sortiert sind. Wenn die Sortierreihenfolge umgekehrt wird, ändern Sie den Wert zu aria-sort="descending". Wenn eine andere Spalte oder Zeile sortiert wird, wird das einzige aria-sort Attribut auf die Kopfzelle der neu sortierten Spalte oder Zeile mit dem entsprechenden Wert für die Sortierreihenfolge verschoben.

Das aria-sort Attribut sollte jeweils nur zu einem einzelnen Tabellen- oder Rasterkopf hinzugefügt werden. Das Attribut wird verwendet, um Benutzer von unterstützenden Technologien darüber zu informieren, welche Spalte oder Zeile sortiert ist. Es hat keinen Einfluss auf die tatsächliche Sortierreihenfolge.

Diese Tabelle wird mit der nach Nachnamen sortierten Spalte in aufsteigender Reihenfolge geladen.

<table>
  <caption>
    Steering Committee Members
  </caption>
  <thead>
    <tr>
      <th>
        <button>First Name</button>
      </th>
      <th aria-sort="ascending">
        <button>Last Name</button>
      </th>
      <th>
        <button>Company</button>
      </th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    …
  </tbody>
</table>

Wenn ein Benutzer auf die Schaltfläche Last Name klickt, würde aria-pressed="true" dem <button> Element hinzugefügt und der aria-sort Wert würde mit JavaScript auf "descending" umgeschaltet. Wenn der Benutzer auf eine andere Kopfzeilenschaltfläche klickt, würde aria-sort von der Last Name Kopfzeile entfernt werden, um es auf der geklickten Schaltfläche des <th> Elternteils zu platzieren.

Wir haben Anweisungen in der Kopfzeile für unterstützende Technologien bereitgestellt, die möglicherweise nicht die Abwärtspfeile sehen, die wir mit CSS für die th[aria-sort="ascending"] und th[aria-sort="descending"] Selektoren hinzufügen würden.

ascending

Elemente sind in aufsteigender Reihenfolge nach dieser Spalte sortiert.

descending

Elemente sind in absteigender Reihenfolge nach dieser Spalte sortiert.

none (Standard)

Es ist keine definierte Sortierung auf die Spalte angewendet.

other

Ein anderes Sortierverfahren als aufsteigend oder absteigend wurde angewendet.

Element.ariaSort

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

ElementInternals.ariaSort

Die ariaSort Eigenschaft, Teil der ElementInternals Schnittstelle, spiegelt den Wert des aria-sort Attributs wider.

Verwendet in Rollen:

• columnheader
• rowheader

• Beispiel für sortierbare Tabelle - ARIA Authoring Practices Guide (APG)
• aria-pressed
• Das <th> Element