[html] Toetsenbord navigatie bij menu's (accessibility)

[Dennis]

Ik heb een website ontwikkeld waarbij gebruik wordt gemaakt van CSS menu's. Dit werkt allemaal prima. In de menu's staan uiteraard een aantal menu items.

Het nadeel is dat deze menu's op display: none worden gezet en dat daardoor ook niet genavigeerd kan worden. Nou vraag is me af wat hier de beste oplossing voor is.

Ik weet allereerst niet of visibility: hidden i.p.v. display: none zal helpen. Ik verwacht van niet om eerlijk te zijn. Dat betekent dat ik naar een andere oplossing moet zoeken.

Wat is de beste manier om ervoor te zorgen dat men tóch die links kan gebruiken door middel van het toetsenbord?

[HawVer]

Ik snap je probleem niet helemaal? Je wilt dat mensen op je website kunnen navigeren dmv het toetsenbord? Wat als je nou met javascript keystrokes opvangt? Bijvoorbeeld Alt+a opent menu algemeen?

Of bedoel je iets anders? Dat je dmv de tab knop tussen de verschillende links kan scrollen?

[Dennis]

HawVer schreef op donderdag 29 juni 2006 @ 13:39:
Dat je dmv de tab knop tussen de verschillende links kan scrollen?

Dat bedoel ik inderdaad.

[Mad Marty]

Een stukje relevante code en link naar voorbeeld zou handig zijn voor de visualisatie van wat je precies wilt!

[Blaise]

i.p.v. display:none zou je met position:absolute; top:-9999em een menu kunnen verstoppen met behoud van tabgebruik, maar dat is wel een beetje een ranzige oplossing.

[BtM909]

Als een menu op display: none staat dan wil je waarschijnlijk toch ook niet navigeren naar die items

[Dennis]

BtM909 schreef op donderdag 29 juni 2006 @ 15:01:
Als een menu op display: none staat dan wil je waarschijnlijk toch ook niet navigeren naar die items

Nouja, er moet toch een mogelijkheid zijn. Het menu komt anders alleen tevoorschijn als je er overheen gaat met de muis, en dat wordt lastig met alleen een toetsenbord.

[Civil]

Je kunt toch een onfocus en onblur op die links gooien, dat gaat naar mijn idee prima samen met onmouseover en onmouseout. Krijg het linkje focus, dan gaat het menu open, ga je er met de muis overheen dan gaat hij ook open.

offtopic:
Maar jij zal het wel zuiver op css willen houden ?

edit:
@hieronder, alleen je voorkeuren wijzigen gaat niet

[ Voor 24% gewijzigd door Civil op 29-06-2006 23:07 ]

[Xander]

Oplossing die ik zou gebruiken: Zorgen dat je op de bovenste menuitems (die altijd zichtbaar zijn) kunt klikken en daarmee op een pagina komt waar vanaf je ook door kunt klikken. Kijk maar eens hier op GoT bijvoorbeeld. Met je toetsenbord op MyReact > Wijzig profiel drukken zal lastig gaan aangezien je je MyReact-menu met geen mogelijkheid uitgevouwd krijgt. Maar je hebt het ook niet nodig, je komt er met 1 klik extra toch...

[Boelie-Boelie]

Je kunt de manier zoals Blaise zegt gebruiken en dat het dan tevoorschijn komt wanneer het focus heeft met de tab (zie bijv. Webstandards.org, waar de 'skip to content' pas verschijnt wanneer je met tabs erop focust).
Visibility:hidden en display:none is idd niet zo'n goeie oplossing.

Zie anders ook even Skip links pros and cons wat weliswaar over skip links gaat, maar eigenlijk gewoon over de zichtbaarheid van links.

[Dennis]

Boelie-Boelie schreef op vrijdag 30 juni 2006 @ 10:30:
Je kunt de manier zoals Blaise zegt gebruiken en dat het dan tevoorschijn komt wanneer het focus heeft met de tab (zie bijv. Webstandards.org, waar de 'skip to content' pas verschijnt wanneer je met tabs erop focust).
Visibility:hidden en display:none is idd niet zo'n goeie oplossing.

Zie anders ook even Skip links pros and cons wat weliswaar over skip links gaat, maar eigenlijk gewoon over de zichtbaarheid van links.

De links die je gaf zijn echt nuttig! Ik heb nu de oplossing met de left: -1500px; geprobeerd en die werkt uitstekend!

Verder dat gedeelte over skip links: dat had ik al in de html zitten en het werkt nu nog beter. Ook onderaan de content kun je weer 'omhoog' naar de navigatie links.