Accessibility im Web Teil 1

Dr. Andreas Maier

Bayar Abdullah

This article is also available in English

Passend zum Thema: Unser Kollege Andreas Maier bietet das interaktive Training »Accessibility in der Praxis« mit anschließender Zertifizierung an.

Webseiten gelten als barrierefrei, wenn sie konform zu den Web Content Accessibility Guidelines auf Level AA sind. Diese Richtlinien definiert die Web Accessibility Initiative des World Wide Web Consortium (W3C) als internationalen Standard. Level AA bedeutet, dass eine Website für den größten Teil der Anwender verständlich und nutzbar ist. Sämtliche Funktionen sind auch Menschen mit Beeinträchtigungen zugänglich und Hilfstechnologien wie Screenreader können alle relevanten Informationen auslesen, beispielsweise weil Alternativtexte für Grafiken bereitstehen.

Um konform zu Level AA zu sein, müssen auch alle Kriterien auf Level A erfüllt sein. Das sind die essenziellen Barrierefreiheitsaspekte, etwa dass eine Website nur per Tastatur nutzbar ist. Level AAA umfasst alle Kriterien der beiden vorherigen Level und stellt das Optimum der Barrierefreiheit dar. Diese Kriterien sind allerdings auch aus Sicht der Autoren kaum vollständig zu erfüllen. Dazu zählt etwa, dass bei Liveübertragungen ein Gebärdendolmetscher übersetzt. Laut der aktuellen WebAIM-Studie sind 98 Prozent von einer Million getesteter Websites nicht barrierefrei, also nicht konform zu den Web Content Accessibility Guidelines auf Level AA.

Aufbau der Crimson-Assurance-Website

Die Website von Crimson Assurance umfasst zwei Hauptbereiche: eine Kundenübersicht, die gleichzeitig die Startseite der Anwendung darstellt, und eine Nachrichtenverwaltung. Eine Nachrichtenvorschau ist auf jeder Webseite von Crimson Assurance über die Hauptnavigation abrufbar.

Die Hauptnavigation in der Kopfleiste jeder Webseite umfasst ein Hauptmenü und ein Benutzermenü. Das Hauptmenü zeigt zu Demonstrationszwecken lediglich die Kundenübersicht als einzigen Menüpunkt. Das Benutzermenü umfasst einen Link zu den persönlichen Nachrichten des aktuell angemeldeten Nutzers, die Vorschau der fünf letzten neuen Nachrichten von Kolleginnen und einen Nutzer-Avatar mit dem eigenen Nutzernamen. Ein Klick auf den Nutzernamen öffnet ein Menü, das einen Link zum Abmelden von der Anwendung enthält.

Jeder Hauptinhalt auf den Seiten der Anwendung beginnt mit einer Orientierungsnavigation in Form einer Breadcrumb-Navigation.

Die Kundenübersicht erlaubt die Suche nach Kundennamen. Die Ergebnisliste baut sich während der Suche dynamisch auf. Angemeldete Nutzerinnen können sich zudem ihre zuletzt kontaktierten Kunden anzeigen lassen – wahlweise begrenzt auf 5 oder 20 Einträge. Auch eine Übersicht sämtlicher jemals kontaktierter Kunden ist verfügbar.

Nach der Auswahl eines Kunden zeigt ein Kundendeckblatt neben dessen persönlichen Daten auch die mit ihm abgeschlossenen Verträge und ihm unterbreitete Angebote. Die Nachrichtenübersicht zeigt eingegangene und ausgegangene Nachrichten von und an Kollegen der angemeldeten Nutzerin.

Der Nachrichteneingang und der Nachrichtenausgang lassen sich nach Datum und gruppiert nach Status – gelesen oder ungelesen – sortieren. Auch eine Volltextsuche innerhalb aller Nachrichten und innerhalb gefilterter Nachrichten ist möglich. Die angezeigten Nachrichten erscheinen in Zehnerblöcken. Diese Paginierung kann über native HTML-Schaltflächen durchlaufen werden.

