HTML5 details element and VoiceOver

Question

I am currently using the details/summary element in my JSP. When I turn on VoiceOver to test accessibility, VoiceOver simply stops when it reaches the details element. It sounds like it doesn’t know what to do with it.

Any idea if there is a workaround for that? I already tried adding role="button" and aria-expanded="false" to the summary element as explained in http://www.accessibleculture.org/articles/2012/03/screen-readers-and-details-summary/ but that didn't change anything.

I am using iPhone with iOS 6.1.3 for testing this.

Answer 1

Screen readers such as VoiceOver do not have native support for the details and summary elements. You will need to add aria to make the screen readers recognise it.

One way is to add aria-expanded="true" when the details has the open attribute, and aria-expanded="false" when it doesn’t.

There is an existing polyfill that both adds support to browsers that do not support details/summary, and adds aria information