Menü-Icon (C4 Mobilansicht) nicht tastaturbedienbar

[NinaG]

In kleinen Viewports wird die linke Spalte ausgeblendet und stattdessen erscheint im Kopfbereich das "Hamburger"-Icon. Für Tastaturnutzer und Screenreader-Nutzer ergeben sich an der Stelle mehrere Probleme:

1. Wenn man den Kopfbereich mit dem Tabulator durchtabbt, erreicht man nacheinander das Logo, die Benutzerinfo, FE-Vorschau und Abmeldefunktion. Das Menü-Icon ist hingegen via Tastatur nicht erreichbar. Die Ursache liegt darin, dass das Menü-Icon nur ein Bild, ohne Link o.ä. ist. Dadurch wird es nicht anvisiert. Man könnte das Bild notfalls mit dem Attribut tabindex="0" fokusierbar machen, aber selbst wenn man es dann fokusieren kann, ist im Menü-Script noch nicht vorgesehen, dass man das Menü auch via Tastatur (z.B. mit Enter o.ä.) aktivieren kann. Idealerweise sollte das Menü-Script so abgeändert werden, dass das Bild doch einen Link hat (dann kann man sich das Spiel mit dem tabindex-Attribut sparen) und auf Tastatureingabe das Menü einblendet.
2. Das Menü-Icon hat keinen Alternativtext. Es ist also für einen Screenreader-Nutzer nicht erkennbar, worum es sich dabei handelt.
3. Das Menü lässt sich scheinbar nur dann wieder ausblenden, wenn man erneut auf das Menü-Icon klickt. Es wäre empfehlenswert, wenn es auch via Esc-Taste ausgeblendet werden kann, damit der Weg zurück zum Menü-Icon gespart werden kann.

[NinaG]

Hier noch ein paar Anregungen, zu Off-Canvas-Menüs, die hier auch zum Tragen kommen und das Contao4-Backend barrierefreier machen:

• Menüs sollten mit allen gängigen Bedienarten vollständig (und von den anderen Bedienarten unabhängig) nutzbar sein: Maus, Touch, Keyboard.
• Bei der Keyboard-Bedienung sollte der Nutzer mittels Tabular vorwärts durch das Menü kommen und mittels Shift + Tab rückwärts. Mit Enter wird der gewünschte Menüpunkt aktiviert.
• Das Menü sollte neben dem Menü-Button (Toggle) auch via Esc-Taste geschlossen werden können.
• Der Menü-Button sollte möglichst ein echter Button sein, so ist er auch ordentlich fokusierbar und entspricht seiner semantischen Logik, z.B.:<button class="nav-toggle" type="button">Menü</button>. Ergänzend könnte das SVG-Symbol als Grafik auf den Button gelegt werden. Fachlich noch "cooler" wäre es, wenn das SVG-Symbol als Inline-Code in den Button eingefügt wird. Dann könnte der SVG-Code noch barrierefrei mit ARIA-Attributen sowie mit Titel und Desc bzw. lesbarem Text versehen werden. Ich bastel dafür nacher mal einen Code-Entwurf, basierend auf dem C4-Menü-Icon.
• Es wird empfohlen, dass der Menü-Button immer eine sichtbare Beschreibung hat, da Usability-Studien zeigten, dass viele Anwender das Hamburger-Symbol ohne Beschriftung nicht verstehen. Falls die Beschreibung nicht angezeigt wird, sollte sie mit einer geeigneten CSS-Klasse für blinde Nutzer weiterhin zugänglich gemacht werden (NICHT display: none o.ä.).
• Das Off-Canvas-Menü sollte möglichst mit der WAI ARIA Landmark role="navigation" versehen werden.
• Gute Fokusführung: Wenn der Nutzer auf den Menü-Button klickt, wird das off-canvas Menü aktiviert. Dabei sollte der Fokus automatisch auf das erste fokusierbare Element der Navigation verschoben werden. Von diesem Standort aus, sollte der Nutzer mit Shift + Tab vom ersten fokusierbaren Navigationselement auch "rückwärts" wieder zum Menü-Button tabben und es so deaktivieren können. Wenn der Nutzer das off-canvas Menü verlässt, sollte der Fokus wieder auf dem ursprünglich fokusierten Element liegen (normalerweise der Menü-Button).
• Gute Fokusführung 2: Die Navigationspunkte des Off-Canvas-Menüs sollten nur fokusierbar sein, wenn das Menü auch wirklich aktiv ist. Auch Unterpunkte sollten nur fokusiert werden, wenn sie sichtbar aufgeklappt sind. Es gibt auch viele sehende Nutzer die rein via Tastatur navigieren. Es wäre für Sie äußerst irritierend, wenn der Fokus beim Tabben auf unsichtbaren Navigationslinks liegt.
• Die Navigationspunkte sollten mit den passenden WAI ARIA-Attributen versehen werden (siehe normales Menü-Template für FE-Menüs), die sich auch anpassen, je nachdem ob ein Navpunkt aufgeklappt ist (mit sichtbaren Unterpunkten) oder nicht.

[NinaG]

Beide Toggle-Button-Beispiele (ohne sichtbaren Beschriftungstext, mit wäre aber besser):

Hier mal der einfach angepasste Code für einen Menü-Button mit Inline-SVG:
<button class="nav-toggle" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 512 512" role="img" aria-labelledby="burger-title" ><title id="burger-title">Navigation öffnen</title><path d="M462 163.5H50v-65h412v65zm0 60H50v65h412v-65zm0 125H50v65h412v-65z" fill="#fff"/></svg></button>

Wenn nicht gewünscht ist, dass der Toggle-Button ein Inline-SVG enthält, könnte es natürlich auch als normales IMG im Button-Code hinterlegt werden:
<button class="nav-toggle" type="button" title="Navigation öffnen"><img src="system/themes/flexible/icons/burger.svg" alt="Menü" id="burger" height="25" width="25"></button>

[leofeyer]

Behoben in contao/core-bundle@033bfd5.

[NinaG]

Vielen Dank für die schnelle Reaktion!
Hast du die anderen Sachen die ich unten in diesem Ticket genannt habe, auch im Blick (Fokus, weitere ARIA-Angaben in den Navlistenpunkten)? Oder soll ich die lieber einzeln als Tickets anlegen?

[leofeyer]

Am besten machst Du gleich einen Pull-Request.