Eine barrierefreie Tabelle mit anklickbaren Zeilen bauen
Tabellen auf Websites zeigen meistens statische Informationen in Zeilen und Spalten an. Aber was ist, wenn ihr die Zeilen
anklickbar machen möchtet, z.B. um weitere Informationen anzuzeigen? Euer erster Gedanke könnte sein,
Klick-Ereignis-Handler auf die Tabellenzeilen
(<tr>) zu setzen, um sie anklickbar zu machen. Bitte lasst die Finger davon!
Eine Tabellenzeile mit einem Klick-Ereignis-Handler wird nicht auf magische Weise zu einem barrierefreien Steuerelement. Ihr
könnt die Zeile nicht mit der Tastatur ansteuern, geschweige denn das Klick-Ereignis mit der ENTER-Taste
auslösen. Der Zweck des Klick-Ereignis-Handlers wäre für Screenreader-Nutzer:innen unklar. Was können wir also tun?
Foto: © Kampus Production / pexels.com
Um eine barrierefreie Tabelle mit anklickbaren Zeilen zu erstellen, nehmen wir einfach ein <button>-Element
und erhöhen dessen Reichweite, sodass es die gesamte Zeile abdeckt. Meine Lösung ist inspiriert von Adrian Rosellis Artikel
„Don’t Turn a Table into an ARIA Grid Just for a Clickable Row“.
Demo: Tabelle mit anklickbaren Zeilen
Ich habe eine CodePen-Demo erstellt, die mehrere Filme von Studio Ghibli in Tabellenform auflistet. Durch Anklicken einer Zeile öffnet sich ein Dialogfeld mit weiteren Informationen zum Film:
Der Aufbau der barrierefreien Tabelle
Die ideale Lösung
Wir fügen ein <button>-Element in die letzte Tabellenzelle jeder Zeile ein. Der barrierefreie Name
der Schaltfläche (“More Information”) zusammen mit der Zeilenüberschrift
(das <th>-Element in der Zeile) informiert Screenreader-Nutzer:innen über den Zweck des Steuerelements:
<tr>
<th>Spirited Away</th>
<td>2001</td>
<td>2h 4m</td>
<td>
<button id="info-btn-1" aria-label="More Information" type="button">
<span>/* icon */</span>
</button>
</td>
</tr>
Der Button ist standardmäßig über die Tastatur bedienbar. Wir müssen lediglich visuell vermitteln, dass die gesamte Tabellenzeile
fokussiert ist. Dazu können wir die CSS-Pseudoklasse :focus-within verwenden:
table tbody tr {
&:focus-within, &:hover {
outline: 0.188rem solid black;
outline-offset: -0.313rem;
}
button:focus {
outline: none;
}
}
Auf diese Weise wird die Tabellenzeile bei Hover mit der Maus hervorgehoben oder wenn die Schaltfläche innerhalb der Zeile den Fokus erhält.
Schließlich möchten wir die Schaltfläche auslösen, wenn jemand auf die Tabellenzeile klickt. Um dies zu erreichen, verwenden wir
das Pseudo-Element ::after zusammen mit der CSS-Eigenschaft inset:
table tbody tr {
position: relative;
button::after {
content: "";
position: absolute;
inset: 0;
}
}
Das Pseudo-Element ist relativ zu seinem übergeordneten <tr>-Element absolut positioniert und
deckt dank inset: 0 die gesamte Tabellenzeile ab. Jetzt zählt ein Klick auf die Tabellenzeile als Klick
auf die darin enthaltene Schaltfläche. Genial! 🤩
Es gibt nur ein Problem: Das ganze funktioniert (aktuell) nicht in Safari. Die
Definition position: relative für das <tr>-Element wird einfach ignoriert. 🤬
Die Safari-kompatible Version
Solange der WebKit-Fehler nicht behoben ist, benötigen wir einen Workaround. Ich habe eine alternative CodePen-Demo erstellt, die auch in Safari funktioniert:
Die Lösung ist etwas umständlich, aber sie funktioniert. Anstatt die Tabellenzeile als relativen Anker zu verwenden, positionieren
wir das Pseudo-Element relativ zu seinem übergeordneten <td>-Element. Seht selbst:
table {
overflow: clip;
}
table tbody tr {
td:has(button) {
position: relative;
}
button::after {
content: "";
position: absolute;
inset: 0;
left: auto;
width: 100vw;
}
}
Wir setzen die Eigenschaft left des Pseudo-Elements auf auto zurück und legen
seine Breite auf 100 % der Viewport-Breite fest. Zusätzlich setzen wir overflow: clip für die Tabelle,
um die Reichweite jeder Schaltfläche auf die tatsächliche Breite der Tabellenzeile zu beschränken.
Fazit
Wie ihr seht, ist es gar nicht so schwer, eine barrierefreie Tabelle mit anklickbaren Zeilen zu erstellen. Denkt immer daran, dass nicht alle eure Nutzer:innen eine Maus oder ein Touch-Gerät verwenden. Testet daher immer auch mit der Tastatur und Screenreadern. 😉
Erstellt am