Die Auswahl einer Nachricht führt zu einer Detailseite mit den üblichen Angaben von Sender, Betreff und Inhalt. Die Nutzerin kann eine geöffnete Nachricht löschen, weiterleiten und als ungelesen kennzeichnen. Von dieser Detailseite aus kann man auch zur vorherigen oder zur nächsten Nachricht navigieren oder zur Nachrichtenübersicht zurückkehren.

Die Nachrichtenübersichtsseite erlaubt die Navigation auf eine Seite zum Verfassen einer neuen Nachricht. Für das Schreiben und Versenden einer Nachricht sind der Name des Empfängers, ein Betreff und der Inhalt der Nachricht anzugeben. Von dieser Seite aus kann man auch zurück zur Nachrichtenübersicht navigieren.

Das Beispiel ist bewusst schlank gehalten, um anhand weniger Seiten und Inhalte die Prinzipien barrierefreier Produktentwicklung zu zeigen und zu beschreiben. Die erläuterten Techniken und Prinzipien lassen sich auf beliebige andere Kontexte übertragen, inhaltlich analog auch auf Domänen außerhalb des Webs.

Sprachangabe per -Tag

Für die korrekte Aussprache von Wörtern durch eine Sprachsynthese, wie sie auch häufig als Ausgabemedium von Screenreadern eingesetzt wird, müssen Entwicklerinnen und Entwickler zunächst die Sprache der gesamten Webseite per lang-Attribut im -Tag angeben. Für die Verständlichkeit von Wörtern in einer anderen Sprache als derjenigen, in der der Inhalt der Webseite geschrieben ist, ist anschließend eine weitere Anpassung vorzunehmen.

Beispielsweise ist es schwierig, englische Begriffe mit einer auf Deutsch eingestellten Sprachsynthese und somit einer deutschen Aussprache zu verstehen. Einzelne englische Wörter im Inhaltsbereich einer Seite müssen Entwicklerinnen und Entwickler daher entsprechend per lang-Attribut auszeichnen. Ausgenommen sind eingedeutschte Wörter wie Computer und Keyboard.

Die Sprachangabe im lang-Attribut erfolgt durch die internationalen Sprachcodes, für Deutsch also beispielsweise de, für Englisch en. Ausdrucksweisen werden mit den jeweiligen internationalen Sprachcodes mit einem Bindestrich getrennt an die Basissprache angefügt, beispielsweise de-de für in Deutschland gesprochenes Deutsch, en-us für amerikanisches Englisch.

Eine korrekte Syntax ist:

<html lang="de-de">

Der Kopfbereich

Im Kopfbereich einer Webseite, der mit <head> beziehungsweise </head> umschlossen ist, ist per <title>-Tag ein sinnvoller und leicht verständlicher Titel anzugeben. Dadurch ist sie beim Wechsel zwischen geöffneten Browser-Fenstern leichter zu finden.

Ein allgemeiner Titel wie der Name des Unternehmens reicht hierfür nicht aus. Der Titel soll sich auf den Hauptzweck der jeweiligen Webseite beziehen. So genügt es beispielsweise nicht, den Titel „Crimson Assurance“ zu vergeben. Für die Login-Seite ist etwa „Crimson Assurance – Login“ ein geeigneter, deutlicher Titel. Der Unternehmensname selbst sollte stets Bestandteil des Titels sein.

Bei häufig wechselndem interaktivem Inhalt auf verschiedenen Seiten einer Webanwendung mit unterschiedlichen Zielsetzungen kann es sinnvoll sein, die Hauptaktivität an den Anfang des Titels zu setzen. Bei rein informativen Webseiten kann das Hauptthema der jeweiligen Webseite auch hinter dem Unternehmensnamen stehen.

Sinnvolle Titel für Crimson Assurance sind: „Login – Crimson Assurance“, „Kundenübersicht – Crimson Assurance“ und „Nachrichten – Crimson Assurance“.

