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

Crimson-Assurance-Navigation mit beispielhaften Markierungen, wo Hilfstechnologien Informationen ausgeben.
Crimson-Assurance-Navigation mit beispielhaften Markierungen, wo Hilfstechnologien Informationen ausgeben.

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

Die Kundenübersichtsseite enthält verschiedene Landmarken.
Die Kundenübersichtsseite enthält verschiedene 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:

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

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“.

Landmarken mit ihren HTML-Elementen, ARIA-Rollen und Ausgaben bei Verwendung einer Sprachsynthese.
HTML ARIA–Rolle Ausgabe
<header> banner Banner-Sprungmarke
<main> main Hauptsprungmarke
<nav> navigation Navigationssprungmarke
<form> form Formular
<aside> complementary Ergänzung
<footer> contentinfo Inhaltsangabe
<section> region Region

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

Die Navigationslandmarke ist mit dem aria-label
Die Navigationslandmarke ist mit dem aria-label „Hauptnavigation“ bezeichnet.

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>
Die Hauptnavigation ist in die zwei inhaltlich/semantisch unterschiedlichen Regionen
Die Hauptnavigation ist in die zwei inhaltlich/semantisch unterschiedlichen Regionen „Hauptmenü“ und „Benutzermenü“ unterteilt.

Positionsmarker

Zur Markierung der aktuellen Seite kommt aria-current=
Zur Markierung der aktuellen Seite kommt aria-current=„page“ zum Einsatz.

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

Das Crimson-Assurance-Logo besitzt den Alternativtext
Das Crimson-Assurance-Logo besitzt den Alternativtext „Zur Crimson-Startseite“.

Ü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 Strukturierung des Hauptinhalts auf der Kundenübersichtsseite.
Die Strukturierung des Hauptinhalts auf der Kundenübersichtsseite.

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

Ein Sprunglink führt zum Beginn der Liste der letzten Kunden.
Ein Sprunglink führt zum Beginn der Liste der letzten Kunden.

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>
Der Inhalt der Fußzeile ist semantisch in zwei Listen geteilt, jeweils benannt mit aria-label.
Der Inhalt der Fußzeile ist semantisch in zwei Listen geteilt, jeweils benannt mit aria-label.
Training

Accessibility in der Praxis

Werde Accessibility-Profi mit anschließender Zertifizierung. Unser Accessibility-Training vermittelt dir einen umfassenden Überblick über grundlegende Details, Hinweise für die Umsetzung und Evaluation von Accessibility-Anforderungen. Wir werden Mängel der Accessibility festhalten und darauf eingehen, wie sie verbessert werden können. Zusätzlich lernst du praktische Anpassungen direkt an eurer Website oder an mobilen Anwendungen. Auch die Analyse und Optimierung interner Prozesse im Bezug auf Accessibility sowie die Erarbeitung von Handlungsempfehlungen für zukunftssichere Anwendungen sind Bestandteil von Accessibility und dem Training. Frontalvorträge sind irgendwann ermüdend? Finden wir auch! Das Training ist ein interaktives Erlebnis mit Aha-Effekt, in dem auf deine Fragestellungen direkt eingegangen wird.

Fazit

Accessibility schon durch kleine Anpassungen

Visuell wahrnehmbar sind auch die Seitenstruktur, Listen, Schaltflächen, Seitenleisten, Logos und andere Grafiken. Solche strukturellen Inhalte und semantischen Elemente muss ein Screenreader erkennen und analysieren können. Die Verwendung nativer HTML-Elemente und die korrekte Auszeichnung von Objekten gemäß ihrer tatsächlichen Semantik und Funktion sind dafür essenziell.

Mit der Verwendung der nativen HTML-Elemente allein ist bereits eine gute Grundlage für die Accessibility einer Webanwendung geschaffen. Alternativtexte für grafische Inhalte und eine logische Seitenstruktur erleichtern Nutzern von Hilfstechnologien den Überblick über eine Webanwendung enorm. Das Verwenden von Landmarken und Auszeichnungen von Elementen mit Hilfe von ARIA-Anweisungen sorgen darüber hinaus für ein schnelles Auffinden der relevanten Inhalte.

Die in diesem Artikel gezeigten Beispiele erhöhen die Barrierefreiheit von Webanwendungen und zeigen, wie einfach und schnell Entwicklerinnen und Entwickler diese Verbesserung mit wenig Mehraufwand erreichen können. Sie verdeutlichen auch, dass die Hinweise für Hilfstechnologien in den meisten Fällen visuell keine Auswirkungen haben. Der Kreativität der Designer und der Verwendung moderner Technologien sind keine Grenzen gesetzt, sofern die Prinzipien mit Hilfe der gezeigten Anpassungen eingehalten werden. Zudem zeigen die Beispiele, welche Auswirkungen bereits kleine Ergänzungen auf die Nutzbarkeit einer Webanwendung durch Nutzer von Hilfstechnologien haben. Es bedarf nur einer kleinen Eingewöhnung, um entwicklungsbegleitend nahezu automatisch eine hohe Barrierefreiheit einer Webanwendung zu gewährleisten.

Der zweite Teil dieser Serie wird auf die inhaltliche Gestaltung einer barrierefreien Webanwendung eingehen.