WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples for Implementing Accessible Hide/Show Panels

for

From: Bryan Garaventa
Date: Apr 27, 2015 6:56PM

No problem, I'm always happy to help.

> - Use aria-expanded on the button that controls the display/hide of the panel

Yes, this works on both buttons and links, whether native or using role=button or role=link, then toggled accordingly. When using native buttons and links, an onClick can be used for both mouse and keyboard support, but if using a simulated element like a Div or Span, then an onClick and key event must be used to handle both mouse and the pressing of Enter so that both do the same thing. It's important to note that an onClick must be used, not onMouseUp/Down, which won't always be triggered reliably across ATs and devices. More info about this is available at
http://whatsock.com/training/#hd31

> - Do not explicitly set focus on any one item in the open panel

In this case, it's most useful just to keep focus on the toggle and let the user go from there after activating it.

> - Use aria-controls to associate the button with the panel. I don't believe you mentioned this in the thread but I do see it in the example in your second response.

Whenever aria-expanded is used, it's generally a good practice to specify what it controls using aria-controls. Some ATs use this to provide additional functionality and feedback to users.

Also, surrounding the toggle control with a heading is useful too, since it provides a quick mechanism for grouping related content and maintaining a well-structured document order. When it's not possible to use standard H# elements for this, role=heading + aria-level can be used on the parent container element instead. Such headings should never be used as the focusable triggering elements however.

All the best,
Bryan