title: Radio button keyboard trap
body: <p>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?</p>
  
  <p><strong>HTML</strong> markup:</p>
  
  <pre><code>&lt;div id="contentWrapper"&gt;
  &lt;p class="instructions"&gt;Click on the correct answer.&lt;/p&gt;
  
  &lt;ol start="49"&gt;
      &lt;!-- Start of multiple choice question --&gt;
      &lt;li class="multipleChoice gradedQuestion"&gt;
          &lt;p class="question"&gt;If you receive a request for an extension from a trader, you should:&lt;/p&gt;
          &lt;input type="hidden" name="questionNumber" value="49"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;div class="answerOption"&gt;&lt;label for="question49A"&gt;Refer to IP 13; if the original requirements are still being met, approve the extension.&lt;/label&gt;&lt;/div&gt;
                  &lt;div class="inputAndIdContainer"&gt;&lt;input type="radio" name="question49" value="0" id="question49A"&gt; A.&lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="answerOption"&gt;&lt;label for="question49B"&gt;Refer to IP 20; if the original requirements are still being met, approve the extension.&lt;/label&gt;&lt;/div&gt;
  
  
          &lt;div class="inputAndIdContainer"&gt;&lt;input type="radio" name="question49" value="0" id="question49B"&gt; B.&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="answerOption"&gt;&lt;label for="question49C"&gt;Refer to FW1; if the original requirements are still being met, approve the extension.&lt;/label&gt;&lt;/div&gt;
              &lt;div class="inputAndIdContainer"&gt;&lt;input type="radio" name="question49" value="1" id="question49C"&gt; C.&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="feedback"&gt;
          &lt;div class="answeredCorrectly"&gt;Correct&lt;/div&gt;
          &lt;div class="answeredIncorrectly"&gt;Incorrect&lt;/div&gt;
          &lt;div class="answer"&gt;
              &lt;strong&gt;Answer:&lt;/strong&gt; C - Refer to FW1.
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;!-- End of multiple choice question --&gt;
  </code></pre>
  
  <p>
  </p>