Statt display: none wird die zweite Menüebene nur vor sehenden Mausnutzern verborgen. Blinden und Tastaturnutzern steht die zweite Menüebene dauerhaft zur Verfügung. Dadurch benötigen blinde Nutzer keine weitere Unterstützung. Für sehende Tastaturnutzer muss die zweite Menübene beim fokussieren angezeigt werden, damit sie das ausgewählte Element sehen. Das ist mit minimalem Aufwand möglich.
Disclaimer / Einschränkung
Hier ist eine zugängliche Navigation versprochen. Die hier gezeigte Navigation ist auch zugänglich. Aber sie ist nicht für den Einsatz in echten Projekten geeignet, da nicht einmal ein Beispiel-Layout mitgeliefert wird
Gezeigt werden sollte hier vielmehr: es muss nicht immer display: none sein.
Takeways - was kann ich aus diesem Beispiel sonst noch mitnehmen?
Es lohnt sich mal darüber nachzudenken, ob das was wir täglich sehen, nicht auch anders gemacht werden kann.
Nicht immer lässt sich eine allgemeingültige Lösung für eine Aufgabe finden. Gerade bei einer Navigation gibt es viel zu bedenken und eine Navigation ist eher ein Konzept, als ein Stück Code. So kann die Hauptnavigation beispielsweise aus der ersten Ebene am Seitenanfang und allen weiteren Ebenen in einer Seitenspalte dargestellt werden.
Eine Navigation ist zu komplex für ein einzelnes Beispiel, das aus einer einzigen HTML-Datei besteht. Es gibt ein ganzes GitHub-Projekt "Accessible Navigation", das hoffentlich irgendwann einmal fertig wird. - Mitarbeit wie immer gewünscht.