Techniken für WCAG 2.0

Zum Inhalt

-

F46: Fehler bei Erfolgskriterium 1.3.1, weil th-Elemente, Caption-Elemente oder nicht-leere Summary-Attribute in Layout-Tabellen benutzt werden

Anwendbarkeit

HTML und XHTML

Dieser Fehler bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist es, einen Fehler zu beschreiben, der auftritt, wenn eine nur für das Layout benutze Tabelle entweder th-Elemente, ein summary-Attribut oder ein caption-Element enthält. Dies ist ein Fehler, da strukturelles (oder semantisches) Markup nur für die Darstellung benutzt wird. Der Zweck der HTML- und XHTML-Table-Elemente ist es, Daten zu präsentieren.

Das folgende strukturelle Markup würde, auch wenn es für gewöhnlich nicht in einer Layout-Tabelle benutzt wird, ein Fehler bei Erfolgskriterium 1.3.1 sein, wenn es in einer Layout-Tabelle benutzt würde:

Assistierende Techniken benutzen die Struktur einer HTML- oder XHTML-Tabelle, um dem Benutzer Daten in einer logischen Art und Weise zu präsentieren. Das th-Element wird benutzt, um die Spalten- und Reihenüberschriften der Tabelle zu kennzeichnen. Ein Screenreader benutzt die Information in den th-Elementen, um die Überschrifteninformationen zu sprechen, die sich ändern, während der Benutzer in der Tabelle navigiert. Das summary-Attribut auf dem table-Element stellt eine Beschreibung der Tabelle in Textform zur Verfügung, in der Zweck und Funktion der Tabelle beschrieben werden. Assistierende Techniken stellen den Benutzern die Informationen des summary-Attributs zur Verfügung. Das caption-Element ist Teil der Tabelle und identifiziert die Tabelle.

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 eine Tabelle für Layout-Zwecke benutzt wird, dann sollte das th-Element nicht benutzt werden. Da die Tabelle keine Daten präsentiert gibt es keinen Grund, irgendwelche Zellen als Spalten- oder Zeilenüberschriften zu kennzeichnen. Ebenso ist eine zusätzliche Beschreibung einer Tabelle, die nur dazu benutzt wird, um Inhalte zu gestalten, nicht notwendig. Fügen Sie kein summary-Attribut hinzu und benutzen Sie das summary-Attribut nicht dazu, um die Tabelle z.B. als „Layout-Tabelle“ zu beschreiben. Diese Information bringt keinen Nutzen, wenn sie gesprochen wird und lenkt Benutzer, die den Inhalt per Screenreader navigieren, nur ab. Leere summary-Attribute sind bei Layout-Tabellen vertretbar, sind aber nicht empfohlen.

Beispiele

Fehler-Beispiel 1

Hier ist ein einfaches Beispiel, in dem eine Tabelle benutzt wird, um Inhalte in einem dreispaltigen Format zu gestalten. Die Navigationsleiste ist in der linken Spalte, der primäre Inhalt in der mittleren Spalte und in der rechten gibt es eine zusätzliche Seitenleiste. Oben gibt es einen Seitentitel. Das Beispiel kennzeichnet den Seitentitel als <th> und stellt ein summary-Attribut zur Verfügung, das angibt, dass es sich bei der Tabelle um eine Layout-Tabelle handelt.

Code-Beispiel:

				 <table summary="layout table">
 <tr>
   <th colspan=3>Page Title</th>
 </tr>
 <tr>
   <td><div>navigation content</div></td>
   <td><div>main content</div></td>
   <td><div>right sidebar content</div></td>
 </tr>
 <tr>
   <td colspan=3>footer</td>
 </tr>
 </table>

Ressourcen

Es gibt für diese Technik keine Ressourcen.

Tests

Vorgehensweise

  1. Durchsuchen Sie den Quelltext des HTML- oder XHTML-Dokumentes nach dem table-Element

  2. Wenn die Tabelle nur benutzt wird, um Elemente innerhalb des Inhalts visuell zu gestalten

    1. Prüfen Sie, ob die Tabelle keine th-Elemente enthält.

    2. Prüfen Sie, ob das table-Element kein nicht-leeres summary-Attribut enthält.

    3. Prüfen Sie, ob das table-Element kein caption-Element enthält.

Erwartete Ergebnisse