title: How to navigate with arrow keys between radio buttons when input type radio is hidden and label is shown?
body: <p>I have a radio button group and the radio buttons are hidden while the associated label is shown.  Let's say
  that the radio button group is called color.  When a certain color is chosen, I highlight the label with that color.  This works great when all I click the labels.  But I would also like to navigate between the labels using arrow keys.  I realize that since the input is hidden, the arrow movements are not taking effect.  But is there any way to get around this?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;input type="radio" name="color" value="blue" id="blue"&gt;&lt;label for="blue"&gt;Blue&lt;/label&gt;&lt;br&gt;
      &lt;input type="radio" name="color" value="red" id="red"&gt;&lt;label for="red"&gt;Red&lt;/label&gt;&lt;br&gt;
      &lt;input type="radio" name="color" value="green" id="green"&gt;&lt;label for="green"&gt;Green&lt;/label&gt;&lt;br&gt;
      &lt;input type="hidden" value="" id="color_selected"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>input {
      display: none;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
      $('input[name="color"]').change(function() {
          var prevColor = $('#color_selected').val();
          if (prevColor) {
              $('#' + prevColor).next('label').css({'background':'#FFFFFF'});
          }
          var color = jQuery(this).val();
          $(this).next('label').css({'background':color});
          $('#color_selected').val(color);
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/nkqLj/" rel="nofollow">http://jsfiddle.net/nkqLj/</a></p>
  
  <p>Thank you for your time.</p>