Landmarken

Mithilfe der Landmarken, die HTML5 eingeführt hat, lässt sich eine Webseite nicht nur gut strukturieren. Sie sorgen auch dafür, dass sich die wichtigsten Bereiche einer Webseite schnell anspringen und identifizieren lassen. Folgende Landmarken sollten immer verwendet werden:

• <header> für den Seitenkopf
• <main> für den Hauptbereich
• <nav> für einen Navigationsbereich
• <footer> für die Fußleiste

Darüber hinaus lassen sich zwei weitere Landmarken sinnvoll einsetzen:

• <section> für wichtige Regionen innerhalb einer der genannten Landmarken für die Hauptstrukturierung
• <aside> für Bereiche ohne Hauptinhalt, aber zu dessen Anpassung, wie beispielsweise eine Seitenleiste

Einige Landmarken lassen sich seit HTML5 nativ setzen. Weitere Landmarken stehen mit Hilfe von ARIA per role-Attribut innerhalb eines HTML-Tags zur Verfügung. ARIA steht für Accessible Rich Internet Applications und stellt eine Ergänzung zu HTML dar, um UI-Elemente semantisch auszuzeichnen. ARIA soll nur dann zum Einsatz kommen, wenn HTML nicht bereits nativ die benötigte semantische Information bereitstellt.

Tabelle 1 zeigt die nativen HTML-Landmarken, deren ARIA-Rollen-Entsprechungen und die Ausgaben bei Verwendung einer Sprachsynthese. Die Ausgaben unterscheiden sich von Screenreader zu Screenreader. Die angegebenen Ausgaben beziehen sich auf den Screenreader, mit dem die Autoren die Accessibility der Demoanwendung überprüft haben. Die Ausgabe „Sprungmarke“ ist nicht zu verwechseln mit den später beschriebenen „Sprunglinks“.

Die Landmarken lassen sich per aria-label bezeichnen. Diese Bezeichnungen werden ausschließlich an Hilfstechnologien übermittelt und erscheinen nicht visuell. Per Screenreader kann ein Nutzer durch einen einzigen Tastendruck von Landmarke zu Landmarke springen. Ohne eine Landmarkenbezeichnung per aria-label erfolgt nach einem Sprung keine Angabe, auf welcher Landmarke man sich befindet. Das gilt auch für native HTML5-Landmarken. In diesem Fall ermöglicht nur eine Navigation in die nächste Zeile eine Orientierung.

Bei Crimson Assurance befindet sich im Header, der die Landmarke <header> erhalten hat, eine <nav>-Landmarke. Diese markiert ein Navigationsmenü, wie es in einem Webseiten-Header üblicherweise vorkommt. Um zu verdeutlichen, dass es sich um die Hauptnavigation handelt, erhält die <nav>-Landmarke per aria-label die Bezeichnung „Hauptnavigation“. Auf einer Webseite könnte es auch mehrere Navigationslandmarken geben, beispielsweise für eine Breadcrumb-Navigation oder als Navigation durch paginierten Inhalt.

Vollständig lautet die <nav>-Landmarke im Header bei Crimson Assurance:

<header>
   <nav aria-label="Hauptnavigation">
   ...
</header>

Navigationsmenüs

Ein barrierefreies Navigationsmenü verzichtet auf ausklappbare Elemente und tiefe Verschachtelungen. Native ungeordnete HTML-Listen per <ul>-Tag sind zu bevorzugen. Jede Liste muss dabei per aria-label bezeichnet werden.

