Hallo zusammen,

was muss ich beachten, wenn ich eine Aufklappnavigation barrierefrei hinbekommen möchte? Grundsätzlich wollte ich li:hover ul { display: block;} nutzen.

Grüße

Hi,

durch die Frage ist nicht ganz klar was du möchtest. Eine barrierefreie Navigation ist ja keine große Sache. Du musst nur darauf achten richtig zu verschachteln:

Wenn du nach dem Schema verschachtelst bist du barrierefrei
Die CSS Angaben haben sogesehen nichts mit Barrierefreiheit zu tun. CSS dient nur der Darstellung.

LG

Guten Abend,

das stimmt leider nicht ganz und sollte auch nicht so leichtfertig behandelt werden. Gerade bei Dropdown-Menüs sieht man oft, dass untergeordnete Listen mittels display:none versteckt werden. Dies führt allerdings dazu, dass manche Screenreader diese Inhalte unterdrücken und gar nicht erst ausgeben. Somit sind Teile der Navigation, für Personen die auf einen Screenreader angewiesen sind, gar nicht erst sichtbar.

Auch heißt "Barrierefreiheit" nicht nur, dass eine Seite für einen hochgradig behinderten Menschen bedienbar sein muss. Es fängt nämlich schon damit an, dass eine Seite mittels Tastatur gut zu bedienen sein sollte -- auch dies lässt sich gerade für Dropdown-Menüs nur mittels CSS lösen (Stichwort :focus).

Um Menschen mit einer Behinderung die Bedienung sogar noch zu erleichtern, kann man mittels text-indent Hinweise hinterlassen, welche nur für Screenreader zu sehen sind. So kann man komplexere Strukturen, welche ohne die Seite visuell wahrnehmen zu können irritierend wirken, genauer beschreiben und den Besucher besser durch die Inhalte führen.

Fazit: Barrierefreies Webdesign ist doch ein wenig mehr als nur ein sauberes Markup.

Hier wirst du weitere Informationen zum Thema finden.

Mit freundlichen Grüßen,
lotti

__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint

jepp ganz genau!
Mit der Ergänzung das so gut wie kein screenreader es dann vorliest!

__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Das interessiert mich jetzt doch: wie setzt ihr ein Dropdown für Tastatur mit reinem CSS um. Im gegensatz zu :hover ist :focus doch immer nur auf ein Element beschränkt, oder irre ich mich da?

__________________
github | http://dnaber.de

Es gibt eine clevere Methode, die Float-Drops zum Ausklappen nutzt (http://www.cssplay.co.uk/menus/new-dropdown.html) aber ob man sich das in der Praxis antun will?

Wenn ich derzeit ein Dropdownmenü erstellen müsste, würde ich wohl zum einen dafür sorgen, dass auch ohne Ausklappfunktion alle Menüpunkte erreichbar sind (Übersichsseiten oder dauerhaft sichtbares Untermenü) und angesichts dessen, dass man sich ja nicht mehr darauf verlassen kann, dass es etwas wie :hover überhaupt noch gibt, ist wohl eine durchdachte JavaScript-Lösung heutzutage die bessere Idee.

Noch zu den nicht vorgelesenen Untermenüs: Wenn das Ausklappen auch für Nutzer von Screenreadern möglich ist, dann kann man auch display:none einsetzen. Aria-Attribute kann/sollte man unterstützend einsetzen.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken