Hinweise zu Tabellen und Barrierefreiheit
Wenn Sie lange genug in der Welt der Webentwicklung oder des Designs tätig sind, haben Sie vielleicht ein table verwendet , um Ihrer Website ein mehrspaltiges Layout zu geben. Im Laufe der Jahre wurde dieses Muster obsolet, als die Community im Großen und Ganzen CSS übernahm, um das Layout zu erreichen.
Einer der vielen Gründe, warum die Verwendung einer Tabelle für das Layout als schlechte Praxis entschieden wurde, war der gleiche Grund, warum andere HTML-Elemente richtig verwendet werden; Semantik. Wenn Sie eine Website mit einem table für das Layout auszeichnen, ist dies ein Problem der Barrierefreiheit, da der Inhalt eigentlich keine tabellarischen Daten sind. Wir möchten sicherstellen, dass das, was unsere Benutzer lesen und womit sie interagieren, für die präsentierten Inhalte sinnvoll ist.
Wann verwendet man einen Tisch?
Manchmal stellt sich diese Frage bei der Überprüfung eines zu implementierenden Designs:
„Wie markiere ich diesen Inhalt? Ist es eine Tabelle? Vielleicht ist es eine Liste? Woher weiß ich das?“
Die Verwendung des geeigneten HTML-Elements, um die semantische Bedeutung und den Kontext für Hilfstechnologien zu generieren, ist nicht immer einfach. Wenn es um Tabellen geht, lautet eine allgemeine Faustregel:
„Wenn der Inhalt innerhalb einer Tabellenkalkulationsanwendung ausgerichtet werden kann und klar definierte Spalten und Zeilen hat, stehen die Chancen gut, dass die Verwendung einer table den angemessenen Kontext und die semantische Bedeutung vermitteln würde.“
Mit anderen Worten, die Verwendung einer table ist nicht schlecht, solange sie zur Ausgabe von tabellarischen Inhalten verwendet wird.
Das scope
Damit Hilfstechnologien wie Bildschirmleseprogramme die Verbindung zwischen Spalten-/Zeilenkopfzellen ( th ) und der aktuellen Zelle herstellen können, muss das Attribut scope gesetzt werden.
Es gibt zwei zu berücksichtigende Verwendungen des scope : für eine Spaltenüberschrift und eine Zeilenüberschrift.
Bereich der Spaltenüberschrift
Achten Sie bei der Verwendung eines th Elements innerhalb eines thead einer Tabelle darauf, das Attribut scope anzuwenden. Indem der Wert auf "col" gesetzt wird, wird der Inhalt der Spaltenüberschrift neben der aktuellen Zelle angesagt, wodurch Kontext dazu gegeben wird, worauf sich der Zelleninhalt bezieht.
Dies würde normalerweise auf jedes th Element innerhalb eines thead Abschnitts angewendet:
<thead> <tr> <th scope="col">Title</th> <th scope="col">Director</th> <th scope="col">Release Date</th> </tr> </thead>
Umfang der Zeilenkopfzeile
Achten Sie bei der Verwendung eines th Elements innerhalb eines tbody Abschnitts einer Tabelle darauf, das Attribut scope anzuwenden. Wenn Sie den Wert auf "row" setzen, wird der Inhalt der Zeilenüberschrift neben der aktuellen Zelle angesagt, wodurch der Kontext für den Bezug des Zelleninhalts angegeben wird.
Dies würde typischerweise auf die erste th Zelle innerhalb des tr -Elements angewendet werden. Andere td -Zellen würden dieses Attribut nicht aufweisen:
<tbody> <tr> <th scope="row">Star Wars: Episode IV - A New Hope</th> <td>George Lucas</td> <td>May 25th, 1977</td> </tr> <!-- ... --> </tbody>
Versehentlich Semantik entfernen
Beim Anwenden bestimmter CSS-Eigenschaften auf ein table ist es möglich, versehentlich Semantik aus der Tabelle zu entfernen. Dies führt zu einer schlechten Benutzererfahrung für Personen, die Hilfstechnologien verwenden, um die Tabellendaten zu konsumieren und zu verstehen; der Tisch selbst darf überhaupt nicht als table vermittelt werden.
Wenn Sie beispielsweise das standardmäßige Rahmendesign entfernen, gehen Browser im Namen Ihrer Benutzer davon aus, dass diese Tabelle für das Layout oder eine " border " verwendet werden soll. Die eingebaute Heuristik moderner Browser macht diese Annahme aufgrund der Tatsache, dass in der Vergangenheit Grenzen für Layouttabellen entfernt wurden.
Aus diesem Grund ist das manuelle Testen Ihres Codes von entscheidender Bedeutung. Fügen Sie das Laden eines Screenreaders als Teil Ihres täglichen Arbeitsablaufs hinzu. Führen Sie nach Abschluss eines wichtigen Meilensteins oder vielleicht sogar am Ende Ihres Arbeitstages einige Schnelltests durch, um neu eingeführte Fehler zu erkennen, bevor Sie die Produktion starten.
Tabellen per E-Mail
Auch heute noch ist es üblich, beim Erstellen von HTML-basierten E-Mails ein Tabellenlayout zu verwenden. Und da wir wissen, dass die Verwendung eines table zum Erreichen des Layouts ein Problem der Barrierefreiheit ist, wie können wir diese Einschränkung umgehen?
Semantik entfernen
Die beste Methode, um zu vermeiden, dass eine E-Mail fälschlicherweise als „Tabelle“ übermittelt wird, wäre, ihre semantische Bedeutung vollständig zu entfernen. Dies kann erreicht werden, indem das role auf die table angewendet und sein Wert auf „presentation“ gesetzt wird.
<table role="presentation" ...> <!-- ... --> </table>
Wenn dieser role auf table gesetzt ist, wird sein Inhalt als Klartext angesagt, als ob das table überhaupt nicht vorhanden wäre. Dadurch wird vermieden, dass E-Mail-Inhalte als table angekündigt werden. Natürlich wird alles andere semantische HTML innerhalb der table wie erwartet angekündigt.
Achten Sie beim Anwenden des role darauf, Ihre Implementierung zu testen, um sicherzustellen, dass die richtige semantische Bedeutung für Bildschirmleserbenutzer übermittelt wird.
WCAG-Erfolgskriterien
Dies kommt auf 1.3.1 Info und Beziehungen und 4.1.2 Name, Rolle, Wert zurück, wo es heißt:
"Informationen, Struktur und Beziehungen, die durch die Präsentation vermittelt werden, können programmatisch bestimmt werden oder sind in Textform verfügbar."
„Für alle Komponenten der Benutzeroberfläche (einschließlich, aber nicht beschränkt auf: Formularelemente, Links und durch Skripte generierte Komponenten) können der Name und die Rolle programmgesteuert bestimmt werden; Zustände, Eigenschaften und Werte, die vom Benutzer festgelegt werden können, können programmgesteuert festgelegt werden ; und Benachrichtigungen über Änderungen an diesen Elementen sind für Benutzeragenten verfügbar, einschließlich unterstützender Technologien."