Crimson Assurance bindet die gesamte Kopfleiste in ein <nav>-Tag ein, das per aria-label-Attribut mit „Hauptnavigation“ bezeichnet ist. aria-label weist Objekten Bezeichnungen zu, die nicht visuell erscheinen, sich aber durch Hilfstechnologien auslesen lassen. Die Hauptnavigation ist in zwei Navigationsbereiche aufgeteilt, die inhaltlich getrennt sind nach Hauptmenü mit den generellen Hauptbereichen der Website und Benutzermenü mit individuellen Benachrichtigungen und Einstellungen für den jeweiligen Nutzer. Entsprechend sind die beiden Menüs per aria-label mit Hauptmenü und Benutzermenü bezeichnet.

Ein Screenreader erkennt die Bezeichnung einer Liste und gibt sie aus, sobald eine Nutzerin eine Liste fokussiert, sie also anspringt oder den Cursor auf ein Listenelement bewegt. Da es sich um zwei semantisch getrennte Listen zur Navigation handelt, ist es sinnvoll, sie zusätzlich jeweils als eigenen Bereich auszuzeichnen. Über jeder Liste der Navigation steht daher <section> mit der gleichen Bezeichnung wie die jeweilige Liste selbst.

Der Hintergrund für diese redundante Bezeichnung ist, dass sowohl eine <section>-Landmarke als auch eine Liste angesprungen werden. Bei dem Sprung auf eine Landmarke gibt der Screenreader nur den ihr zugewiesenen Text aus. Gleiches gilt für den Sprung in eine Liste, bei dem also die Landmarke und deren Bezeichnung nicht ausgegeben werden. Je nachdem, welches Element ein Nutzer ansteuert, soll er erfahren, wo er sich befindet. Durch die Bezeichnung der <section> und der entsprechenden Liste gibt ein Screenreader aus: „Hauptmenü Region Hauptmenü Liste mit 1 Einträgen“. „Hauptmenü Region“ ist dabei die Ausgabe der Bezeichnung von <section>, „Hauptmenü Liste“ die Bezeichnung der Liste. Nutzerinnen erfahren also, dass sie sich in der Liste „Hauptmenü“ in der Region „Hauptmenü“ befinden und wie viele Einträge die Liste umfasst.

Die gleiche Bezeichnung der Liste und der Region ist nicht zwingend nötig, aber erleichtert die Orientierung, wenn eine Region nur ein Element enthält. Hätte dieses Element eine von der Region abweichende Bezeichnung, könnten Nutzer verwirrt sein und nach dem Element suchen, das der Bezeichnung der Region entspricht.

Die Syntax der Region mit dem Hauptmenü lautet bei Crimson Assurance:

<section aria-label="Hauptmenü">
   <ul aria-label="Hauptmenü">
      <li> ... </li>
      ...
   </ul>
</section>

Positionsmarker

Ein Navigationsmenü zeigt normalerweise an, bei welchem Navigationspunkt man sich aktuell befindet. Diese Angabe erfolgt meist rein visuell durch eine bestimmte Farbgebung, eine Unterstreichung oder ein Icon, manchmal auch durch eine spitze Klammer > vor dem Menüeintrag. All diese Markierungen sind nicht barrierefrei. aria-current="page" vermittelt Nutzern von Hilfstechnologien, welcher Navigationspunkt gerade ausgewählt ist. Visuell hat diese Angabe keinerlei Auswirkung. Die Angabe von aria-current="page" bewirkt die Meldung „Aktuelle Seite“ an den Nutzer, gefolgt von dem Navigationspunkt. Eine Alternative dazu bietet aria-current="true", womit die Ausgabe „Aktuell“ erfolgt. Bei der Angabe einer aktuell angesteuerten Webseite ist also aria-current="page" sinnvoll, bei der Angabe eines aktuell gewählten Elements auf einer Seite ist aria-current="true" zu bevorzugen.

Bei Crimson Assurance lautet die Syntax zur Meldung der aktuellen Seite:

<ul>
   <li>
      <a class="nav-link active" 
      href=".../portal/de" aria-current="page">
         Kundenübersicht
      </a>
   </li>
   <li> ... </li>
   ...
</ul>

Logos

