CODEWITHSUNDEEP
accessibilityscreen-readersvoiceover
dontwakemeup
dontwakemeup

Reputation: 93

VoiceOver says 'collapsed all the time

I'm working on a few accordions and trying to check whether the aria-attributes I'm adding are working. I struggled for a while to understand why VoiceOver kept telling me the accordion was collapsed, when I had set aria-expanded="true" on it. Then I discovered that every element on the page is declared to be 'collapsed', even the html. So then I randomly tried a few other websites, even the aria website itself and VoiceOver declares every element as 'collapsed'.

Does anyone else experience this, is it a bug, or have I got some wires crossed somewhere?

Upvotes: 1

Views: 2351

Answers (2)

BrendanMcK
BrendanMcK

Reputation: 14498

Appears to be a bug with recent releases of Chrome; repros as of 40.0.2214.91 (Jan 2015), and IIRC, was not an issue with the previous version - this was working fine until some recent browser update.

Repros even with very simple examples:

<a href="/">test link</a>

...gets read out as "collapsed link. test link" - even though collapsed doesn't apply to links. Similar behavior with other types of controls such as buttons and the like.

This isn't an issue with Safari against the same page, so this seems to suggests it's a recent Chrome problem rather than being an issue with VoiceOver.

As @unobf mentions above, Safari is the standard browser to test VoiceOver against on iOS; Chrome is certainly convenient to use when developing, but since it's lagging behind Safari accessibility-wise in a few areas, should always verify the final code against Safari.

Upvotes: 1

unobf
unobf

Reputation: 7244

In order to show the expanded collapsed state of an accordion (role="tab") you must use aria-expanded="true" or aria-expanded="false". The default value is not specified so no attribute could equal everything announcing as collapsed. http://www.w3.org/TR/wai-aria/roles#tab

This example http://www.oaa-accessibility.org/examplep/accordian1/ works well for me with VoiceOver on OS X and shows the correct use of aria-expanded and aria-selected

IMPORTANT: As of writing this, Safari on OS X is the most accessible browser. Chrome has less support for all the ARIA features

Upvotes: 1

Related Questions