Techniken für WCAG 2.0

Zum Inhalt

-

F49: Fehler bei Erfolgskriterium 1.3.2, weil eine HTML-Layout-Tabelle benutzt wird, die keinen Sinn ergibt, wenn sie linearisiert wird

Anwendbarkeit

HTML und XHTML

Dieser Fehler bezieht sich auf:

Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken

Frühere Screenreader lasen den Webinhalt wortwörtlich vom Bildschirm ab, was zu Problemen geführt hat, wenn Tabellen für Layoutzwecke benutzt wurden und wobei eine Tabellenzelle als Ganzes gelesen werden sollte bevor die nächste Tabellenzelle gelesen wurde. Heutige Screenreader arbeiten mit dem zugrunde liegenden Markup, was bedeutet, dass sie eine Tabellenzelle in ihrer Gesamtheit lesen, bevor sie zur nächsten Zelle weitergehen, aber Layout-Tabellen können nach wie vor unbeabsichtigt Probleme mit der natürlichen Lesereihenfolge des Inhalts verursachen.

Beschreibung

Obwohl die WCAG 2 die Benutzung von Layout-Tabellen nicht verbieten, werden CSS-basierte Layouts empfohlen, um die definierte, semantische Bedeutung der HTML-Tabellen-Elemente zu bewahren und konform zur Programmier-Praxis der Trennung von Präsentation und Inhalt zu sein. Wenn jedoch eine Layout-Tabelle benutzt wird, ist es wichtig, dass der Inhalt einen Sinn ergibt, wenn er linearisiert wird.

Dieser Fehler tritt auf, wenn eine bedeutungstragende Abfolge des Inhalts, die durch die Darstellung vermittelt wird, verloren geht, weil HTML-Tabellen, die dazu benutzt werden, um die visuelle Platzierung des Inhalts zu steuern, nicht korrekt „linearisieren“. Tabellen präsentieren Inhalte in zwei visuellen Dimensionen, horizontal und vertikal. Screenreader jedoch präsentieren diese zweidimensionalen Inhalte in der linearen Reihenfolge des Inhalts im Quelltext, wobei sie mit der ersten Zelle in der ersten Reihe beginnen und mit der letzten Zelle in der letzten Reihe enden. Der Screenreader liest die Tabelle von oben nach unten, wobei der den gesamten Inhalt jeder Zeile liest, bevor er zur nächsten Zeile weitergeht. Der gesamte Inhalt jeder Zelle wird gesprochen — einschließlich des gesamten Inhalts jeder Tabelle, die innerhalb einer Zelle verschachtelt ist. Dies wird Linearisierung genannt.

Nehmen wir an, dass eine Webseite so gestaltet ist, dass sie eine Tabelle mit 9 Spalten und 22 Reihen benutzt. Der Screenreader spricht den Inhalt der Zelle in Spalte 1, Reihe 1 gefolgt von den Zellen in den Spalten 2, 3, 4 usw. bis hin zu Spalte 9. Wenn allerdings irgendeine Zelle eine verschachtelte Tabelle enthält, dann liest der Screenreader die gesamte verschachtelte Tabelle, bevor er die nächste Zelle in der ursprünglichen (äußeren) Tabelle liest. Wenn zum Beispiel die Zelle in Spalte 3, Reihe 6 eine Tabelle mit 6 Spalten und 5 Reihen enthält, dann werden all diese Zellen vor Spalte 4, Reihe 6 der ursprünglichen (äußeren) Tabelle gelesen . Das kann dazu führen, dass die bedeutungstragende Reihenfolge, die durch die visuelle Darstellung vermittelt wird, möglicherweise nicht wahrnehmbar ist, wenn der Inhalt von einem Screenreader gesprochen wird.

Beispiele

Fehlerbeispiel 1: Eine Layout-Tabelle, die nicht korrekt linearisiert

