单选按钮键盘陷阱 [英] Radio button keyboard trap

问题描述

我正在创建一个多选题问题练习，并且遇到键盘辅助功能方面的问题。基本上，用户不能通过键盘循环通过单选按钮列表。当聚焦光标在单选按钮上方，并且用户按下箭头键移动到下一个单选按钮时，发生键盘陷阱。不是简单地对焦它，而是选择单选按钮，因此显示答案。

I'm creating a multiple choice question exercise and am having issues with keyboard accessibility. Basically, the user is not able to cycle through the list of radio buttons through the keyboard. When the "focus" cursor is over a radio button and the user pressed the arrow key to move onto the next radio button a keyboard trap occurs. Instead of simply focusing it, the radio button is selected instead and thus the answer is displayed. How can I stop radio buttons being selected when going through them with the keyboard?

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

推荐答案

简短的答案是你不能，这不是一个键盘陷阱。这是一个收音机的性质。

Short answer is you can't, and this isn't a keyboard trap. That is the nature of a radio.

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

If they are grouped together (name attribute), you tab into it; by pressing space you select the first item, by using the arrow keys it selects the next item. You should write your JS to watch for focus to enter the group and then leave. Once left, show <div id="feedback"> or make a button to show it.

修改关于您的其他帖子，您可能需要添加类似于.click（）的.focus（）函数。

Edit Regarding your other post, you probably need to add a .focus() function that is similar to .click().

这篇关于单选按钮键盘陷阱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！