Search code examples
javascripthtmlaccessibilityusability

HTML5 details and summary usability concern


The new HTML5 details and summary elements, are currently implemented in Chrome 12.

I find one thing that is concerning me and I would like to hear your thoughts on the matter.

When the open attribute is set, any child nodes besides the summary element, "content" of the details element are removed from the document flow.

  • I want to increase usability by giving the user a clear visual cue.

  • So I am preventing the default behavior in JavaScript.

  • When the summary element is toggled (click or keyboard), a slide down animation starts if the details element is closed or a slide up animation starts when the details element is open.

If the element is open, the open attribute is removed when the animation is finished. Otherwise, the content will be invisible immediately while the animation is still running.

This is all fine but what about accessibility? Folks using assistive technology. They will have to wait the duration of the slide up animation before they have a confirmation that the details element is closed (because only then, the open attribute is removed)?


Solution

  • Why don't you set aria-expanded to false just before the closing animation?