1

我正在创建一个多项选择题练习，并且遇到了键盘可访问性问题。基本上，用户无法通过键盘循环浏览单选按钮列表。当“焦点”光标位于单选按钮上并且用户按下箭头键移动到下一个单选按钮时，会发生键盘陷阱。不是简单地聚焦它，而是选择单选按钮，从而显示答案。使用键盘浏览单选按钮时，如何停止选择单选按钮？

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 -->

4

3 回答 3

8

简短的回答是你不能，这不是键盘陷阱。这就是收音机的本质。

如果它们被组合在一起（名称属性），您可以进入它；按空格键选择第一个项目，使用箭头键选择下一个项目。你应该写你的JS来观察焦点进入组然后离开。离开后，显示<div id="feedback">或制作一个按钮来显示它。

编辑关于您的另一篇文章，您可能需要添加一个类似于 .click() 的 .focus() 函数。

于 2012-05-24T15:29:07.970 回答
3

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

基本上是这样的：

在 IE 上，当通过 Tab 键到达单选按钮组时，最初选择的按钮将被聚焦，虚线矩形表示这一点。您可以使用箭头键在组内的按钮之间移动；“向下”和“向右”箭头在组内都向前移动，而“向上”和“向左”箭头都向后移动。并且在移动到一个按钮时，该按钮被选中（并且被选中的组中的按钮被取消选中）。

在 Netscape 上，情况有所不同。当通过 Tab 键到达一组单选按钮时，第一个按钮将获得焦点。您可以通过选项卡在组内向前移动。以这种方式移动到按钮不会更改设置。使用空格键或 Enter 键检查按钮。

于 2012-05-24T15:27:45.490 回答
1

我通过在点击后模糊输入来解决这个问题。

至少通过这种方式，如果您使用制表符/空格/箭头键导航，它不会与用户混淆。如果他们点击它，他们不太可能使用箭头键来选择下一个选项。

查询：

$('.quiz input:radio').click(function(){ $(this).blur()})
于 2014-04-14T18:39:13.110 回答