Screen Reader Accessibility

I realized after submitting it that that code works fully only if the “hideothers’ option is set. So here’s the necessary modification to the end of the file to make the plugin fully screen-readable even if more than one FAQ is permitted to be open simultaneously:

                        } else { // if hideothers not set	

				jQuery('#'+jQuery(this).attr("id")+'_a').slideToggle(speed); // toggle visibility of current answer
				jQuery('#'+jQuery(this).attr("id")+'_q').toggleClass("faq_is_open"); // toggle show/hide indicator of current question
				
				var ans = jQuery('#'+jQuery(this).attr("id")+'_q').next('.faq_a');
				
				if ( jQuery('#'+jQuery(this).attr("id")+'_q').hasClass("faq_is_open") ) {
					 jQuery('#'+jQuery(this).attr("id")+'_q').attr('aria-expanded','true');
					 jQuery(ans).attr('aria-hidden','false');
				}
				else if ( !jQuery('#'+jQuery(this).attr("id")+'_q').hasClass("faq_is_open") ) {
					 jQuery('#'+jQuery(this).attr("id")+'_q').attr('aria-expanded','false');
					 jQuery(ans).attr('aria-hidden','true');
				}					 

			}

		}

	});
	
});

• This reply was modified 8 years, 2 months ago by KTS915.
• This reply was modified 8 years, 2 months ago by KTS915.

Hey there,

Thanks very much for that – it’s so great to have someone else contributing to the plugin. Which reminds me, I really ought to get it up on GitHub!

I’ll test your code and look to incorporate it into the next version of the plugin.

Thanks once again – I happily admit that I’m not too strong at JavaScript! ??

regards
Michael

Just realized that we should make use of the fact that jQuery runs in no-conflict mode in WordPress so as to reduce the size of the file a little. So my latest attempt at the code for the faq-concertina-script.js file looks like this:

jQuery(document).ready(function($) {

	// Make FAQs screen-readable
	$('.faq_q').attr('tabindex','0').each(function() {

		var ans = $(this).next('.faq_a');
		var ansID = $(ans).attr('id');

		$(this).attr('aria-controls', ansID).attr('aria-expanded','false');
		$(ans).attr('tabindex','0').attr('aria-hidden','true');

	});

	// Toggle Function
	$('.faq_item').on('click keyup', function(e) {

		if (e.type == "click" || e.keyCode == 13) {

			var speed = parseInt( faqconcvars.speed, 10 ); // get the speed which answers should open and close

			if ( parseInt( faqconcvars.hideothers, 10) ) { // if hideothers set, i.e. only one answer can be open at a time

				if ( $('#'+$(this).attr("id")+'_q').hasClass("faq_is_open") ) { // if this answer is already open
	
					$('#'+$(this).attr("id")+'_a').slideUp(speed).attr('aria-hidden','true'); // hide this answer
					$('#'+$(this).attr("id")+'_q').removeClass("faq_is_open").attr('aria-expanded','false'); // set show/hide indicator to 'show' on this question

				} else { // if this answer is currently closed

					$('.faq_a').slideUp(speed).attr('aria-hidden','true'); // hide all answers
					$('.faq_q').removeClass("faq_is_open").attr('aria-expanded','false'); // set show/hide indicators to 'show' on all questions
					$('#'+$(this).attr("id")+'_a').slideDown(speed).attr('aria-hidden','false'); // show this answer
					$('#'+$(this).attr("id")+'_q').addClass("faq_is_open").attr('aria-expanded','true'); // set show/hide indicator to 'hide' on this question

				}

			} else { // if hideothers not set	

				$('#'+$(this).attr("id")+'_a').slideToggle(speed); // toggle visibility of current answer
				$('#'+$(this).attr("id")+'_q').toggleClass("faq_is_open"); // toggle show/hide indicator of current question
				
				var ans = $('#'+$(this).attr("id")+'_q').next('.faq_a');
				
				if ( $('#'+$(this).attr("id")+'_q').hasClass("faq_is_open") ) {
					 $('#'+$(this).attr("id")+'_q').attr('aria-expanded','true');
					 $(ans).attr('aria-hidden','false');
				}
				else if ( !$('#'+$(this).attr("id")+'_q').hasClass("faq_is_open") ) {
					 $('#'+$(this).attr("id")+'_q').attr('aria-expanded','false');
					 $(ans).attr('aria-hidden','true');
				}					 

			}

		}

	});
	
});

• This reply was modified 8 years, 1 month ago by KTS915.

Hey there,

Thanks a lot for this update. Apologies that I haven’t acted on this yet, I haven’t done any work on FAQ Concertina in recent weeks, but I really appreciate your contribution in the area in which I’m probably weakest, namely JavaScript.

Thanks once again, and I will use your code when I next do an update to the plugin.

regards
Michael

Glad you think it worth including in the next update! There’s certainly no rush to bring out a new update, though. I’m just happy to contribute a little.

Hey there,

I’ve finally had a chance to try out your jQuery code with FAQ Concertina. Apologies for the delay!

Thanks for your contribution and I’d love to use it, but I’d like to discuss a couple of things with you first.

Could you get in touch with me using the contact form on my website so we can work together to make FAQ Concertina fully WAI-ARIA compliant.

Thanks – looking forward to hearing from you.

regards
Michael

Marking as resolved as WAI-ARIA compliance has now been added to version 1.4.0.

Thanks Tim for your code contributions, and for your help, advice and assistance in making FAQ Concertina accessible to more users.