Eine Anzeige benutzt die visuelle Positionierung geschickt, aber die Bedeutung wird verändert, wenn dies linearisiert wird.

Code-Beispiel:

				<table>
<tr>
  <td ><img src="logo.gif" alt="XYZ mountaineering"></td>
  <td rowspan="2" valign="bottom">top!</td>
</tr>
<tr>
  <td>XYZ gets you to the</td>
</tr>
</table>

Die Lesereihenfolge dieses Beispiels wäre:

  • XYZ mountaineering top!

  • XYZ gets you to the

Fehlerbeispiel 2: Eine Layout-Tabelle, die eine bedeutungstragende Reihenfolge trennt, wenn sie linearisiert wird

Eine Webseite einer Museumsausstellung positioniert eine Navigationsleiste, die eine lange Liste mit Links enthält, auf der linken Seite der Seite. Rechts neben der Navigationsleiste ist eine Ansicht eines der Bilder aus der Ausstellung. Rechts neben dem Bild ist die Sorte von „Anschlag“-Text, den Sie an der Wand neben dem Objekt sehen würden, wenn Sie im Museum wären. Unterhalb des Textes ist eine Überschrift die „Beschreibung“ lautet und unterhalb der Überschrift ist eine Beschreibung des Bildes. Das Bild, der angeschlagene Text, die Überschrift der Beschreibung und der Text der Beschreibung bilden eine bedeutungstragende Abfolge.

Eine Layout-Tabelle wird benutzt, um die Elemente der Seite zu positionieren. Die Links in der Navigationsleiste sind in unterschiedliche Zellen in der äußerst linken Spalte aufgeteilt.

Code-Beispiel:

				<table>
<tr>
	<td><a href="#">Link 1</a></td>
	<td rowspan="20"><img src="img.png" alt="Museum Picture"></td>
	<td rowspan="6"><img src="placard.png" alt="Placard text"></td> 
</tr> 
<tr>
	<td><a href="#">Link 2</a></td>
</tr>
<tr>
	<td><a href="#">Link 3</a></td>
</tr>
<tr>
	<td><a href="#">Link 4</a></td>
</tr>
<tr>
	<td><a href="#">Link 5</a></td>
</tr>
<tr>
	<td><a href="#">Link 6</a></td>
</tr>
<tr>
	<td><a href="#">Link 7</a></td>
	<td rowspan="2"><h2>Image Heading</h2></td> 
</tr> 
<tr>
	<td><a href="#">Link 8</a></td>
</tr>
<tr>
	<td><a href="#">Link 9</a></td>
	<td rowspan="12">Description of the image</td> 
</tr> 
<tr>
	<td><a href="#">Link 10</a></td>
</tr>
 ...
<tr>
	<td><a href="#">Link 20</a></td>
</tr>
</table>

Die Lesereihenfolge dieses Beispiels wäre:

  • Link 1

  • Image

  • Placard Text

  • Link 2

  • Link 3

  • Link 4

  • Link 5

  • Link 6

  • Link 7

  • Image Heading

  • Link 8

  • Link 9

  • Link 10

  • ...

  • Link 20

Da die Links der Navigationsleiste mit dem Inhalt, der das Bild beschreibt, verzahnt sind, können Screenreader den Inhalt nicht in einer bedeutungstragenden Reihenfolge, die mit der visuell präsentierten Reihenfolge übereinstimmt, präsentieren.

Ressourcen

Es gibt für diese Technik keine Ressourcen.

Tests

Vorgehensweise

  1. Linearisieren Sie den Inhalt in einer der folgenden Art und Weise:

    • Stellen Sie den Inhalt in der Quelltext-Reihenfolge dar

    • Entfernen Sie das Tabellen-Markup um den Inhalt herum

  2. Prüfen Sie, ob die lineare Lesereihenfolge irgendeiner bedeutungstragenden Reihenfolge, die durch die Präsentation vermittelt wird, entspricht.

Erwartete Ergebnisse