Geeignete HTML-Elemente für eine Statusspalte in einer Tabelle
- Der Einsatz von <table>, <tr> und <td>
- Innerhalb der Statuszelle: Verwendung semantischer und zugänglicher Elemente
- Accessibility-Aspekte (Barrierefreiheit)
- Ein praktisches Beispiel
Der Einsatz von <table>, <tr> und <td>
Grundlegend wird eine Tabelle im HTML mit dem <table>-Element aufgebaut, wobei jede Zeile durch <tr> definiert wird und die einzelnen Zellen durch <td> oder <th>. Für eine Statusspalte eignet sich die Verwendung von gewöhnlichen Tabellenzellen <td>, da die Statusinformationen innerhalb der jeweiligen Zeilen angezeigt werden sollen und diese Zellen semantisch Teil der Daten sind.
Innerhalb der Statuszelle: Verwendung semantischer und zugänglicher Elemente
Für die Darstellung des eigentlichen Status innerhalb der <td>-Zelle gibt es mehrere Möglichkeiten. Man kann den reinen Text verwenden, allerdings ist es sinnvoll, visuelle Hinweise (Farben, Symbole) einzubauen, um den Status schnell erfassbar zu machen.
Eine sehr gute Wahl ist das <span>-Element, da es inline ist, keine eigene semantische Bedeutung mitbringt und so leicht mit CSS formatiert werden kann. Durch CSS-Klassen wie status--active, status--inactive usw. können verschiedene Zustände optisch differenziert hervorgehoben werden.
Alternativ kann man auch das <time>-Element einsetzen, falls der Status mit einer Zeitangabe verknüpft ist oder vom zeitlichen Ablauf abhängt (z.B. "Wartet seit 2 Tagen").
Accessibility-Aspekte (Barrierefreiheit)
Für Menschen, die auf Screenreader angewiesen sind, ist es wichtig, dass der Status auch textuell klar erkennbar ist. Farben allein reichen nicht aus. Daher sollte der Text des Status immer explizit im <span>-Element stehen. Zusätzlich kann aria-label oder role="status" verwendet werden, wenn der Status dynamisch verändert wird, sodass Screenreader informiert werden.