CODEWITHSUNDEEP
javascriptaccessibilityjquery-ui-accordion
Damon
Damon

Reputation: 10809

Is my JS accordion accessible?

This is a jQuery accordion that I put together: http://jsfiddle.net/cutcopypaste/xAPSz/

I want to know whether it will work with screen-readers and other assistive technologies.

I know that with no javascript, everything will be expanded, which is totally fine.

I added a link hover effect to indicate that the headers are clickable, but I don't know what will happen with a screenreader... will all the content be visible at the outset? (which is ok) or will it be collapsed with no indication that the list items should be clicked on? What might be a good way of getting around this?

I was thinking of using js to add actual anchor tags around the header, to indicate it would be clickable (Rather than just the :hover style I'm using now) but wasn't sure if it would be worthwhile

Upvotes: 1

Views: 1150

Answers (1)

stringy
stringy

Reputation: 1353

Screenreaders vary, but tend to only read what's visible on the screen. Since your accordion starts closed, it'd be good to replace the headings with links, or wrap the links around the heading text. That way they become clickable items for the screenreader, allowing users to either skip through the headings/links or open them up to get to the content.

Adding the links will make your accordion keyboard accessible too. Generally, if you want people to click on things to get a results, you're best off making them links and then styling them with CSS to look the way you want. It's less work than using other elements then adding back focus and activate functionality with scripting. You can tab to a link and activate it by pressing the enter key, which means that users with vision or mobility impairments can get at them easily.

Upvotes: 2

Related Questions