Accessibility im Web Teil 2: Barrierefreie Inhalte

Um den Inhalt einer Webanwendung barrierefrei zu vermitteln, lassen sich native HTML-Elemente und leicht erlernbare ARIA-Spezifikationen einsetzen. Der erste Teil der Serie beschrieb den Aufbau einer barrierefreien Website am Beispiel der fiktiven Versicherung "Crimson Assurance". Die Kenntnis des Artikels hilft beim Verständnis dieses zweiten Teils, ist aber keine zwingende Voraussetzung.

Die Codebeispiele stellen auch hier nicht die einzige Umsetzungsmöglichkeit dar, sondern die Ideallösung im Rahmen der Beispielanwendung. Sie sollen die wichtigsten Elemente der barrierefreien Vermittlung von Inhalt einer Webanwendung erläutern und einen Einblick auf technischer Ebene geben. Die gezeigten Namen der Mitarbeitenden sind ebenso wie die Versicherung fiktiv.

Breadcrumb-Navigation

Der Hauptbereich jeder Seite der Webanwendung beginnt unter der Landmarke <main> mit einer Breadcrumb-Navigation. Ein Nutzer kann daran seine Position innerhalb der Websitestruktur erkennen und neben der Hauptüberschrift auch dort prüfen, ob er tatsächlich die gewünschte Seite aufgerufen hat. Über diese Navigation kann eine Nutzerin außerdem auf dem bisher gegangenen Pfad wieder bis zur Startseite zurückwandern. Neben einer leichteren Orientierung lassen sich darüber auch detailliertere Informationen über die Websitestruktur als in der Hauptnavigation vermitteln.

In Bezug auf Accessibility sollte eine Breadcrumb-Navigation deutlich als solche gekennzeichnet sein. Eine Bezeichnung wie "Sie sind hier:" liest man zu diesem Zweck häufig. Die Kennzeichnung sollte nicht nur für Screenreader sichtbar sein, sondern für alle, da die Sichtbarkeit der Kennzeichnung das rasche Auffinden der Navigation und damit der aktuellen Position ermöglicht.

Im Quellcode sollte sich der gesamte Bereich unter einer <nav>-Landmarke befinden. Wie die Hauptnavigation sollte auch diese <nav>-Landmarke per aria-label bezeichnet werden. In Crimson Assurance heißt diese Navigation "Navigationspfad"; die Bezeichnung ist visuell nicht sichtbar. "ARIA" steht für "Accessible Rich Internet Applications" und stellt eine Ergänzung von HTML dar, um UI-Elemente semantisch auszuzeichnen. Man sollte es nur verwenden, wenn HTML nicht bereits nativ die benötigte semantische Information bereitstellt.

Der Pfad sollte mit dem <ol>-Tag als sortierte Liste erscheinen. Die Liste ist mittels aria-label genauso wie die <nav>-Landmarke mit "Navigationspfad" bezeichnet. Der letzte Eintrag wird per aria-label="page" als aktuelle Seite gekennzeichnet.

Die redundante Bezeichnung der Landmarke und der Liste zeigen sowohl beim direkten Anspringen der Landmarke als auch beim direkten Anspringen der Liste unmittelbar, in welchem Bereich der Webseite man sich befindet.

Hier die Breadcrumb-Navigation auf der Kundenübersichtsseite von Crimson Assurance:

<nav aria-label="Navigationspfad">
   <span>Sie befinden sich hier: </span>
   <ol aria-label="Navigationspfad">
      <li>
         <a href=".../portal">Startseite</a>
      </li>
      <li>
         <a href=".../portal">
             Kundenübersicht
         </a>
      </li>
      <li>
         <a href=".../portal/customers/a2" aria-current="page">
             Kundendeckblatt
         </a>
      </li>
   </ol>
</nav>

Suchfelder

Crimson Assurance bietet eine Suche nach Kunden auf der Kundenübersichtsseite. Als Label des Suchfelds legt es per <label for=""> "Kundenname" fest. Die Verknüpfung mit dem Suchfeld erfolgt über die ID, die das Label eindeutig einem Element zuordnet. Ein Label lässt sich genau einem Element zuweisen und ein Element kann genau ein Label erhalten. Labels bieten eine eindeutige und von Hilfstechnologien erkennbare Beschriftung eines Elements.

Zudem ist das Label eines interaktiven Elements wie ein Eingabefeld anklickbar, um den Cursor in das Eingabefeld zu setzen. Ein Screenreader liest häufig ein Label in einer eigenen Zeile vor. Das Fokussieren eines Elements ist deutlich effizienter, da sich einfach diese Zeilen anklicken lassen, um den Fokus auf das entsprechende Eingabefeld zu setzen.

Auch wenn das Label in derselben Zeile vor einem Eingabefeld steht, ist es einfacher, an den Zeilenanfang zu springen und zu klicken, als zunächst das Eingabefeld zu fokussieren. Für motorisch beeinträchtigte Nutzer sind HTML-Labels sehr hilfreich, da sie den anklickbaren Bereich vergrößern. Die Syntax des Suchfelds mit dem Label "Kundenname" von Crimson Assurance lautet:

