Radio button keyboard trap

Question

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

<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

That's the way they should work, take a look at this document!

Basically it's this:

On IE, when a radio button group is reached via tabbing, the initially selected button is focused on, and the dotted rectangle indicates this. You can use arrow keys to move between the buttons inside the group; both "down" and "right" arrow move forward inside the group, and both "up" and "left" arrow move backward. And upon moving to a button, that button gets checked (and the button in the group that was checked gets unchecked).

On Netscape, things are different. When a set of radio buttons is reached via tabbing, the first button receives focus. You can move forward inside the group by tabbing. Moving to a button that way does not change the setting. Use the space bar or Enter key to check a button.

Answer 2

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

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.

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

Answer 3

I solved this problem by blurring the input after it's been clicked.

At least with this way if you are navigating using tab/space/arrow keys it will not mess with the user. If they click it's very unlikely they will be using arrow keys to select the next option.

Jquery:

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