html table accessibility

html table accessibility: Beziehungen statt Kästchen.

Screenreader brauchen für jeden Wert einen verständlichen Zeilen- und Spaltenkopf. Prüfen Sie caption, th, scope und headers direkt im Ausschnitt.

Beziehungs-Labor

Welche Köpfe erklären diese Zelle?

25/ 100 · Beziehungen fehlen
einfachnicht benannt0 Köpfe · 9 Datenzellen

Screenreader-Kontext

Noch keine Kopfbeziehung lesbar.

Befunde

3 offen
  • Thema fehlt<caption> direkt nach dem öffnenden <table> ergänzen.
  • Nur DatenzellenKöpfe als <th> statt <td> auszeichnen.
  • Daten ohne lesbaren KontextZeilen- und Spaltenköpfe programmatisch zuordnen.

Codefix

Kleinster struktureller Umbau

<table>
  <caption>Tabellenthema ergänzen</caption>
  <tr><th scope="col">Region</th><th scope="col">Q1</th><th scope="col">Q2</th></tr>
  <tr><th scope="row">Nord</th><td>120</td><td>136</td></tr>
  <tr><th scope="row">Süd</th><td>98</td><td>104</td></tr>
</table>

Das Labor prüft Markup-Muster. Bedeutung, Lesereihenfolge und Screenreader-Ausgabe bleiben eine manuelle Stichprobe.