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>

Answer 1

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/