Seite 2: Filteroptionen

Bei Crimson Assurance ist das Filtern sowohl der eingegangenen Nachrichten als auch der ausgegangenen Nachrichten über mehrere Optionen möglich: durch eine Volltextsuche, nach Datum sortiert, nach gelesen oder ungelesen und mit der Option, ausschließlich ungelesene Nachrichten anzuzeigen. Damit Hilfstechnologien diese Gruppe von Filteroptionen als semantisch zusammengehörende Gruppe interpretieren, wird die Gruppe mit <fieldset> umschlossen. Unabhängig davon, ob man bei zeilenweisem Lesen von oben oder unten auf die Gruppe trifft, in das Suchfeld, zu der Auswahlliste mit den übrigen Filteroptionen oder auf die Checkbox mit der Option, nur ungelesene Nachrichten anzuzeigen, springt, erhält man somit immer die Meldung, dass man sich in einer Gruppe mit Filteroptionen befindet.

Hierfür wird neben <fieldset> zusätzlich <legend> angegeben, mit dem die Gruppe beschriftet wird. Bei Crimson Assurance ist die Filtergruppe beschriftet mit "Nachrichteneingang filtern". Diese Beschriftung ist nicht sichtbar, sondern steht durch "sr-only" nur Hilfstechnologien zur Verfügung. Visuell ist bereits deutlich, dass es sich um eine Gruppe von Filtermöglichkeiten der Nachrichten handelt. Das Unsichtbarmachen der Beschriftung führt zu einer übersichtlicheren Seite.

Die Syntax bei Crimson Assurance lautet für das Filtern des Nachrichteneingangs:

<fieldset>
   <legend class="sr-only">Nachrichteneingang filtern</legend>
   <label for="inbox-search">Suche</label>
   <input type="text" name="inbox-search" id="inbox-search" value="">
   <label for="in-message-sort">Sortieren nach</label>
   <select id="in-message-sort" name="inbox-sort">
      <option value="date-desc" selected>
         Datum (Neueste zuerst)
      </option>
      <option value="date-asc">
         Datum (Älteste zuerst)
      </option>
      <option value="unread-first">
         Status (Ungelesene zuerst)
      </option>
      <option value="unread-last">
         Status (Gelesene zuerst)
      </option>
   </select>
   <input id="only-show-unread" name="only-show-unread" type="checkbox"
   value="true">
   <label for="only-show-unread">
      Nur ungelesene Nachrichten anzeigen
   </label>
   <button type="submit">
      Filtern
   </button>
</fieldset>

Paginierungen

Die Beispiel-Website zeigt eingegangene und ausgegangene Nachrichten gleichzeitig an. Beides befindet sich auf derselben Webseite in zwei separaten Bereichen mit jeweiliger Filtermöglichkeit. Für beide Übersichten ist eine Paginierung mit zehn Nachrichten auf jeder Übersichtsseite implementiert. Für die Accessibility erfolgt die Paginierung durch Schaltflächen, die innerhalb eines Navigationsbereichs per <nav> gruppiert sind. Dieser Navigationsbereich ist mit aria-label="Durch eingegangene Nachrichten blättern" beziehungsweise mit aria-label="Durch ausgegangene Nachrichten blättern" beschriftet.

Zu Beginn dieser Navigationsbereiche erfährt eine Nutzerin, wie viele Seiten die Nachrichtenübersicht umfasst und auf welcher Seite sie sich aktuell befindet. Sichtbar sind hier die reinen Zahlen, beispielsweise "1 / 4". Eine Hilfstechnologie soll ausgeben, worum es sich bei diesen Zahlen handelt, da dies nicht eindeutig über die visuelle Positionierung der Angabe in Relation zu den Suchergebnisseiten erkennbar ist. Diese zusätzliche Angabe erfolgt bei Crimson Assurance mit dem Kommando aria-description:

<p aria-description="Seite">1 / 4</p>

