WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Does this Javascript bring focus to expanded content?

for

From: Jared Smith
Date: Feb 8, 2012 11:00AM

In order for the <div>s to properly receive focus with JavaScript,
they should be given tabindex="-1".

For something like this, setting focus may not be the best. This is
even more problematic in this case because if the user activates the
links when the content is already revealed, it will hide the content
and then try to set focus to it (which is impossible because it has
just been styled with display:none). Additionally, the link text
("Reveal X") isn't accurate if the text is already revealed.

Because you are simply toggling the visibility or expansion of the
items, I'd think that giving the links role="button" and then simply
toggling the aria-expanded attribute on the links from true/false
would be a much better experience. The user would be informed of the
status of the content (whether it is expanded or not) and can toggle
it on or off from the link. Because the content is immediately after
the control, the user would simply start their screen reader reading
or tab into the content to access it.

Jared