XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Barrierefreiheit (http://xhtmlforum.de/forumdisplay.php?f=78)
-   -   Aufklappnavigation aber bitte barrierefrei (http://xhtmlforum.de/showthread.php?t=68479)

gerrit87 24.11.2012 14:25

Aufklappnavigation aber bitte barrierefrei
 
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

Barodscheff 28.03.2013 10:21

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:

Code:

<ul>
  <li>Hauptpunkt 1</li>
  <li>Hauptpunkt 2
    <ul>
      <li>Unterpunkt 2.1</li>
      <li>Unterpunkt 2.2</li>
      <li>Unterpunkt 2.3</li>
    </ul></li>
  <li>Hauptpunkt 3</li>
</ul>

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

lottikarotti 28.03.2013 23:21

Guten Abend,

Zitat:

Zitat von Barodscheff (Beitrag 527870)
Wenn du nach dem Schema verschachtelst bist du barrierefrei ;)
Die CSS Angaben haben sogesehen nichts mit Barrierefreiheit zu tun. CSS dient nur der Darstellung.

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

hubspe 02.04.2013 08:19

Zitat:

Zitat von lottikarotti (Beitrag 527889)
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).

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

David 02.04.2013 09:58

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?

fricca 02.04.2013 12:08

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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:02 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020