Erstellung barrierefreier Tabellen

[ Dies ist eine Übersetzung des englischsprachigen Artikels „Creating Accessible Tables„. Copyright © by www.Webaim.org ]

Layout Tabellen

Einleitung

Wenn Sie kein Bildschirmleseprogramm besitzen und anwenden, dann lassen Sie uns kurzzeitig so tun als würden sie eins benutzen. Nehmen wir an Sie gehen auf eine Website, um herauszufinden, wo eine Klasse Biologie 205 Unterricht hat. Sie gehen nun auf eine Web-Seite, die diese Informationen hat, und das ist das,was Sie zu hören bekommen:

Tabelle mit 10 Spalten und 7 Zeilen. Abteilungscode, Klassenzahl, Abschnitt, Max Enrollment, aktuelle Immatrikulationsbescheinigung, Zimmernummer, Tag, Startzeit, Endzeit, Ausbilder, BIO, 100, 1, 15, 13, 5, Mo, Mi, Fr, 10:00, 11 : 00, Magde, 100, 2, 15, 7, 5, Di, Do, 11.00, 00.30, Indge, 205, 1, 15, 9, 6, Di, Do, 09.00, 10.30 Uhr , Magde, 315, 1, 12, 3, 6, Mo, Mi, Fr, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mo, Mi, Fr, 09:00 , 10:00, Roberts, 210, 1, 10, 9, 13, Mo, Mi, Fr, 08:00, 09:00, Rasid

Haben Sie nach dem Hören dieser Informationen nun eine Ahnung wo Biologie 205 stattfinden soll? Wahrscheinlich nicht. Wenn Sie die Tabellen vorgelesen bekommen mit Hilfe eine Bildschirmleseprogrammes,aber ohne Tabellenlesemodus, kann diese Art von Informationen ziemlich verwirrend sein. Auch wenn Sie den Tabellenlesemodus anmachen, kann es verwirrend sein, wenn die Tabelle nicht richtig markiert ist.

Layout Tabellen vs. Daten Tabellen

Es gibt zwei grundlegende Verwendungen im Web: Daten Tabellen und Layout Tabellen. Der ursprüngliche Verwendungszweck der HTML-Tabellen war für tabellarische Daten. Eine Tabelle ist eine Daten Tabelle sobald Zeilenüberschriften,Spaltenüberschriften oder beide präsent sind. Als Beispiel ist hier eine einfache Datentabelle:

Shelly’sTöchter
NameAlterGeburtstag
Jackie55. April
Beth814. Januar

Tabellen werden auch häufig für das Seitenlayout verwendet. Layout Tabellen haben keine logischen Überschriften, die über Informationen innerhalb der Tabellenzellen zugeordent werden können. Layout-Tabellen wurden ursprünglich dafür genutzt, um Beschränkungen in der visuellen Präsentation und beim Layout welche bei der Benutzung von HTML entstanden, zu vermeiden. Mit der Verwendung von CSS gibt es viel mehr Flexibilität bei der Kontrolle des Seitenlayouts, so ist es am besten keine Tabellen zu verwenden. Mit CSS gibt es sauberere und einfachere HTML-Codes, bessere Endanwender Anpassungsfähigkeit und weniger potenzielle Zugänglichkeitsprobleme.

Einige Zugänglichkeits Befürwörtern sind der Meinung, dass Tabellenlayouts schlecht für die Zugänglichkeit sind. Doch in Wirklichkeit weisen Layout-Tabellen keine inhärenten Fragen bezüglich der Zugänglichkeit auf. Es gibt sicherlich viel schlimmere Dinge, die Sie in Bezug auf die ZugäBarrierefreiheit glichkeit tun könnten. Menschen mit allen Arten von Behinderungen können leichter auf Layouttabellen zugreifen,solange die Tabellen mit Hilfe von Barrierefreiheit im Verstand entworfen wurden ,sprich ordnungsgemäße und linearisierte Lesereihenfolge,Skalierung etc. haben.

Layout Tabellen Linearisierung

Inhaltslinearisierung bezieht sich auf die Reihenfolge der Inhalte, wenn alle Formatierungen entfernt wurden. Für Daten und Layout-Tabellen kann die Reihenfolge, in welcher der Inhalt präsentiert ist ,den Sinn beeinflussen. Viele Websites verwenden Tabellen für das Layout mit Zeilen und Spalten, um Formatiereffekte zu erzielen. Das Endergebnis hierbei ist, dass die linearisierte Lesereihenfolge möglicherweise nicht die gleiche wie die optische Lesereihenfolge ist. Dies kann zu Verwirrung auf Seiten der Menschen führen, die die linearisierte Lesereihenfolge oder Navigationsreihenfolge benutzen , wie auch bei Personen, die Bildschirmleseprogramme verwenden oder mit der Tastatur navigieren.

