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/

Schnauzer

No, tabindex minimum value is 0: you are talking about -1, which means "not focusable". Also, I'm not navigating away. I'm still in the focused tree. I thought :focus worked like :hover, where you :hover an element as you are :hovering its parent tree as well. :focus is enabled on target and on target only – Schnauzer

Wes all of your <a>s need tabindex=0 not just the container – Kobayashi

no, by default all links are tabindex=0 – Schnauzer

is your question how to make that more accessible or how to make the list visible from keyboard navigation? – Lorikeet

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).

Phylum

This, unfortunately, has been removed now. css4-selectors.com/selector/css4/… – Acetyl

@JayMee: Thanks for the update! I added a note to the answer. – Phylum

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();
});

Figueroa

CSS does support it (Working Draft), but user-agents probably not. – Phylum

Thanks @unor, I updated the answer to reflect level 3 selectors. – Figueroa

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

Vulcanite