How can I make my modified radio buttons tabbable?

Question

I've used some CSS to make mobile-friendly 'radio' buttons by hiding the inputs and using the label elements instead. The code is below, but I've made a jsFiddle for convenience.

My problem is that a major usability issue arises when using a keyboard to navigate the form: the fields are no longer tabbable. I've tried adding tabindex attributes to the hidden inputs, the labels and to the div. The first two do not work at all, adding tabindex to the div works (the div is highlighted), but I can't interact with the form elements at all (with the arrow keys for example).

Is it possible to fix this just with CSS/HTML? I'd rather not fall back to javascript, but if there's no other way I guess I'll have to.

<input type='text'>
<div class='radio-select'>
  <input checked="checked" id="no" name="yes_no" value="False" type="radio">
  <label for="no">
    No
  </label>
  <input id="yes" name="yes_no" value="True" type="radio">
  <label for="yes" >
    Yes
  </label>
</div>
<input type='text'>
<style>
.radio-select label{
    background: #f00;
    border:1px solid #ddd;
    border-radius:10px;
    padding:10px;
    margin:5px 0;
    max-width:200px;
    clear:both;
    display: block;
    cursor:pointer;
}
.radio-select input[type='radio']{
    display: none;
}
.radio-select input[type='radio']:checked + label{
    background:#0f0 !important;
}
.radio-select input[type='radio']:checked + label:before{
    content:"✔";
}
</style>

Answer 1

If you hide the inputs by setting their opacity to 0 they will still be tabbable:

.radio-select input[type='radio']{
    opacity:0;
    filter:alpha(opacity=0);
    position:absolute
}

jsfiddle