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/

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 `:hover`ing its parent tree as well. `:focus` is enabled on target and on target only — , Apr 23 '13 at 13:28
Wes all of your ``s need `tabindex=0` not just the container — Ryan B, Apr 23 '13 at 14:52
is your question how to make that more accessible or how to make the list visible from keyboard navigation? — albert, Apr 24 '13 at 14:41

score 4 · Accepted Answer · edited May 23 '17 at 12:14

4

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

edited May 23 '17 at 12:14

Community

1
1

answered Apr 23 '13 at 23:05

unor

92,415
26
211
360

1

This, unfortunately, has been removed now. http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/ – Jun 25 '15 at 13:36
1

@JayMee: Thanks for the update! I added a note to the answer. – unor Jun 25 '15 at 13:47

ckundo · Answer 2 · 2013-04-24T01:42:57.190

1

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

edited Apr 24 '13 at 01:42

answered Apr 23 '13 at 17:58

ckundo

1,551
10
12

1

CSS [does support it](http://www.w3.org/TR/selectors4/#subject) (Working Draft), but user-agents probably not. – unor Apr 23 '13 at 22:54
1

Thanks @unor, I updated the answer to reflect level 3 selectors. – ckundo Apr 24 '13 at 01:43

score 1 · Answer 3 · answered Apr 24 '13 at 16:04

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

keyboard accessibility of hidden contents using css and html only

3 Answers3

Linked