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

簡単に言えば、できません。これはキーボード トラップではありません。それがラジオの性質です。

それらが一緒にグループ化されている場合 (name 属性)、タブで移動します。スペースを押すと最初の項目が選択され、矢印キーを使用すると次の項目が選択されます。グループに入ってから離れるフォーカスを監視する JS を作成する必要があります。離れたら、表示<div id="feedback">するか、表示するボタンを作成します。

編集他の投稿に関しては、おそらく .click() に似た .focus() 関数を追加する必要があります。

于 2012-05-24T15:29:07.970 に答える
3

このドキュメントを見てください。

基本的にはこれです：

IE では、タブ操作でラジオ ボタン グループに到達すると、最初に選択されたボタンがフォーカスされ、点線の四角形がこれを示します。矢印キーを使用して、グループ内のボタン間を移動できます。「下」と「右」の矢印はグループ内で前方に移動し、「上」と「左」の矢印は後方に移動します。ボタンに移動すると、そのボタンがチェックされます (チェックされていたグループのボタンはチェックされません)。

Netscape では事情が異なります。タブで一連のラジオ ボタンに到達すると、最初のボタンがフォーカスを受け取ります。タブでグループ内を進むことができます。そのようにボタンに移動しても、設定は変更されません。ボタンをチェックするには、スペース バーまたは Enter キーを使用します。

于 2012-05-24T15:27:45.490 に答える
1

クリックした後に入力をぼかすことで、この問題を解決しました。

少なくともこの方法では、タブ/スペース/矢印キーを使用してナビゲートしている場合、ユーザーを台無しにすることはありません. クリックした場合、矢印キーを使用して次のオプションを選択する可能性はほとんどありません。

Jクエリ:

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