ARIA: columnheader-Rolle

Der columnheader-Wert des ARIA role-Attributs identifiziert ein Element als eine Zelle in einer Zeile, die Kopfzeileninformationen für eine Spalte enthält, ähnlich dem nativen <th>-Element mit Spaltenscope.

Beschreibung

Ein Element mit role="columnheader", das als Nachfahre eines Elements mit role="row" verschachtelt ist, stellt eine statische tabellarische Struktur einer Spaltenkopfzeile in einem tabellarischen Container dar, sei es eine Tabelle, ein Raster oder ein anderes Diagramm, das Datenbeziehungen anzeigen muss. Um unterstützt zu werden, muss der columnheader in einem Element mit der Rolle row verschachtelt sein.

Zugehörige WAI-ARIA-Rollen, -Zustände und -Eigenschaften

Alle Spaltenköpfe sollten innerhalb einer Zeile verschachtelt sein. Jede Zeile sollte wiederum innerhalb eines Grids, einer Tabelle oder eines treegrid verschachtelt sein, alternativ innerhalb eines rowgroup, das in einem der oben genannten enthalten ist.

aria-sort: Nur auf einen Spaltenkopf gleichzeitig anwendbar, falls überhaupt, gibt das aria-sort-Attribut an, ob eine Spalte in den drei Werten ascending oder descending sortiert ist oder none, wenn nicht sortiert.

Tastaturinteraktionen

Diese Rolle unterstützt keine speziellen Tastaturinteraktionen.

Erforderliche JavaScript-Funktionen

JavaScript ist nur erforderlich, wenn das aria-sort-Attribut verwendet wird.

Beispiele

html

<table>
  <thead>
    <tr role="row">
      <th role="columnheader" scope="col">
        <button>First Name</button>
      </th>
      <th role="columnheader" scope="col">
        <button>Last Name</button>
      </th>
      <th role="columnheader" scope="col" aria-sort="ascending">
        <button>Company Name</button>
      </th>
      <th role="columnheader" scope="col">
        <button>Job Title</button>
      </th>
    </tr>
  </thead>
  <tbody>
    …
  </tbody>
</table>

Best Practices

Spaltenköpfe sollten einen Titel oder Kopfzeileninformationen für die Spalte enthalten.

Die erste Regel von ARIA lautet: Wenn ein natives HTML-Element oder -Attribut die erforderlichen Semantiken und das Verhalten aufweist, verwenden Sie es anstelle der erneuten Zweckbestimmung eines Elements und dem Hinzufügen einer ARIA-Rolle, eines Zustands oder einer Eigenschaft, um es zugänglich zu machen. Es wird empfohlen, das native HTML-<th>-Element mit dem scope-Attribut <th scope="col"> anstelle eines <div> oder eines anderen Elements zu verwenden. Wenn Sie das semantische HTML <th scope="col"> verwenden, ist das role-Attribut nicht erforderlich, kann jedoch als Sicherung hinzugefügt werden, um sicherzustellen, dass die Tabelle ihre Semantik beibehält, falls die Standardsemantiken durch einen CSS-Darstellungswert entfernt werden.

Das aria-sort-Attribut kann einem <th scope="col"> hinzugefügt werden, auch wenn das ARIA role-Attribut nicht angegeben ist.

Bevorzugen Sie HTML

Columnheader hat die gleichen Semantiken <th scope="col">.

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA) # columnheader
Unknown specification