Neue HTML-Grundstruktur für Stud.IP
Ziel
Mit diesem StEP soll eine neue HTML-Grundstruktur für Stud.IP geschaffen werden, die mehr semantische Struktur bietet und damit auch Belange der Barrierefreiheit einfacher und tiefgehender abbilden kann.
Beschreibung
Aktuell haben wir eine historisch gewachsene HTML-Grundstruktur von Stud.IP, mit vielen <div>
s und wenigen "sprechenden" HTML-Elementen. Nicht überall, wo es sinnvoll ist, sind ARIA-Rollen zugewiesen. Das soll hier geändert werden, indem durch Einführung einer sauberen HTML-Grundstruktur mit Verwendung passender HTML-Tags und ARIA-Rollen eine einfachere, verständlichere und für die Barrierefreiheit passendere Gliederung geschaffen werden soll. Dadurch soll sich das optische Erscheinungsbild zwar nicht verändern, jedoch wird es z.B. für Screenreader einfacher sein, Bereiche einer Seite zu erfassen und logisch zuzuordnen.
Der StEP soll ausdrücklich nicht die jeweiligen Inhaltsbereiche überarbeiten, sondern sich auf den Rahmen jeder Stud.IP-Seite konzentrieren.
Das Konzept wurde auf der Entwicklungstagung 2022 im Workshop "Barrierefrei durch HTML" vorgestellt, die Folien hierzu sind online abrufbar.
Maßnahmen
Überblick
Die aktuelle HTML-Grundstruktur (prinzipiell alles außerhalb von #layout_content
) wird komplett überarbeitet. Statt vieler verschachtelter <div>
-Elemente sollen verstärkt HTML5-Tags wie <nav>
, <aside>
, <main>
usw. verwendet werden, andere Elemente werden je nach Verwendungszweck mit ARIA-roles ausgezeichnet.
Kurz zusammengefasst, soll eine Stud.IP-Seite wie folgt aufgebaut sein:
<html>
<head>
<body>
<header>
<aside>
<main>
<footer>
Bereiche, in denen Benachrichtigungen erscheinen können, werden mit aria-live
gekennzeichnet, somit wird für Screenreader erkennbar, dass hier Live-Änderungen stattfinden können.
Jeder Inhaltsbereich soll zudem eine Überschrift der Ebene 1 erhalten, damit für Screenreader erkennbar ist, worum es auf der Seite geht.
Details
Die neue Struktur soll wie folgt aufgebaut sein:
Kurzbezeichnung des Integrationsaufwandes
-
hoch
Es muss nicht nur das gesamte HTML-Grundgerüst geändert werden, sondern auch alle CSS-Regeln, die sich darauf beziehen.
Durchführung
data-quest (Thomas) zur Version 5.2