Üblicherweise befindet sich in der Kopfzeile einer Webseite neben dem Navigationsmenü auch das Logo des Seitenbetreibers und ein Klick darauf führt zur Startseite des Webauftritts, was eine entsprechende Beschriftung überflüssig macht. Nutzer von Hilfstechnologien profitieren allerdings immer von der Angabe des Ziels eines Links.

Beim Browsen durch das Internet öffnen sich schnell einige Fenster, Tabs, Dokumente, Anwendungen oder der E-Mail-Client oder eine Nutzerin weiß nach einer Pause nicht mehr, welche Seiten sie besucht hat und welches Fenster gerade ausgewählt ist. Das Logo ist meist das erste UI-Element, auf das ein Besucher einer Website trifft, auch bei dem Wechsel zwischen Tabs. Eine Angabe der Funktion des Logos – üblicherweise das Aufsuchen der Startseite – erleichtert Nutzern von Hilfstechnologie die Orientierung auf der Website. Wichtig ist hierbei – analog zu dem Seitentitel –, auch den Namen des Seitenbetreibers zu nennen. Der Alternativtext der Logo-Grafik sollte durch die Verwendung des alt-Attributs ihre Funktion beschreiben.

Die oft anzutreffende Beschreibung „zur Startseite“ ist allerdings nicht ausreichend informativ. Das Logo von Crimson Assurance verfügt über den Alternativtext „Zur Crimson-Startseite“. Das Wort Logo und eine Beschreibung des Aussehens des Logos sind hier nicht nötig, sofern ein Logo keine Emotionen vermitteln soll – wie beispielsweise ein springendes Pferd – oder bedeutungstragende, bekannte Objekte zeigt – wie einen stilisierten angebissenen Apfel.

Hier die Syntax für das Crimson-Assurance-Logo mit Alternativtext:

<a href="...">
   <img alt="Zur Crimson Startseite" src="/logo-crimson.svg">
</a>

Den Hauptinhalt strukturieren

Die Bereiche einer Webseite zu strukturieren, ist sowohl für die Orientierung als auch für die logische Explorierung einer Webseite notwendig. Sowohl lückenlose Überschriften als auch eine sinnvolle Tab-Reihenfolge und das Verwenden von Landmarken schaffen eine Struktur.

Bei Crimson Assurance ist beispielsweise die Startseite mit der Kundenübersicht wie folgt aufgebaut: Im Hauptinhalt erscheint zuerst eine Breadcrumb-Navigation, damit ein Nutzer erfährt, an welcher Position des Webauftritts er sich aktuell befindet. Erst danach nennt die Hauptüberschrift auf Ebene 1 das Thema der Webseite. Jede Webseite muss genau eine Hauptüberschrift aufweisen, die mit dem <h1>-Tag ausgezeichnet ist. Der Seitentitel kann dieser Hauptüberschrift entsprechen. Nutzer können sich auf diese Weise besser orientieren, da sie ein Fenster auf Basis des Seitentitels wählen und durch die Hauptüberschrift erkennen, ob sie sich tatsächlich auf der gewünschten Seite befinden. Die weiteren Überschriftebenen 2 bis 6 sollten je nach Struktur der Webseite Anwendung finden.

Der Hauptinhalt unter der Überschrift auf Ebene 1 unterteilt sich bei Crimson Assurance mit Überschriften auf Ebene 2 in die semantisch sinnvoll getrennten Bereiche KUNDENSUCHE und LETZTE KUNDEN. Diese beiden Bereiche sind gleichwertig, da diese Aktivitäten auf der Webseite durchgeführt werden können: Kundendaten aufrufen, entweder durch eine Kundensuche oder durch eine Übersicht der letzten Kunden.

Die Daten von Kunden sind in beiden Bereichen auf der Überschriftebene 3 strukturiert. Das Explorieren der Seite folgt also der Granularität der Informationen im Bereich des Hauptinhalts.

