ARIA-Controls und Menüs

Barrierefreiheit ist leider immer noch ein Nischenthema, was zu wenig Aufmerksamkeit bekommt. Als Autodidakt komme ich leider auch häufig erst dann damit in Kontakt, wenn ich bei der Abschlussprüfung einen Fehler bemerke. So auch in diesem Fall, wo eine Website nicht W3C-valide war ich mich auf die Suche machte wieso …

Konkret ging es um ein Theme (basierend auf _s), welches die ARIA-Controls falsch gesetzt hatte.

Die Spezifikation besagt folgendes:

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Der Toggle, der in der Mobilversion das Menü aus- und einklappen lässt, muss mit dem Menü in dieser Form verknüpft werden. Dafür reicht nicht die generische Klasse, sondern es muss die konkrete ID angegeben werden. Dafür bietet die wp_nav_menu-Funktion jedoch einen einfachen Parameter. Er muss nur auch von den Theme-Entwicklern genutzt werden.

Und obwohl der Fehler schon lange in _s gefixt wurde, so gibt es noch zahlreiche Themes, die darauf basieren, die den Fehler noch nicht repariert haben.

Es scheint überhaupt ein fehleranfälliges Feld zu sein. Aus dem Supportforum erinnere ich noch ein Problem mit einem Mobilmenü, welches sich auf einen ähnlichen Fehler zurückführen ließ.

Standardmäßig nutzt wp_nav_menu eine dynamische CSS-Klasse. Laut Dokumentation menu-{menu slug}-container. Die Theme-Entwickler haben ihr Menü „Main Menu“ genannt und im CSS einfach mit der damit entstandenen CSS-Klasse menu-main-menu-container gearbeitet. In der Demo funktionierte daher alles super. Nur wenn jemand das Menü anders genannt hat, zum Beispiel „Hauptmenü“, dann funktionierte das Mobilmenü plötzlich gar nicht mehr. Auch hier bietet wp_nav_menu eine einfache Möglichkeit dem Menü-Container eine zusätzliche, statische CSS-Klasse zu geben.

Daher, liebe Theme-Entwickler_innen, prüft eure Menüs mal. Insbesondere, wenn ihr vor längerer Zeit mit _s gestartet habt und der Fehler damals noch nicht gefixt war. Danke!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.