Question

我创建了一个多重选择问题练习, 并且与键盘可访问性有问题。基本上, 用户无法通过键盘在无线电按钮列表中循环。当“ 焦点” 光标在无线电按钮上, 用户按箭头键以移动到下一个无线电按钮时, 键盘陷阱就会发生。无线电按钮不是简单地聚焦它, 而是选择了它, 从而显示答案。在使用键盘通过它们时, 我如何才能停止选中的无线电按钮?

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

简短的回答是,你不能,这不是键盘陷阱。这是无线电的本质。

如果它们被组合在一起( 名称属性), 您可以将其标签; 通过按键空间选择第一个项目, 使用箭头键它选择下一个项目。您应该写入您的 JUS 以观察焦点进入该组, 然后离开。左侧显示 < code_ lt; div id=" feedback " & gt; 或按按钮显示它。

您可能需要添加类似于. kind () 的. focus () 函数。

Answer 2

他们应该这样工作,看看",http://www.cs.tut.fi/~jkorpela/jkorpela/forms/kbd.html" rel=“nofollow”>这个文件!

基本上是这样的:

on IE, 当通过 tabbing 达到一个无线电按钮组时, 最初选中的按钮被聚焦, 圆点矩形也表明了这一点。您可以使用箭头键在组内的按钮之间移动; “ 向下” 和“ 右” 箭头在组内向前移动, 而“ 向上” 和“ 左” 箭头向后移动。当移动到按钮时, 该按钮会被选中( 而被检查组中的按钮将被选中) 。

on Netscape, 情况是不同的。当通过 tabb 到达一组无线电按钮时, 第一个按钮会获得焦点。您可以通过 tabbb 移动到组内。以这种方式移动到一个按钮不会改变设置。使用空间栏或 Enter 键来检查按钮。

Answer 3

我解决了这个问题,在点击后模糊了输入。

至少这样, 如果您使用制表/ 空间/ row 键在导航时使用制表符/ 空格/ 箭头键, 它不会与用户混为一谈。如果他们单击它, 他们不太可能使用箭头键选择下一个选项。

杰克里:

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

友情链接