Wichtig ist, Lücken in der Überschriftenstruktur zu vermeiden. Wären beispielsweise die Kundendaten auf Ebene 4 oder die Anzeige der letzten Kunden nicht auf der gleichen Ebene wie die Kundensuche, könnte eine Nutzerin verwirrt sein und nach der vermeintlich fehlenden Überschrift suchen. Die Strukturierung von Informationen auf einer niedrigeren Ebene könnte Nutzer dazu veranlassen, über den Sinn dessen nachzudenken und sie somit von der eigentlichen Aktivität ablenken.

Die Überschriften auf Ebene 2 bieten einem Screenreader-Nutzer eine schnelle Übersicht über die wichtigsten Bereiche in dem Themengebiet, das durch die Überschrift auf Ebene 1 beschrieben ist. Die Bereiche unter den Überschriften auf Ebene 3 sind erst nach einem Überblick über die generellen Hauptbereiche der Webseite relevant. Wäre beispielsweise der Bereich mit den letzten Kunden auf Ebene 3 statt Ebene 2 angesiedelt, hätte er strukturell nicht den gleichen Stellenwert wie die Kundensuche und ein Nutzer würde ihn fälschlicherweise als ihren Unterpunkt erfassen. Wären zu Kunden noch weitere untergeordnete Informationen zu finden, ließen sich hierfür die Überschriftebenen 4, 5 und 6 verwenden.

Abschnitte unterhalb einer Überschrift sollten innerhalb des <p>-Tags stehen. Diesen Tag kann ein Screenreader direkt ansteuern. Die Tags <article> und <section> lassen sich für eine weitere Gliederung verwenden: <article> ist ein in sich geschlossener Inhaltsbereich, der auch für sich allein stehen kann und wiederverwendbar ist. <section> ist ein Abschnitt mit Überschrift, der allerdings Teil eines größeren Ganzen wie eines <article> ist und nicht für sich allein stehen kann. Sowohl <article> als auch <section> enthalten üblicherweise Absätze in <p>-Tags.

Abschnitte in <div>-Tags oder <span>-Tags vermitteln keine Semantik und werden von einem Screenreader auch nicht als bedeutungstragende, direkt anspringbare Bereiche erkannt, wenngleich er den Text weiterhin als solchen identifiziert.

Sprunglinks

Crimson Assurance bietet dem Nutzer eine Übersicht der von ihm kontaktierten Kunden. Wie viele Kunden in diesem Bereich angezeigt werden, kann die Nutzerin wählen: 5, 20 oder alle Kunden stehen als Optionen zur Verfügung, wovon 5 als Standardwert vorgegeben ist. Diese Auswahl ist als Liste implementiert. Die Liste ist mit aria-label="Wie viele Kunden anzeigen?" beschriftet und lässt sich unter Nennung dieser Beschriftung direkt anspringen.

Eine solche Auswahlliste kann sehr lang werden, je nachdem, welche Möglichkeiten der Anpassungen man Nutzern anbietet. Bei Crimson Assurance ist eine feiner abgestufte Auswahlmöglichkeit mit 5-er oder 10-er Schritten denkbar, mit am häufigsten kontaktierten Kunden und Ähnlichem, was zu einer sehr langen Liste führen würde. Daher besteht bei Crimson Assurance über der Liste die Möglichkeit, direkt zu den letzten Kunden zu springen und somit die Liste mit der Auswahl anzuzeigender Kunden zu übergehen. Ein solcher Sprunglink ist umso sinnvoller, je länger die Liste ist. Nutzer eines Screenreaders können versuchen, die Auswahlliste durch einen Sprung zum nächsten Abschnitt, zur nächsten Überschrift oder zur nächsten Landmarke zu übergehen. Ob sich der Fokus dann tatsächlich auf dem Element direkt hinter der Auswahlliste befindet, weiß man allerdings auf diese Weise nicht. Hierfür ist eine weitere Orientierung nach oben und unten von der aktuellen Position aus nötig, die sogar länger dauern kann als das zeilenweise Durchgehen der Auswahlliste.