<form id="customer-search-form">
   <label for="customer-search-input">Kundenname</label>
   <input id=" customer-search-input">
</form>

Ein Suchfeld wird mit dem <input>-Type-Attribut search semantisch ausgezeichnet. Eine Hilfstechnologie kann diese Information an Nutzer übermitteln. Sie erfahren damit direkt, um welche besondere Art von Eingabefeld es sich handelt und welche Aktion darüber durchführbar ist.

Gerade bei einem Suchfeld auf einer persönlichen Webseite bietet sich Autovervollständigung an. Sie unterstützt einerseits Nutzerinnen mit Konzentrationsschwäche und beschleunigt andererseits generell Suchen nach häufig kontaktierten Kunden.

Ein Placeholder hingegen verbessert nicht explizit die Barrierefreiheit. Es wird im Gegenteil oft von dessen Einsatz abgeraten, da sämtliche Informationen, die dort als Unterstützung angeboten werden, besser im Label erscheinen sollten. Bei Crimson Assurance steht als Placeholder ein Kundenname als Beispiel für eine mögliche Eingabe. Da diese kein bestimmtes Format erfordert, ist der Placeholder eigentlich nicht notwendig. Er dient aber als Beispiel für die Verwendung eines Placeholders. Wenn ein Placeholder beispielsweise auf ein bestimmtes Datumsformat hinweisen soll, wäre dies besser im Label des Eingabefelds anzugeben. Somit ist bei der Eingabe eines falschen Formats auch bei einer Korrektur noch erkennbar, welches Format gewünscht ist. Da ein Placeholder nach einer Eingabe nicht erneut erscheint, ist man ansonsten gezwungen, sich an das benötigte Format zu erinnern.

Bei Crimson Assurance ist die Kundensuche die erste Hauptaktivität der Webseite "Kundenübersicht", oberhalb der zweiten Hauptaktivität "Letzte Kunden". Das Attribut autofocus des Suchfelds setzt den Cursor beim Laden der Seite direkt in das Suchfeld, so dass ein Nutzer unmittelbar nach dem Laden der Seite nach einem Kunden suchen kann, ohne das Suchfeld ansteuern zu müssen.

Die Syntax für das Suchfeld bei Crimson Assurance lautet:

<input type="search" autocomplete="on" placeholder="Johnnie Summers" autofocus>

Crimson Assurance zeigt Ergebnisse der Suche nach Kunden nach der Eingabe von mindestens zwei Zeichen in das Suchfeld. Die Liste gefundener Kunden wird dynamisch erstellt und ändert sich mit der Eingabe weiterer Buchstaben. Ein Screenreader erkennt zunächst nicht, dass sich in einem anderen als dem aktuell fokussierten Bereich Inhalte ändern. Ohne weitere Informationen, die die Anwendung an einen Screenreader übermittelt, muss eine Nutzerin ab der Eingabe von zwei Zeichen und jedem weiteren Zeichen das Suchfeld verlassen und prüfen, wie viele Kunden gefunden wurden; ein mühsames und nicht zufriedenstellendes Vorgehen.

Um einer Hilfstechnologie wie einem Screenreader zu vermitteln, dass sich ein Bereich einer Webseite dynamisch durch Aktivitäten der Nutzer verändert, können Entwickler dem sich ändernden Bereich das ARIA-Attribut aria-live mit dem Wert "assertive" zuweisen. aria-live markiert den Bereich einer Webseite, der sich dynamisch ändert und den ein Screenreader "beobachten" soll. Hierdurch ist es nicht nötig, die komplette Seite wiederholt neu zu laden und vorlesen zu lassen, um Änderungen verfolgen zu können.

Der Wert "assertive" spezifiziert, dass es sich bei den Änderungen um dringende Informationen handelt, die die Seite unmittelbar an die User übermitteln muss. Bei einer dynamischen Suche ist es beispielsweise sinnvoll, dass die Seite unmittelbar die Anzahl der Suchergebnisse mitteilt, während eine Nutzerin noch tippt beziehungsweise wenn sie das Tippen nur für sehr kurze Zeit stoppt, um die Anzahl der Suchergebnisse anzuhören.

Bei Crimson Assurance wird der Bereich der Suchergebnisse als dynamische Region ausgezeichnet und als "assertive" priorisiert. Ab dem zweiten getippten Buchstaben gibt die Seite sofort eine Meldung über die Anzahl der Suchergebnisse aus. Darüber hinaus werden sämtliche Suchergebnisse vorgelesen. Eine Nutzerin hat somit die Möglichkeit, sich sowohl die Anzahl der Suchergebnisse als auch die Suchergebnisse selbst vorlesen zu lassen, ohne den Cursorfokus ändern zu müssen. Genügt ihr die reine Anzahl der Suchergebnisse, so muss sie nicht die komplette Ausgabe der Suchergebnisse anhören, um weiter suchen zu können, sondern kann die Ausgabe jederzeit unterbrechen.