Bildschrimleser ignorieren die Tatsache ,dass der Inhalt innerhalb einer Tabelle ist. Der Bildschirmleser liest den Inhalt nur in der wörtlichen Reihenfolge, welche im Code erscheint. Wenn die wörtliche Reihenfolge des Inhaltes im Code logisch ist wird somit auch die linearisierte Lesereihenfolge logisch.

Wichtig

Bildschirmleseprogramme behandeln Layouttabellen und Dateitabellen sehr unterschiedlich. Bei Layout Tabellen lesen sie einfach den Inhalt der Tabelle basierend auf der Quellencodereihenfolge. Bei Dateitabellen, identifizieren Sie die Tabellen, einschließlich der Anzahl der Spalten und Zeilen und lesen Zeilen – und Spaltenüberschriften uvm.

Wie unterscheidet ein Bildschirmlesegerät, ob eine Tabelle eine Datentabelle oder eine Layout Tabelle ist?
Sie führen eine Analyse der Tabellenstruktur und finden es heraus. Deswegen ist es wichtig,dass Datentabellen Markups wie <caption>, <th> usw. niemals in einer Layout Tabelle verwendet werden, sonst kann der Bildschirmleser die Präsens der Tabelle fälschlicherweise als Datentabelle wahrnehmen, was wiederum zu Verwirrung führt.

Werfen wir einen Blick auf ein Beispiel in welcher die Lesereihenfolge ein Problem ist. Hier ist eine Layout Tabelle, die für die visuelle Wirkung erstellt wurde:

Basement  UP!
Toiletsa toiletFlush 
 Must  

Der visuelle Leser wird : „Basement Toilets Must Flash UP“! lesen.

Der Bildschirmleser wird:“Basement UP! Toilets Flush Must!“ hören.

Wieso gibt es diesen Unterschied zwischen der visuellen Reihenfolge und der Bildschirmleser Reihenfolge? Um diese Frage zu beantworten müssen wir uns an die Tabellenstruktur richten. Hier ist die gleiche Tabelle mit sichtbaren Grenzen und Zahlen, die zu jeder Zelle hinzugefügt wurden in der Reihenfolge in der der Bildschirmleser sie lesen wird:

1 – Basement234 – UP!
5 – Toilets6 – a toilet7 – Flush8
910 – Must1112

Wenn Sie den Quellcode für diese Tabelle zu sehen bekommen , werden Sie feststellen, dass der Quellcode und die oben angegebene Reihenfolge übereinstimmen. Werkzeuge, wie WAVE, Web Developer Toolbar, etc. können Ihnen helfen, die linearisierte Lesereihenfolge der Tabelle visuell zu sehen.

Layout Tabellen Größenbestimmung

Wenn Autoren Tabellen für das Layout verwenden, tun Sie es nur um damit präzisere und (angeblich) flexiblere Kontrollen über die Positionierung der Elemente innerhalb der Seite zu bekommen. Hierbei, definieren Layouttabellen typischerweise Pixelwerte, um zu versuchen, genaue Positionen zu steuern. Während es große Angebote von Endverbraucher -Browsern gibt,welche von Nur-Text-mobile Browsern bis hin zu Großbild High Definiton Displays reicht ,ist das pixelbasierte Angebot sehr beschränkt.

Das Problem der Layout-Tabellen ist ihr Mangel an Flexibilität für die Aufnahme von Endnutzer- Inhaltsanpassungen, vor allem Textanpassung durch sehbehinderte Benutzer. Wenn der Text in einer pixelgroßen Tabellenzelle durch den Endbenutzer vergrößert wird, kann diese Ablesbarkeit Probleme verursachen, insbesondere, wenn der Text nicht mehr innerhalb der Pixelabmessungen definiert wird. Dies kann zu horizontale Scrollbalken, der Text guckt aus der Zelle und es kann zu Überlappungen anderer Seitenkomponenten führen. .Bei der Verwendung von Layout-Tabellen, sollte man sicherstellen, dass die Struktur der Tabelle dem Endbenutzer Anpassung und Skalierung von Texten ermöglicht.

Verwenden Sie die einfachste Tabellen Konfigurationsmöglichkeit

Einige Designer werden verrückt mit Layouttabellen. Sie schaffen alle Arten von verschachtelten Tabellen und unnötige Zeilen und Spalten mit aufgespannten Zeilen und Spalten in allen Richtungen, bis die Tabelle kaum mehr wie eine aussieht. All dies kann unsichtbar für sehende Benutzer sein, wenn die Tabellenrahmen auf Null gesetzt werden, aber blinde Nutzer „sehen“ sie alle. Ihre Bildschirmleseprogramme können Sie über die Anzahl der Zeilen und Spalten in der Tabelle informieren. Wenn sie versuchen, von einem Bereich zum anderen innerhalb der Tabelle zu navigieren, könnte sie dies desorientieren. Die Faustregel ist, desto einfacher, desto besser.