Die Schaltflächen "Nächste Seite", "Vorherige Seite", "Erste Seite" und "Letzte Seite" blättern durch die Nachrichtenübersicht. Sie werden abhängig von der aktuellen Seite ein- beziehungsweise ausgeblendet, so dass nur diejenigen Aktionen verfügbar sind, die zu einer Änderung der Seitenübersicht führen. So fehlen beispielsweise auf der ersten Seite die Schaltflächen "Vorherige Seite" und "Erste Seite".

Die Beschriftungen der Schaltflächen sind nicht sichtbar, sondern werden per aria-label nur einer Hilfstechnologie mitgeteilt. Sichtbar sind Symbole, die den Schaltflächen per CSS zugewiesen werden. Auch hier schränkt eine Maßnahme für eine bessere Barrierefreiheit das Aussehen in keiner Hinsicht ein und erlaubt die kreative Ausgestaltung einer modernen Oberfläche.

Die Navigation über die verschiedenen Seiten der angezeigten Nachrichten wird unter jeder Seite, also im Fall von Crimson Assurance unterhalb der zehnten Nachricht, wiederholt. Das verhindert, dass man zunächst wieder das Paginierungsmenü aufsuchen muss. Wer Konzentrationsprobleme oder Orientierungsschwierigkeiten hat, profitiert hiervon ebenso wie Nutzer von Screenreadern, die an dieser Stelle blättern und effizient von unten nach oben durch die Nachrichten springen können, um einen Überblick zu erhalten und eine gesuchte Nachricht zu finden.

Damit ungelesene oder wichtige Nachrichten schnell auffindbar sind, verwendet Crimson Assurance Icons neben jeder Nachricht, die den entsprechenden Status angeben. Damit auch Hilfstechnologien diese Informationen auslesen können, erhalten die per CSS erzeugten Icons ein aria-label:

<span aria-label="Ungelesen"></span>

Umfangreiche Listenelemente

Jeder Kunde erscheint bei Crimson Assurance in einer eigenen Kachel mit Name, Adresse, Geburtsdatum und E-Mail-Adresse. Die Kacheln sind in einer ungeordneten Liste eingebunden. Hierdurch erfährt ein Screenreader-Nutzer die Anzahl der angezeigten Kunden. Die Liste der letzten Kunden beispielsweise ist per aria-label als "Letzte Kunden" bezeichnet. Ein Screenreader meldet durch die Listenstruktur und die Bezeichnung mit aria-label: "Letzte Kunden Liste mit 5 Einträgen".

Da ein Sprung in diese Liste für einen Screenreader direkt möglich ist, erleichtern diese Angaben die Orientierung deutlich. Bei einem solchen Sprung liegt der Fokus auf dem ersten Element der Liste und die erste Zeile des ersten Elements wird ebenfalls angesagt. Im Beispiel lautet die Ausgabe: "Letzte Kunden Liste mit 5 Einträgen George Burke".

Als weitere Besonderheit zur Erhöhung der Accessibility sind in Kundenkarten die jeweiligen E-Mail-Adressen per aria-describedby mit den Namen der entsprechenden Kunden verknüpft, da E-Mail-Adressen nicht immer den vollständigen Klarnamen des Adressaten beinhalten.

aria-describedby verweist auf die ID des Elements, mit dem es verknüpft wird. Im Beispiel erhält der Name die ID "customer-id-a2". Auf diese ID verweist aria-describedby in dem E-Mail-Link. Liest nun ein Screenreader die E-Mail-Adresse aus, nennt er nach der E-Mail-Adresse den verknüpften Namen. Die Ausgabe lautet in diesem Beispiel: "E-Mail: Mustermail@Muster.de George Burke". Ohne aria-describedby würde der Name nicht genannt.

Bei Crimson Assurance lautet der Code mit Listenbezeichnung und Verknüpfung:

<ul id="last-customers" aria-label="letzte Kunden">
   <li>
      <a 
      href=".../portal/de/customers/a2">
         <h3 id="customer-id-a2">George Burke</h3>
         <p>Musterstraße 12, 12345 Musterstadt</p>
         <p>Geburtstag: 04.11.2000 </p>
      </a>
      <p>
         <a href="mailto:Mustermail@Muster.de" aria-describedby="customer-id-a2">
            E-Mail: Mustermail@Muster.de
         </a>
      </p>
   </li>
   ...
</ul>