Changing this hide/expand script for accessibility

Question

I'm using the script below to show/hide text in an FAQ format. For accessibility, this won't work. Those who navigate with a keyboard won't have a way to expand the text because the element you click on to expand/hide is a heading, not a link, and headings don't receive focus when tabbing through a page.

How would I change this script to have it show/hide when the user either clicks the link OR the link receives keyboard focus?

Any help would be greatly appreciated. I've been tinkering with this and can't seem to get it.

Script:

<script type="text/javascript">
    if (document.images) {
        img1 = new Image();
        img1.src = "/images/expand-symbol.jpg";
        img2 = new Image();
        img2.src = "/images/collapse-symbol.jpg";
    }

    $(document).ready(function () {
        $('.section').hide();
        $('h3').click(function () {
        $(this).toggleClass("open");
        $(this).next().toggle();
        }); //end toggle
    }); //end ready
</script>

HTML:

<h3 class="question">Question that is always shown</h3>
    <div class="section">
        <p>Text that appears when you click the question</p>
    </div>

Perhaps this answer on .focus() will help: http://stackoverflow.com/questions/4889355/jquery-handing-both-focus-and-click-on-an-element — Darren, Mar 19 '14 at 16:34

wf4 · Accepted Answer · 2014-03-19T20:27:42.720

If I fully understand your requirements, you can add a tabindex to your H3...

<h3 tabindex="0" class="question">Question that is always shown</h3>

...which will allow you to select it using the tab key, then you can add a .focus() event to open the answer when you tab on to it, you could even add a .blur() event to close the answer too I guess.

$('h3').focus(function () {
        $(this).toggleClass("open");
        $(this).next().toggle();
    });

here is the link to the fiddle I was using to test my answer : http://jsfiddle.net/r4PqJ/

and here is a fiddle which will open and close when you tab on/off http://jsfiddle.net/wf_4/r4PqJ/2/

here is an additional script which handles the mousedown (click), focus and blur

   $(document).ready(function () {
    $('.section').hide();
    var hasFocus = false;
    $('h3').on('mousedown : focus : blur', function(e){

        if (e.type == 'focus' ) {
            hasFocus = true;
            $(this).addClass("open");
            $(this).next().show(); 
           // console.log('focus event fired '+ hasFocus);
        }
        else if(e.type == 'mousedown' && hasFocus != true){
            $(this).toggleClass("open");
            $(this).next().toggle();
            hasFocus = false;
          //  console.log('mousedown event fired '+ hasFocus);
        }
        else if(e.type == 'blur' && hasFocus != true){
            $(this).removeClass("open");
            $(this).next().hide();
          //  console.log('blur event fired '+ hasFocus);
        }
        hasFocus = false;           
    });     
}); //end ready

and another fiddle http://jsfiddle.net/wf_4/r4PqJ/5/

Thanks @wf4 This is what I needed, but there is a small problem. Sometimes when you click the H3 it quickly shows the text then hides it again. Any idea why this might be happening? You can see it in your fiddle, too. — Nathan S, Mar 19 '14 at 16:42
that can most likely be fixed by adding the blur event to the focus event. I'll see if I can fix it in a new fiddle for you. — wf4, Mar 19 '14 at 16:44
I have tried to chain the events and to remove the `blur` event, but I think that its still flashing on click after you have used the tab to open then close the answer... I'll take another look but this is what I have so far: http://jsfiddle.net/wf_4/r4PqJ/3/ — wf4, Mar 19 '14 at 16:58
I notice it still flashes even if you haven't tabbed into the page. Edit: Would it make a difference if this was reworked to use for the clickable headings instead of
? I'm thinking this would allow us to move away from the focus code and just rely on the tabindex. Keyboard navigators could tab to that link, press enter, and the text would appear. — Nathan S, Mar 19 '14 at 16:59
I believe the glitch we're seeing is discussed in the link @dkrape provided (http://stackoverflow.com/questions/4889355/jquery-handing-both-focus-and-click-on-an-element) but I'm not advanced enough to be able to apply the fix discussed there to my code. — Nathan S, Mar 19 '14 at 18:39

Changing this hide/expand script for accessibility

1 Answers1

? I'm thinking this would allow us to move away from the focus code and just rely on the tabindex. Keyboard navigators could tab to that link, press enter, and the text would appear.