Barrierefreie Tabellen – Headers oder Scope?
26.09.06 von Markus RieschDamit Tabellen barrierefrei zugänglich sind, z.B. für Blinde Menschen mit einem Screen Reader, bietet HTML verschiedene Strukturelemente für Tabellen an.
Auf Websites sind komplexe, mehrstufige Tabellen selten anzutreffen. Für diese Art von Tabellen ist die Verwendung von Headers unumgänglich. Einfache Datentabellen, d.h. mit einer Zeilenüberschrift oder gar nur mit einer Spaltenüberschrift werden sehr häufig eingesetzt. Für diese Art der Tabellen eignen sich Headers aus zwei Gründen nicht:
- Jede Zelle muss explizit mit einem Header verknüpft werden, dies ist ein zusätzlicher, unnötiger Programmieraufwand
- Es muss ca. 30% mehr HTML-Code verwendet werden
Für einfach Tabellen ist Scope daher viel besser geeigent. Das Scope-Attribut teilt dem Screen Reader mit, dass alles unterhalb dieser Spalte verknüpft ist zu dieser Spaltenüberschrift und dass alles was rechts ist verknpüft ist mit dieser Zeilenüberschrift.
Code-Beispiel mit Headers und ID’s;
| Chur | Bern | Basel |
|---|---|---|
| 1287 | 2355 | 2233 |
<table>
<table border="1">
<tr>
<th id="Stadt_1">Chur</th>
<th id="Stadt_2">Bern</th>
<th id="Stadt_3">Basel</th>
</tr>
<tr>
<td headers="Stadt_1">1287</td>
<td headers="Stadt_2">2355</td>
<td headers="Stadt_3">2233</td>
</tr>
</table>
Code-Beispiel mit Scope:
| Merkmal | 2005 | 2006 | 2007 |
|---|---|---|---|
| Poststellen | 2′389 | 2′357 | 2′312 |
| Filialen | 657 | 654 | 649 |
| Agenturen | 135 | 129 | 150 |
<table border="1" summary="Poststellennetz heute: Die Tabelle gibt Auskunft über die Entwicklung des Umbaus von 2005 bis 2007.">
<caption>Poststellen in der Schweiz</caption>
<tr>
<th scope="col">Merkmal</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">Poststellen</th>
<td>2'389</td>
<td>2'357</td>
<td>2'312</td>
</tr>
<tr>
<th scope="row">Filialen</th>
<td>657</td>
<td>654</td>
<td>649</td>
</tr>
<tr>
<th scope="row">Agenturen</th>
<td>135</td>
<td>129</td>
<td>150</td>
</tr>
</table>
October 12th, 2006 at 19:07
Für wesentlich wichtiger als die Bequemlichkeit halte ich die Frage, welche Methode besser unterstützt wird. Und da schneidet (z.B. nach Hellbusch: Barrierefreies Webdesign) id-headers deutlich besser ab als scope.
Und wenn man an Stelle von “Stadt_1″ einfach “s1″ schreibt, sind es nur noch 15% mehr Markup – vernachlässigbar.
October 16th, 2006 at 15:52
muss kai absolut zustimmen, habe bereits im efa-beitrag, wo dies hier verlinkt wurde darauf hingewiesen.
zum thema html – gewicht und bequemlichkeit:
wir befreien, dass html nicht aus bequemlichkeit vom design-müll, sondern um es semantisch auszuzeichen. das zusätzliche html-markup hat einen sinn und ist daher kein ballast!
zum thema headers unnötig:
wenn die unterstützung da wäre, wäre selbst scope in 99% aller fälle vollkommen unnötig, eine tabelle mit einer kopfzeile bezieht sich nämlich, solange nichts anderes definiert wurde, immer auf die unteren “normalen” tabellenzellen. entsprechendes gilt auch für kopfspalten und die kombination mit kopfzeilen, sowie kompliziertere tabellen mit colspan und rowspan.
nötig wird eine extra auszeichnung nur wenn, wie in deinem beispiel oben, sich inhalte aus einer kopfzeile (zürich/bern kann durch ein gut geschriebenen screenreader als kopfzeile und nicht als kopfspalte erkannt werden), nur auf einen teil der darunterliegenden tabellenzellen bezieht.
btw. das beispiel für komplexe, mehrsstufige tabellen, welches du gezeigt hast, arbeitet zur logischen auszeichnung ebenfalls mit scope (rowgroup), auch hier im prinzip ausreichend, wenn die untersützung da wäre. die im beispiel definierten headers gehen dagegen ins leere, da keine ids definiert wurde. im übrigen ebenfalls schlecht bei dem komplexen beispiel ist, dass tfoot nicht genutzt wurde, obwohl sematisch vorhanden und für die zugänglichkeit ebenfalls wichtig.