Seite 3: Pop-up-Menüs

Bei Crimson Assurance zeigt das Benutzermenü einem angemeldeten Benutzer in der Hauptnavigation die Anzahl der von ihm noch ungelesenen Nachrichten von Kolleginnen und Kollegen an. Bei Aktivierung der Schaltfläche zeigt das Menü eine Vorschau der ersten fünf ungelesenen Nachrichten. Darunter erscheinen bei einem Klick auf den Link Mehr Nachrichten alle ungelesenen Nachrichten in dem Nachrichtenfenster mit aktiviertem Filter "Nur ungelesene Nachrichten anzeigen". Falls weniger als fünf ungelesene Nachrichten vorhanden sind, erscheint im Pop-up-Menü dennoch der Link "Mehr Nachrichten", selbst wenn keine ungelesenen Nachrichten vorhanden sind. Auf der Nachrichtenseite besteht die Möglichkeit, sich alle Nachrichten anzeigen zu lassen.

Damit ein Screenreader erkennen kann, dass es sich hier um ein Pop-up handelt und ob die Übersicht der ungelesenen Nachrichten gerade gezeigt wird oder nicht, kommt das ARIA-Attribut aria-expanded mit den Werten true, falls das Pop-up ausgeklappt ist, und false, falls es eingeklappt ist, zum Einsatz. Sonst würde ein Screenreader-Nutzer nicht erfahren, dass ein Klick auf die Anzeige der Anzahl ungelesener Nachrichten weitere Informationen anzeigt. Der Screenreader würde das Pop-up für eine einfache Schaltfläche halten, die ihre Möglichkeit, aufgeklappt zu werden, nicht offenbart.

Durch aria-haspopup="true" erkennt ein Screenreader, dass es sich um ein aufklappbares Menü handelt, das im ausgeklappten Zustand anderen Inhalt überlagert. Um einem Screenreader zu melden, welche Liste das Öffnen des Menüs präsentiert, ist eine Bezeichnung der Liste im <ul>-Tag per aria-label notwendig. Die bei Crimson Assurance für die Liste verwendete Bezeichnung "Vorschau: ungelesene Nachrichten" macht in wenigen Worten deutlich, was die Liste zeigt. Dass sie nur die ersten fünf ungelesenen Nachrichten enthält, ist nicht in der Bezeichnung der Liste nötig. Ein Screenreader erkennt eine Liste mit sechs Einträgen, nämlich fünf ungelesene Nachrichten plus den Link "Mehr Nachrichten", für den Aufruf sämtlicher ungelesener Nachrichten.

Der Code für den Aufruf der letzten fünf Nachrichten einer Nutzerin nach dem Öffnen des Buttons mit der Anzeige von zwei neuen Nachrichten und für die Anzeige dieser Nachrichten bei geöffneter Vorschau mit Nachrichtenbetreff und Datum in der Beispielanwendung:

<button aria-haspopup="true" aria-expanded="true">
   <span>
      2 neue Nachrichten
   </span>
</button>

<section>
   <ul aria-label="Vorschau: ungelesene Nachrichten">
      <li>
         <a href=".../postbox/de/messages/9/">
             <h3 id="messages-id-9">
                 <span id="message-status-9" class="unread-icon" 
                 aria-label="Ungelesen">
                 </span>
                 <span>
                    <span>Jo Spam</span>
                    <span>Vertrag E355</span>
                    <span>19.06.2022, 01:49</span>
                 </span>
             </h3>
          </a>
       </li>
       ...
       <a href=".../postbox/de/messages/inbox/">
          Mehr Nachrichten
       </a>
    </ul>
</section>

Innerhalb des Benutzermenüs in jedem Header der Website befinden sich auch ein Avatar und der Name des aktuell angemeldeten Nutzers. Fehlt Ersterer, enthält dieser Bereich die Initialen. Da diese keinen inhaltsrelevanten Mehrwert bieten, sondern eher die Verständlichkeit erhöhen und das effiziente Erkennen von Informationen erschweren, versteckt Crimson Assurance sie per aria-hidden für den Screenreader.

