How to make accordion headers keyboard accessible and 508 compliant

CM1
,
1

Several months ago David helped us customize an accordion JS for our FAQ page and it works great, but the Expand/Collapse of each Question can not be triggered by a keyboard, making it non-compliant.

Each Q&A pair is enclosed in a separate rich-text widget and I’ve tried tagging the questions with tabindex=“0” but it gets stripped out by the RT editor (we have not successfully upgraded to 3.1 yet and are still on the older version, btw).

Is there any other way to accomplish this:
I’ve attached the script and a screenshot of the html here:

$(document).ready(function() {
$(’.faq .rxbodyfield :header’).each(function(i,v) {
var ans = $(this).next();
ans.data(‘height’,ans.height());
if (i > 1) {ans.height(0).addClass(‘aClosed’);$(this).addClass(‘qClosed’);}
$(this).click(function() {
var ans = $(this).next();
if (ans.height() > 0) {
$(this).addClass(‘qClosed’);
ans.addClass(‘aClosed’).animate({‘height’:0},500);
}
else {
$(this).removeClass(‘qClosed’);
ans.removeClass(‘aClosed’).animate({‘height’:ans.data(‘height’)},500);
}
});
});
});

2

Any ideas how else we can make the expand/buttons keyboard accessible?

3

Hey Debbie,

Sorry, I don’t have any experience reworking JS/jQuery so that it’s 508 compliant. Have you thought about asking your question on a forum such as stackoverflow.com (just tag your question with jQuery or JavaScript)? I know that’s where many of us here go for answers to our trickier coding questions. Good luck!