Keyboard accessibility for hidden content using only css and html

Question

How can I make this snippet available?

<div tabindex="0"> Show More <ul> <li><a href="#">Hidden Content</a></li> <li><a href="#">Hidden Content</a></li> <li><a href="#">Hidden Content</a></li> </ul> </div> 

CSS

 div > ul {display:none;} div:hover > ul, div:focus > ul {display:block;} 

I wonder if it’s possible to make <ul> visible and with keyboard navigation focusing its content

http://jsfiddle.net/pJs2U/

Answer 1

Update 2015 (thanks, @ JayMee ): current (2015-05-29) Editors Draft no longer contains this syntax / function. (The last working draft is still , but its from 2013-05-02 .)

---

In future:

In the Working Draft Selector Level 4 there is a way to specify the topic of the selector (respectively in the draft editors ).

I assume the following should work when the browser implements it (and if the syntax is not changed):

 !div a:focus {display:block;} 

It selects a div element (note the ! In the selector), which has the focused element a as a child.

---

There is a polyfill for jQuery (but it uses the old syntax where ! Was used as a suffix, not a prefix).

Answer 2

Changing the CSS property in <ul> when the child has focus is not possible using only HTML and CSS.

What you are describing will require a parent selector, but CSS3 does not support parent selectors for performance reasons .

Note. You may consider javascript solution. The vast majority of screen reader users have javascript. . In jQuery, this might look like this:

 $('a').on('focus blur', function(e) { $(this).parents('ul').toggle(); }); 

Answer 3

Javascript solution is the best. You cannot depend on the focus of the parent to display the child. It falls apart as soon as you move the focus.

Adding and removing a class from the parent gives you much more control. Dirk Ginader spoke of this as the fifth layer of accessibility http://www.slideshare.net/ginader/the-5-layers-of-web-accessibility