Add tabindex="-1" to content element

[simevidas]

Jeremy Keith has written about an accessible content toggle on his blog - https://adactio.com/journal/10365; it’s almost the same approach as a11y-toggle, except that he also adds tabindex="-1" to the content element, and then when the content is displayed, it is also focused programmatically. That sounds like a good idea.

[KittyGiraudel]

I'll ping @ffoodd for his opinion on the matter. :)

[adactio]

I'm not sure whether automatically focusing the expanded content is a good idea or not. I'm hoping to get some feedback from screen reader users.

[KittyGiraudel]

Let’s ping @heydon, he probably has an interesting opinion. :)

[Heydon]

I've moved focus automatically before, but I suspect it's quite jarring to screen reader users. So long as the expanded (true) state is announced, they know they have an expanded node they can move to - probably with the down arrow key or similar.

[KittyGiraudel]

What about tabindex="-1" on the collapsible area?

[ffoodd]

Looking at @nico3333fr's jQuery plugin (which has been tested a lot) it doesn't use [tabindex] at all.

However accordingly to what @Heydon said, I think you may document the fact that collapsible region should be the next focusable area after the toggle button.

You'll have an exception when this is not the case (same condition than using [aria-controls], we talked about this earlier) and in this case moving the focus (or not) is another question, I guess. If collapsible region isn't the next focusable node, it could make sense to move the focus. I never tested that…

[Heydon]

Agree — moving focus probably the correct course if the element is not immediately after the toggle button. The main reason for this is low support for aria-controls which would otherwise offer the required shortcut to the expanded element.

[WW3]

Another option is using aria-owns which sets the referenced id as the next node in the a11y tree

[KittyGiraudel]

Discussed here: https://github.com/edenspiekermann/a11y-toggle/issues/3.