更改此隐藏/展开脚本以实现可访问性

Question

我正在使用下面的脚本以常见问题解答格式显示/隐藏文本。对于可访问性，这是行不通的。那些使用键盘导航的人无法展开文本，因为您单击以展开/隐藏的元素是标题，而不是链接，并且在浏览页面时标题不会获得焦点。

当用户单击链接或链接获得键盘焦点时，我将如何更改此脚本以使其显示/隐藏？

任何帮助将不胜感激。我一直在修补它，但似乎无法得到它。

脚本：

<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

如果我完全理解您的要求，您可以将tabindex 添加到您的H3...

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

...这将允许您使用 tab 键选择它，然后您可以添加一个.focus() 事件以在您点击它时打开答案，您甚至可以添加一个.blur() 事件来关闭我猜也回答。

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

这是我用来测试答案的小提琴的链接：http://jsfiddle.net/r4PqJ/

这是一个小提琴，当你打开/关闭标签时会打开和关闭http://jsfiddle.net/wf_4/r4PqJ/2/

这是一个额外的脚本，用于处理mousedown（点击）、focus 和 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

和另一个小提琴http://jsfiddle.net/wf_4/r4PqJ/5/