Responsive, barrierefreie Datentabellen mit jQuery

Der heutige Expertenbeitrag stammt von Dylan Barrell, dem Vizepräsidenten für Produktentwicklung bei „ Deque“. Dylan verfügt über fast 20 Jahre Erfahrung in den Bereichen Technologieentwicklung, technischer Vertrieb, Produktmanagement, Produktmarketing und Unternehmensentwicklung. Dylan ist davon überzeugt, dass man durch Taten führen muss, um Mehrwert für die Aktionäre und die Gemeinschaft zu schaffen.

Responsive, barrierefreie Datentabellen mit einem jQuery-Plugin

Es gibt eine Handvoll Blogbeiträge zum Thema barrierefreie Tabellen, von denen der beste auf „Accessible Culture“ zu finden ist. Doch letztendlich lassen sie uns alle mit einigen Problemen zurück:

Wenn die Tabellen im Format für Geräte in Smartphone-Größe dargestellt werden, werden sie vom AT nicht mehr als Tabelle erkannt, und der Nutzer verliert dadurch wichtige Möglichkeiten, einfach von Spalte zu Spalte und von Zeile zu Zeile durch die Tabelle zu navigieren.
Die responsiven Tabellen können nur im Zeilenformat dargestellt werden – das heißt, es ist nicht möglich, eine responsive Tabelle zu erstellen, die auf einem Desktop-Computer im Spaltenformat und auf einem Gerät in Smartphone-Größe im sequenziellen Spaltenformat angezeigt wird.

Die CSS-Lösung von „Accessible Culture“ kommt einer Lösung schon recht nahe, daher habe ich darauf aufgebaut und gleichzeitig die beiden oben genannten Probleme gelöst. Der Code wurde in das jQuery-Plugin „a11yfy“ integriert. Das Plugin nutzt JavaScript, um eine bestehende Tabelle responsiv zu gestalten, und generiert bei Bedarf automatisch das entsprechende CSS. Der Code ist auf der GitHub-Seite von „a11yfy“ zu finden. Hier ist eine Zusammenfassung der wichtigsten Punkte:

Wenn die Tabellen im iPhone-Format dargestellt werden, werden sie von VoiceOver nicht mehr als Tabelle erkannt, und der Nutzer verliert dadurch wichtige Funktionen, mit denen er einfach von Spalte zu Spalte und von Zeile zu Zeile durch die Tabelle navigieren kann. Besonders wichtig ist dabei die Navigation von Zeile zu Zeile mithilfe des Rotors.
Da responsives CSS übergroße Elemente grundsätzlich so anordnet, dass sie vertikal übereinander gestapelt werden, müssen die Elemente, die nebeneinander erscheinen sollen, in der Tabelle auch nebeneinander stehen. Das bedeutet, dass responsive Tabellen nur in Zeilenform angeordnet werden können – d. h., es ist nicht möglich, eine responsive Tabelle zu erstellen, die auf einem Desktop in Spaltenform und auf einem Gerät in Smartphone-Größe in einer spaltenförmigen Reihenfolge angezeigt wird, indem man ausschließlich CSS verwendet.

Um die oben genannten Probleme zu lösen, muss das jQuery-Plugin „a11yfy“ folgende Funktionen erfüllen:

Sorgen Sie dafür, dass der AT eine sequenziell angeordnete Tabelle als Tabelle behandelt, und
Stellen Sie sicher, dass spaltenorientierte Tabellen beim Erreichen des Responsive-Breakpoints vom Spaltenformat auf dem Desktop zum Zeilenformat auf einem Smartphone wechseln.

CSS-Änderungen, um eine Tabelle barrierefrei neu zu gestalten

It turns out that ATs look at the display property when deciding whether or not to treat a table as a table. This does not make any sense to me, but it is the current situation. So the CSS generated by the a11yfy plugin (based on the Accessible Culture CSS) changes the td and th cells to display:block. Also, in order for the AT to recognize the table as a table, it needs to have both a <thead> element and a <tbody> element. Omitting either of these will cause the AT to not recognize the table correctly. However, when the responsive CSS is applied, the <thead> elements will not be interpreted properly by the AT (at least not consistently). For this reason, the generated CSS also hides any <tr> elements inside the <thead> These two changes allow the table to be flowed responsively and still be recognized by the AT as a table – maintaining the header announcement and table navigation in both layouts.

Generiertes CSS für einen Breakpoint mit einer Breite von 980px

