nicht angemeldet
Barrierefreiheit komplexe Tabellen
Gernot BackHallo,
ich wollte fragen wie man eine Tabelle Barrierefrei macht, wenn es zu einer Inhaltszelle 2 Kopfzellen gibt? Kann man Tabellen auch Barrierefrei machen, wenn es Kopfzellen gibt, die verbunden sind?
Die folgende Tabelle würde ich geren Barrierefrei machen, kann man das mit vielleicht mit axis-Tag lösen:
http://bildrian.de/n/b/e95e440b340cb1cc.gif
Mfg Oinker
-
Hallo oinker,
ich wollte fragen wie man eine Tabelle Barrierefrei macht, wenn es zu einer Inhaltszelle 2 Kopfzellen gibt? Kann man Tabellen auch Barrierefrei machen, wenn es Kopfzellen gibt, die verbunden sind?
Die folgende Tabelle würde ich geren Barrierefrei machen, kann man das mit vielleicht mit axis-Tag lösen:
Ich sehe keinen Grund, warum man das nicht Barrierefrei machen könnte; du hast eindeutig tabellarische Daten. Jetzt müsstest du dir halt noch die Mühe mit scope und/oder headers machen, damit auch in nicht visuellen Ausgabemedien klar wird, welche TH-Zellen sich auf welche TD-Zellen beziehen und umgekehrt.
Gruß Gernot
-
Hallo nochmal,
Ich sehe keinen Grund, warum man das nicht Barrierefrei machen könnte; du hast eindeutig tabellarische Daten.
Ich habe das mit deiner Tabelle jetzt mal selbst versucht und sehe nun in der Tat auch ein paar Probleme bezüglich der barrierefreien Umsetzbarkeit.
Wenn man überall Headers-Attribute in den TD-Elementen und IDs in den TH-Elementen setzte, dürfte der Schuss wohl eher nach hinten losgehen, denn wenn sich ein Nutzer mit einem Screenreader tatsächlich zu allen TD-Elementen all die TH-Elemente vorlesen ließe, "unter" denen diese jeweils stehen, würde er wahrscheinlich schnell rammdösig davon, mal ganz abgesehen von der Schreibarbeit, die man als Webseitenautor dabei hat.
Bei Verwendung von Scope-Attributen in den TH-Zellen hättest du als Webseitenautor zwar weniger Schreibarbeit und behieltest auch eine bessere Übersicht über deinen Quellcode, für den Nutzer wäre diese Methode aber wahrscheinlich auch nicht besser als die andere mit Headers und IDs.
Außerdem würde die Verwendung von scope="colgroup" voraussetzen, dass in deinem Fall COLGROUP-Elemente auch ineinander verschachtelt werden könnten, was bislang aber nicht der Fall ist. Das wird zwar für XHTML 2.0 diskutiert
http://lists.w3.org/Archives/Public/www-html-editor/2005AprJun/0175.html
wäre im Moment aber noch nicht valide:
<table> <caption>1. Wasseraufkommen sowie erzielte Gesamtnutzung von 1991 - 2001</caption> <colgroup> <col /> <col /> <colgroup> <colgroup> <col /> <col /> <col /> </colgroup> <col /> </colgroup> </colgroup> <thead> <tr> <th scope="col" rowspan="3">Jahr</th> <th scope="col" rowspan="2">Wärmekraftwerke</th> <th scope="colgroup" rowspan="2">Wasseraufkommen</th> <th scope="col" colspan="2">davon</th> <th scope="col" rowspan="2">Erzielte Wassergesamtnutzung</th> </tr> <tr> <th scope="col">Eigengewinnung</th> <th scope="col">Fremdbezug</th> </tr> <tr> <th scope="col">Anzahl</th> <th scope="colgroup" colspan="4">1000 m³</th> </tr> </thead> <tbody> <tr> <th scope="row">1991</th> <td>7</td> <td axis="Wasseraufkommen">896672</td> <td axis="Wasseraufkommen">896258</td> <td axis="Wasseraufkommen">414</td> <td>1046838</td> </tr> <tr> <th scope="row">1995</th> <td>8</td> <td axis="Wasseraufkommen">978983</td> <td axis="Wasseraufkommen">978519</td> <td axis="Wasseraufkommen">464</td> <td>1278021</td> </tr> <tr> <th scope="row">1998</th> <td>8</td> <td axis="Wasseraufkommen">997164</td> <td axis="Wasseraufkommen">996691</td> <td axis="Wasseraufkommen">473</td> <td>1029927</td> </tr> <tr> <th scope="row">2001</th> <td>8</td> <td axis="Wasseraufkommen">971979</td> <td axis="Wasseraufkommen">971509</td> <td axis="Wasseraufkommen">470</td> <td>1004824</td> </tr> </tbody> </table>Gruß Gernot
-
Hallo,
Ich habe das mit deiner Tabelle jetzt mal selbst versucht und sehe nun in der Tat auch ein paar Probleme bezüglich der barrierefreien Umsetzbarkeit.
Der Grund ist einfach. So wie die Tabelle jetzt aufgebaut ist, _kann_ sich ihre Logik nur optisch erschließen. Strukturell sehe ich da keinerlei Logik. Besser wäre meiner Meinung nach:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Wasseraufkommen</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> table, td, th { border:1px solid } </style> </head> <body> <table> <caption>1. Wasseraufkommen sowie erzielte Gesamtnutzung von 1991 - 2001</caption> <colgroup span="2" /> <colgroup span="3" id="Wasseraufkommen" /> <colgroup span="1" /> <thead> <tr> <th scope="col" rowspan="2">Jahr</th> <th scope="col" rowspan="2">Wärmekraftwerke (Anzahl)</th> <th scope="colgroup" colspan="3">Wasseraufkommen (in 1.000 m³)</th> <th scope="col" rowspan="2">Erzielte Wassergesamtnutzung (in 1.000 m³)</th> </tr> <tr> <th scope="col">gesamt</th> <th scope="col">davon Eigengewinnung</th> <th scope="col">davon Fremdbezug</th> </tr> </thead> <tbody> <tr> <th scope="row">1991</th> <td>7</td> <td>896672</td> <td>896258</td> <td>414</td> <td>1046838</td> </tr> <tr> <th scope="row">1995</th> <td>8</td> <td>978983</td> <td>978519</td> <td>464</td> <td>1278021</td> </tr> <tr> <th scope="row">1998</th> <td>8</td> <td>997164</td> <td>996691</td> <td>473</td> <td>1029927</td> </tr> <tr> <th scope="row">2001</th> <td>8</td> <td>971979</td> <td>971509</td> <td>470</td> <td>1004824</td> </tr> </tbody> </table> </body> </html>viele Grüße
Axel
-
-
-
Hallo,
ich habe dass mit dem Screenreader noch nicht so ganz verstanden.
Die Spaltenköpfe und die Zelleninhalte müssen ja eine Verbindung haben. Zum Beispiel mit "id" und "headers". Aber wozu?
Ich dachte immer damit gibt der Screenreader immer beim vorlesen jeder Zelleninhalte immer den dazugehörige Kopf aus. Macht er aber nicht? Jetzt verstehe ich den Sinn nicht. Ich benutze die Demoversion von Jaws.Wenn ich mehrere Zellenköpfe zu einem Zelleninhalt habe, kann ich das bei der folgenden Tabelle so lösen?
Der Zelleninhalt 896 258 (vierte Köpfe), hat zum Beispiel vier Köpfe und zwar "davon", "Eigengewinnung" und "1000m³".
Könnte ich jetzt im td-tag folgendes schreiben:
<td headers="davon" headers="Eigengewinnung" headers="1000m³">896 258</td>Mfg Oinker
-
Hallo oinker,
Könnte ich jetzt im td-tag folgendes schreiben:
<td headers="davon" headers="Eigengewinnung" headers="1000m³">896 258</td>Nein, denn dass wären ja mehrfache Deklaration des Headers-Attributs, von denen wahrscheinlich nur die erste berücksichtigt würde. In das Headers-Attribut der TD-Zelle kommen durch Leerzeichen getrennt alle IDs der TH-Zellen die als Header für diese TD-Zelle dienen. "1000m³" wäre auch keine gültige ID, wenn ich mich nicht irre, dürfen IDs nicht mit einer Ziffer beginnen.
Sagen wir mal, du gäbest der TH-Zelle mit dem Inhalt "Jahr" die id="hd1", der TH-Zelle mit dem Inhalt "Wasseraufkommen" die id="hd2", der TH-Zelle mit dem Inhalt "davon" die ID="hd3", der TH-Zelle mit dem Inhalt "Eigengewinnung" die id="hd4" und schließlich der TH-Zelle mit dem Inhalt 1000m³ die id="hd5" und dann deiner TD-Zelle, die du hier meinst, das Headers-Attribut headers="hd1 hd2 hd3 hd4 hd5", dann sollte dir dein Screenreader die Tabellenzelle ungefähr so vorlesen hoffentlich auch in dieser Reihenfolge:
1991 - Wasseraufkommen - davon - Eigengewinnung - tausend m hoch drei - achthundertsechundneunzigtausendzweihundertachtundfünfzig
Getestet habe ich das allerdings noch nicht, ich war bislang zu faul, mir Jaws zu installieren. Vielleicht musst du Jaws auch vorher so konfigurieren, dass er dir überhaupt die Tabellenheaderzellen zu den TD-Zellen mitliest. Ich fände das unter Umständen bei vielen zugeordneten TH-Eelmenten sogar eher nervig, mir die immer wieder wiederholen zu lassen.
Gruß Gernot
-