keyboard accessibility of hidden contents using css and html only

Question

how can I make this snippet accessible?

<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 is possible to make <ul> visible also with keyboard navigation while focusing its contents

http://jsfiddle.net/pJs2U/

Answer 1

Update 2015 (thanks, @JayMee): The current (2015-05-29) Editor’s Draft doesn’t contain this syntax/feature anymore. (The latest Working Draft still does, but it’s from 2013-05-02.)

---

For the future:

In the Working Draft of Selectors Level 4 there is a way to specify the subject of a selector (resp. in the Editor’s Draft).

I guess the following should work when browsers implement it (and if the syntax will not be changed):

!div a:focus
  {display:block;}

It selects a div element (notice the ! in the selector) which has a focused a element as child.

---

For JQuery, there is a polyfill (but it uses the old syntax where the ! was used as suffix, not prefix).

Answer 2

Changing a CSS property on the <ul> when a child element has focus is not possible using just HTML and CSS.

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

Note: You might consider a javascript solution. The vast majority of screen reader users have javascript enabled. In jQuery it might look like:

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

Answer 3

The javascript solution is the best. You can't depend on the focus of a parent to display a child. This falls apart as soon as you move 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