WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples for Implementing Accessible Hide/Show Panels

for

From: Bryan Garaventa
Date: May 11, 2015 4:18PM

Hi,
There are cases where moving focus is helpful, though it depends on what you wish to show/hide and how it's rendered. For example I've seen some toggles open settings dialogs that are rendered at the end of the Body element, making it necessary to move focus into the new content in order to provide the correct keyboard navigation and focus control for screen reader users. In which case it's important to move focus back to the toggle after the dynamic content region closes.

In the case of an accordion, typically the content is rendered inline in the DOM, so this wouldn't be needed, and if the toggle controls were all grouped together vertically or horizontally with the dynamic region displayed outside the group then it would fit the Tab paradigm and then it would make sense to use the Tab keyboard model instead.

Animation effects such as floating a newly rendered panel in from the left/top/right/bottom wouldn't have any negative effect on the keyboard functionality if the newly displayed content still existed within the DOM at the same logical level of the toggle control, so in that case it wouldn't be useful, and actually may cause the screen to flicker and jerk about as focus is set to a panel that is still in motion. (This typically happens in IE)

In cases where an animation floats something in that doesn't appear inline in the DOM though, I've found that it helps to set focus to it after the animation settles rather than before.

It is true that if you move focus away from a toggle control before it's state changes then that state change won't be conveyed, but usually this isn't really a problem since the user is aware that a focus change has occurred anyway and they are now within the region they desired to open by activating it.

Here is a simple example of this using a date picker:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(Basic)/demo.htm
The trigger of which is technically a hide/show toggle that includes aria-expanded, even though focus moves into the date picker when activated.

So it really depends on what you need and how you are rendering the content. I'm sorry if that is vague, but markup and implementation variations are virtually infinite.

:)