Dasaria-colcount-Attribut definiert die Gesamtanzahl der Spalten in einertable,grid odertreegrid, wenn nicht alle Spalten imDOM vorhanden sind.

Beschreibung

Einige Tabellen sind sehr groß, und es ist nicht möglich, alle Spalten dem Nutzer anzuzeigen. Oder es ist möglich, jedoch wäre eine so breite Tabelle ein schlechtes Benutzererlebnis. Verwenden Sie dasaria-colcount-Attribut, um unterstützenden Technologien mitzuteilen, wie viele Spalten die Tabelle hätte, wenn alle Spalten vorhanden wären. Der Wert ist eine ganze Zahl, die die Anzahl der Spalten repräsentiert, aus denen die komplette Tabelle besteht. Wenn Sie die Gesamtanzahl der Spalten einer Tabelle nicht kennen, aber wissen, dass sie nicht alle im DOM sein werden, verwenden Sie den Wert -1, soaria-colcount="-1". Dieser Wert teilt dem User-Agent mit, dass die derzeit im DOM vorhandene Anzahl der Spalten möglicherweise nicht der tatsächlichen Anzahl der Spalten in der Tabelle entspricht.

Wenn alle Spalten einer Tabelle im DOM vorhanden sind, ist dasaria-colcount-Attribut nicht erforderlich, da Browser die Gesamtanzahl der Spalten automatisch berechnen. Wenn jedoch nur ein Teil der Spalten zu einem bestimmten Zeitpunkt im DOM vorhanden ist, ist dieses Attribut hilfreich und notwendig.

Wenn Siearia-colcount verwenden und Sie eine bekannte Anzahl von Spalten haben, stellen Sie sicher, dass Sie aucharia-colindex verwenden, um jede Spalte zu kennzeichnen, oder wenn die Spalten zusammenhängend sind—also wenn es eine Gruppe von Spalten in der ursprünglichen Reihenfolge ohne Unterbrechungen ist—jede Zeile zu kennzeichnen.

Das folgende Beispiel zeigt ein Raster mit 6 Spalten, von denen die Spalten 1, 2, 5 und 6 dem Nutzer angezeigt werden. Die Gesamtanzahl der Spalten, aus denen die Tabelle besteht, wird aufaria-colcount="6" für die Tabelle selbst gesetzt. Da die Spalten nicht zusammenhängend sind, hat jedescell-Element—hiercolumnheader undgridcell-Elemente—dasaria-colindex-Attribut gesetzt.

<div role="grid" aria-colcount="6">  <div role="rowgroup">    <div role="row">      <div role="columnheader" aria-colindex="1">First name</div>      <div role="columnheader" aria-colindex="2">Last name</div>      <div role="columnheader" aria-colindex="5">City</div>      <div role="columnheader" aria-colindex="6">Zip</div>    </div>  </div>  <div role="rowgroup">    <div role="row">      <div role="gridcell" aria-colindex="1">Debra</div>      <div role="gridcell" aria-colindex="2">Burks</div>      <div role="gridcell" aria-colindex="5">New York</div>      <div role="gridcell" aria-colindex="6">14127</div>    </div>  </div>  …</div>

Die erste Regel bei der Verwendung von ARIA lautet: "Wenn Sie eine native Funktion mit der erforderlichen Semantik und dem erforderlichen Verhalten verwenden können, statt ein Element neu zu verwenden undein ARIA-Rolle, -Zustand oder -Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie dies." Wenn wir native HTML-Semantiken mit<table>,<th>,<td>, etc. verwenden, ist dasaria-colcount-Attribut weiterhin notwendig, jedoch ist das Markup nicht so ausführlich. Wenn Sie semantische Tabellenkopf-Elemente verwenden und nicht alle Spalten im DOM sind, mussaria-colcount immer noch verwendet werden, aber dasaria-colindex-Attribut muss nur einmal pro Spalte im Tabellenkopf<th> definiert werden.

<table aria-colcount="6">  <thead>    <tr>      <th aria-colindex="1" scope="col">First name</th>      <th aria-colindex="2" scope="col">Last name</th>      <th aria-colindex="5" scope="col">City</th>      <th aria-colindex="6" scope="col">Zip</th>    </tr>  </thead>  <tbody>    <tr>      <td>Debra</td>      <td>Burks</td>      <td>New York</td>      <td>14127</td>    </tr>    …  </tbody></table>

Werte

<integer>

Die Anzahl der Spalten in der vollständigen Tabelle

Zugehörige Rollen

Verwendet in Rollen:

• table

Vererbt in Rollen:

• grid
• treegrid

Spezifikationen

Siehe auch

• aria-colindex