Ein Sprunglink unterstützt ausschließlich Nutzer von Hilfstechnologien und muss daher nicht visuell übermittelt werden. Wenn ein Element lediglich einer Hilfstechnologie wie einem Screenreader zugänglich sein soll, kann man den Sprunglink aus dem sichtbaren Bereich herausschieben und seine Größe auf 1 Pixel setzen. Ein HTML- oder ARIA-Attribut, um ein Element nur für Hilfstechnologie sichtbar zu machen, ist leider nicht vorhanden. Bootstrap bietet es allerdings mit der Klasse sr-only an. Ähnliches gilt vermutlich auch für andere Frameworks.

Die Liste zur Auswahl der Anzahl der anzuzeigenden letzten Kunden steht bei Crimson Assurance unter der Landmarke <aside>. Diese Landmarke ist genau für solche Anpassungen vorgesehen, die nicht unmittelbar dem Hauptinhalt entsprechen. Zwar ändert man durch die Optionen die Anzeige des Contents, ein eigener Bestandteil des Hauptinhalts ist die Auswahlliste aber nicht. <aside> eignet sich gut für Seitenleisten oder Toolbars.

Bei Crimson Assurance lässt sich über den nebengeordneten Bereich innerhalb der aside-Landmarke die Anzahl der angezeigten letzten Kunden ändern. Ein Screenreader erhält diese Funktion noch einmal gezielt per aria-label. Außerdem erhält ein Screenreader die Möglichkeit, den Auswahlbereich zu überspringen und direkt an den Beginn der Liste der letzten Kunden zu gelangen. Da diese Möglichkeit lediglich für einen Screenreader hilfreich ist, kann man sie per sr-only visuell ausblenden.

Die Syntax im Ganzen lautet bei Crimson Assurance:

<h2>Letzte Kunden</h2>
<a href="#last-customers" class="sr-only">Direkt zu den letzten Kunden</a>
<aside aria-label="Wie viele Kunden anzeigen?">
   <ul>
      <li>
         <a href=".../portal&amp;size=5">
            5
         </a>
      </li>
      <li> ... </li>
      ...
   </ul>
</aside>

Fußleiste

Ähnlich wie die Navigation in der Kopfzeile besteht auch die Fußzeile aus zwei Listen, die aufgrund der in ihnen vorhandenen Informationen semantisch getrennt sind. So enthält die erste Liste, die mit aria-label="Seitenbetreiber" bezeichnet ist, die Informationen über den Betreiber der Website und eine kurze Information über Crimson Assurance. Die zweite Liste ist mit aria-label="Allgemeine Angaben" bezeichnet und enthält neben einem Link zu detaillierten Informationen über das Projekt und einer Erklärung zur Barrierefreiheit die rechtlich vorgeschriebenen Angaben zum Datenschutz und das Impressum.

Der Quellcode der Fußzeile von Crimson Assurance sieht wie folgt aus:

<footer aria-label="Fußleiste">
    <ul aria-label="Seitenbetreiber">
        <li>
            <p>
               Crimson Assurance ist eine Demo-Anwendung 
               der innoQ Deutschland GmbH
            </p>
        </li>
        <li>
            <a href="...">
               <img alt="Zur INNOQ-Startseite"
               src="/portal/static/logos/innoq-logo--petrolapricot.svg">
            </a>
        </li>
    </ul>
    <ul aria-label="Allgemeine Angaben">
       <li>
          <a href=".../portal/prject">
             Informationen zum Projekt
          </a>
       </li>
       <li>
          <a href=".../portal/accessibility">
             Erklärung zur Barrierefreiheit
          </a>
       </li>
       <li>
          <a href=".../de/datenschutz/">
             Datenschutz
          </a>
       </li>
       <li>
          <a href=".../de/impressum/">
             Impressum
          </a>
       </li>
    </ul>
</footer>