单选按钮键盘陷阱(Radio button keyboard trap)

我创建一个选择题练习时遇到与键盘可访问性问题。 基本上，用户不能够循环单选按钮，通过键盘列表。 当“聚焦”光标在一个单选按钮，用户按下箭头键移动到下一个单选按钮键盘陷阱产生。 而不是简单地聚焦它，无线电按钮被改为选择，从而显示了答案。 如何通过他们的键盘会时，我停止在选定的单选按钮？

HTML标记：

<div id="contentWrapper">
<p class="instructions">Click on the correct answer.</p>

<ol start="49">
    <!-- Start of multiple choice question -->
    <li class="multipleChoice gradedQuestion">
        <p class="question">If you receive a request for an extension from a trader, you should:</p>
        <input type="hidden" name="questionNumber" value="49">
        <ul>
            <li>
                <div class="answerOption"><label for="question49A">Refer to IP 13; if the original requirements are still being met, approve the extension.</label></div>
                <div class="inputAndIdContainer"><input type="radio" name="question49" value="0" id="question49A"> A.</div>
            </li>
            <li>
                <div class="answerOption"><label for="question49B">Refer to IP 20; if the original requirements are still being met, approve the extension.</label></div>


        <div class="inputAndIdContainer"><input type="radio" name="question49" value="0" id="question49B"> B.</div>
        </li>
        <li>
            <div class="answerOption"><label for="question49C">Refer to FW1; if the original requirements are still being met, approve the extension.</label></div>
            <div class="inputAndIdContainer"><input type="radio" name="question49" value="1" id="question49C"> C.</div>
        </li>
    </ul>
    <div class="feedback">
        <div class="answeredCorrectly">Correct</div>
        <div class="answeredIncorrectly">Incorrect</div>
        <div class="answer">
            <strong>Answer:</strong> C - Refer to FW1.
        </div>
    </div>
</li>
<!-- End of multiple choice question -->

Answer 1:

简短的回答是，你不能，这不是一个键盘陷阱。 这是一个无线电的性质。

如果它们被组合在一起（name属性），你标签进去; 按空间你选择第一项，请使用箭头键选择它的下一个项目。 你应该写你的JS观看焦点，进入组，然后离开。 一旦离开，显示<div id="feedback">或使一个按钮来显示它。

编辑关于你提到的其他职位，你可能需要添加一个.focus（）函数类似。点击（）。

Answer 2:

这是他们应该的工作方式，看看这个文件！

基本上它是这样的：

上IE，当经由互联达到单选按钮组，初始选择按钮被聚焦时，而虚线矩形指示这一点。 您可以使用箭头键组内的按钮之间移动; 既有“下”和“右”箭头组内向前移动，都“上”和“左”箭头向后移动。 而在移动到按钮，该按钮被选中（而这是检查组在按钮被取消选中）。

在Netscape中，情况就不同了。 当经由互联达到组单选按钮，第一按钮接收焦点。 您可以通过Tab键组内向前移动。 移动到一个按钮，这样不会更改设置。 使用空格键或回车键查询按钮。

Answer 3:

我通过模糊输入它被点击后解决了这个问题。

至少用这种方式，如果您使用选项卡/空间/方向键导航也不会与用户的混乱。 如果他们点击这不太可能，他们将使用箭头键选择下一个选项。

jQuery的：

$('.quiz input:radio').click(function(){ $(this).blur()})

文章来源: Radio button keyboard trap