Die Schaltfläche "Nutzername" öffnet beim Klick ein Menü, das die Option zum Abmelden bietet. Wie bei der Übersicht über die ungelesenen Nachrichten weist auch hier aria-expanded="true" beziehungsweise aria-expanded="false", auf ein ausklappbares Menü und seinen Zustand hin. Mit aria-haspopup erkennt der Screenreader, dass ein Klick auf den Button ein Untermenü öffnet, das anderen Inhalt überlagert.

In Crimson Assurance lautet der Code für die Schaltfläche und das Popup-Menü im geschlossenen Zustand für den fiktiven Nutzer Max Mustermann:

<li>
   <button data-toggle="dropdown" 
   aria-haspopup="true" 
   aria-expanded="false">
      Max Mustermann
   </button>
   <a
   href=".../portal/de/logout">
      Abmelden
   </a>
</li>

Tabellen

Eine Auswahl eines Kunden öffnet bei Crimson Assurance eine Webseite mit dessen Daten. Sie unterteilen sich in persönliche Daten mit Name, Adresse, Geburtsdatum, Telefonnummer, Beruf und E-Mail-Adresse und Daten zu dem aktuellen Bestand des Kunden, der sich aus Verträgen und Angeboten zusammensetzt. Verträge und Angebote werden jeweils übersichtlich in Tabellen dargestellt.

Ein Screenreader kann Tabellen direkt anspringen und sie analysieren. Darin kann man sich gut orientieren, indem man komplette Spalten oder komplette Zeilen liest oder von Zelle zu Zelle navigiert. Dafür muss eine Tabelle syntaktisch korrekt mit den nativen HTML-Elementen erstellt werden. Damit ein Screenreader sie als Tabelle erkennt, braucht sie ein umgebendes <table>-Tag. Die Angabe von <caption> erzeugt eine Tabellenüberschrift, die einer Screenreader-Nutzerin vorgelesen wird, wenn sie per Tastendruck direkt zu einer Tabelle springt. Ohne Tabellenüberschrift gäbe es nur eine Ansage wie "Tabelle mit 5 Zeilen und 4 Spalten". Mit Überschrift gibt der Screenreader bei einer Tabelle mit Angaben zu Verträgen etwa folgendes aus: "Verträge Tabelle mit 5 Zeilen und 4 Spalten".

In Crimson Assurance ist die Beschriftung innerhalb des <caption>-Tags nur für Hilfstechnologie sichtbar, da visuell bereits entsprechende Überschriften zeigen, ob es sich um die Tabelle mit Verträgen oder um diejenige mit Angeboten handelt. Eine zusätzliche Auszeichnung für Hilfstechnologien ist allerdings insbesondere für Screenreader nützlich, da bei einem Sprung direkt zu dieser Tabelle deutlich wird, welche Daten dort gezeigt werden. Visuell verbergen und nur für Hilfstechnologien sichtbar machen lässt sich diese Caption beispielsweise durch die Bootstrap-Klasse "sr-only".

Mit dem <thead>-Tag wird eine Gruppe von Spaltenüberschriften erstellt, das Tag <tbody> gruppiert den Tabelleninhalt in Zeilen und Zellen. Jede Spalte und jede Zeile einer Tabelle benötigt eine Überschrift, die mit dem Tag <th> definiert wird. Das Attribut scope innerhalb des <th>-Tags teilt einem Screenreader mit, ob es sich um eine Spalte oder eine Zeile handelt. scope="col" markiert eine Spalte, scope="row" eine Zeile.

Sichtbare Auswirkungen hat diese Angabe nicht. Sie sorgt aber dafür, dass ein Screenreader bei jedem Zeilen- und Spaltenwechsel den Namen der Zeile beziehungsweise der Spalte nennt. Insbesondere in großen, komplexen Tabellen erleichtert das die Navigation und Orientierung enorm.

In Crimson Assurance ist die Tabelle mit der Übersicht über die Verträge eines bestimmten Kunden wie folgt strukturiert:

<table>
   <caption class="sr-only">Verträge</caption>
   <thead>
      <tr>
         <th scope="col">#</th>
         <th scope="col">Sparte</th>
         <th scope="col">Betrag</th>
         <th scope="col">Währung</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>4712</td>
         <td>KFZ</td>
         <td>32.4</td>
         <td>EUR</td>
      </tr>
      ...                
   </tbody>
</table>