@media
(max-width: 980px) {
  /* Force table to not be like tables anymore but still be navigable as a table */
  table, thead, tbody, tr {
    width: 100%;
  }
  td, th {
    display: block;
  }

  /* Hide table headers with display: none because accessibility APIs do not pick up reliably on these headers anyway */
  thead tr {
    display:none;
  }
  tr { border: 1px solid #ccc; }
  td, th {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
  }
  td:before, th:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
}

Wechsel von Spalten- zu Zeilenansicht an den Bruchstellen

Das Problem des Wechsels von einer spaltenbasierten zu einer zeilenbasierten Struktur an der entsprechenden Bruchstelle wird von a11yfy mithilfe von JavaScript gelöst, das:

Ermittelt die Größe des Fensters, wenn die Tabelle „a11yfied“ ist, und zeichnet die entsprechende Tabellenstruktur, und
Hängt sich an die Resize-Ereignisse des Fensters an und zeichnet die Tabelle dann entsprechend den neuen Fensterabmessungen neu.

Hier ist ein Codeausschnitt, der die wichtigsten Aspekte davon veranschaulicht. Sie werden außerdem feststellen, dass „a11yfy“ ein Timeout festlegt, das beim nächsten Resize-Ereignis aufgehoben wird, sodass die Tabelle erst dann neu gezeichnet wird, wenn seit mindestens 50 Millisekunden keine Resize-Ereignisse mehr generiert wurden. Damit soll verhindert werden, dass die Tabelle ständig neu gezeichnet wird, während der Benutzer das Fenster zieht, um dessen Größe zu ändern.

dimensions = getDimensions();
drawTable( $table, data, headers, dimensions, opts);
jQuery(window).on("resize", function () {
    newDimensions = getDimensions();
    if (!equalDimensions(newDimensions, dimensions)) {
        if (resizeTimer) {
            clearTimeout(resizeTimer);
            resizeTimer = undefined;
        }
        dimensions = newDimensions;
        resizeTimer = setTimeout(function () {
            drawTable( $table, data, headers, newDimensions, opts);
        }, 50);
    }
});

Die Verwendung von a11yfy für eine vorhandene Tabelle ist recht einfach und gut dokumentiert. Hier ist ein Codeausschnitt, der die Anwendung anhand einer kleinen Beispieltabelle veranschaulicht.

<!DOCTYPE html>
<html>

<head>
<script src="../tests/jquery.min.js"></script>
<script src="../a11yfy/jquery.a11yfy.core.js"></script>
<script src="jquery.a11yfy.tables.js"></script>
<script src="../i18n/jquery.a11yfy.i18n-de.js"></script>
</head>

<body>
<table id="responsive">
    <thead>
        <tr>
            <th scope="col">Nelson Mandela</th>
            <th scope="col">Steve Nash</th>
            <th scope="col">Sasha Pieterse</th>
            <th scope="col">J.R.R. Tolkien</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>95</td>
            <td>39</td>
            <td>17</td>
            <td>81</td>
        </tr>
        <tr>
            <td>Former political prisoner who upon his release was elected president of South Africa in 1994.</td>
            <td>NBA legend who won the MVP in 2005 and 2006 with the Phoenix Suns, and played in eight NBA All-Star games.</td>
            <td>Teen actress who played Alison DiLaurentis on the hit ABC Family series Pretty Little Liars.</td>
            <td>English author, poet, and professor who created The Hobbit and The Lord of the Rings trilogy.</td>
        </tr>
    </tbody>
</table>

<script>
jQuery(document).ready(function (e) {
    jQuery('#responsive').tables({
        sortFilter: 'none',
        responsive: {
            breakPoint: 980,
            css: true
        }
    });
});
</script>

</body>
</html>

Das a11yfy-Plugin hat noch einiges mehr zu bieten; so implementiert es beispielsweise auch eine sortierbare und filterbare Tabelle, die die Ankündigungen in der Kopfzeile nicht beeinträchtigt, verfügt über Funktionen für portable „aria-live“-Ankündigungen und für die zuverlässige Steuerung des Fokus, wenn VoiceOver auf einem iOS-Gerät aktiviert ist, bietet eine ARIA-Menü-Implementierung und vieles mehr.

Dieser Blogbeitrag basiert auf zwei Beiträgen, die ich in meinem persönlichen Blog veröffentlicht habe: „Responsive, barrierefreie Datentabellen “ und „Das jQuery-Plugin ‚a11yfy‘ implementiert barrierefreie, responsive Datentabellen“.

Vielleicht möchtest du dir den Beitrag auf „Accessible Culture“ trotzdem einmal durchlesen, da diese Lösung „:before“-Inhalte nutzt, um jeder Zelle sichtbare Überschriften hinzuzufügen – diese Technik könnte dich interessieren. Falls du das a11yfy-jQuery-Plugin so anpasst, dass es „:before“-Inhalte unterstützt, reiche bitte unbedingt einen Pull-Request ein, damit ich deine Änderungen integrieren kann. Falls du hingegen Vorschläge hast, wie das Plugin angepasst werden könnte, aber nicht über die Zeit oder die nötigen Kenntnisse verfügst, um dies selbst umzusetzen, kontaktiere mich bitte auf GitHub unter @unobfuscator oder @dylanbarrell.