WCAG accessibility issue with nested elements

Question

I've grid with several boxes in (<div>). Each box has inside a list with couple/ several links (simple ul li list with <a> elements). This link list is hidden, it shows only on hover.

It works really fine, but I have accessibility issue, namely, I can't get into any list element with "tab" key (box <div> works ok, it get focus, so the list is showing up), it is just skipping to next box element. I've tried with adding tabindex on each box and each list element inside, but it seems that this is not the solution.

Is there any CSS/ HTML solution for that? I can of course write simple JS, that will check where is focus and if focus has parent with focus option, but I would like to avoid it if possible.

try to use tabinex http://stackoverflow.com/questions/3059203/tab-index-on-div — Álvaro Touzón, Apr 05 '16 at 12:09
As I said, I've used tabindex on both box element and all child element inside, but unfortunately, I'm not able to get into any descent elements — kuba, Apr 05 '16 at 12:12
I'm also a little puzzled by your comment about having a link that is hidden unless you hover. does that mean you need to use a mouse to see it? keyboard won't work? — slugolicious, Apr 06 '16 at 19:04
You probably have the same problem with touch (on tablets, smartphones and… laptops and monitors with touch included) that you've with keyboad/focus and though it may be corrected with JS, I'd advise adding toggle buttons so user can toggle visibility whatever its interaction mode with your page — FelipeAls, Apr 27 '16 at 10:44

score 1 · Answer 1 · answered Apr 07 '16 at 14:55

How did you hide the link list? Using display: none or using visibility: hidden. (And that you apply this only to the list elements or also to the div? From your description, I guess it applies only to the list elements.) Content that is hidden using display: none is not keyboard accessible.
In order to make the list appear on hover, are you using a JavaScript event handler or CSS? If you are using JavaScript, you probably need to add an event listener that responds to keyboard events (e.g. onfocus, but as mentioned above, content hidden with display: none won't receive focus). In CSS, I always recommend adding the :focus pseudo-class whenever :hover is used (unless you want different styles for these things).
You may need to write some JavaScript that toggles the visibility of the lists when a parent div receives focus. (If you have tabindex on the div elements, as you say, they should already be able to receive focus.)

WCAG accessibility issue with nested elements

1 Answers1