¿Cómo hago un elemento una tabulación regular dentro de un formulario?

Hice un control de formulario que se usa como su contenedor (vea el conmutador Sí/No a continuación)

Aquí está el código para eso:

<span class="toggle">
    <i>Yes</i>
    <i>No</i>
    <input type="hidden" name="toggle-value" value="0">
</span>

Mi CSS no es relevante para la pregunta, pero está incluido para la comprensión de mi control:

.toggle { width:auto; height: 20px; display: inline-block; position: relative;  cursor: pointer; vertical-align: middle; padding: 0; margin-right: 27px; color: white !important;}
.toggle i { display: block; padding: 0 12px; width: 100%; height: 100%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font: 11px/20px Arial !important; text-transform: uppercase; }
.toggle i:first-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #73B9FF; }
.toggle i:last-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #cc0000; position: relative; top: -20px; z-index: -1; }
.toggle.on i:first-child { z-index: 1; } /* they overlap but on click they switch who gets to be on top. */
.toggle.on i:last-child { z-index: -1; }  
.toggle.off i:first-child { z-index: -1; }
.toggle.off i:last-child { z-index: 1; }
.toggle.off i:last-child:before { content: " "; display:block; position:absolute; left:1px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1;  background-color: #fff; } /* circle */
.toggle.on i:first-child:after { content: " "; display:block; position:absolute; right:-23px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1;  background-color: #fff; } /* circle */

y el JS que hace que todo funcione:

.on('click', '.toggle', function(){
    var input = $(this).next('input');
        if(input.val() == 1) {
            $(this).removeClass('on').addClass('off');
            input.val(0).change();
        } else {
            $(this).removeClass('off').addClass('on');
            input.val(1).change();
        }
}

El problema es que estoy usando esto en toda mi aplicación para la entrada de datos. ¿Alguna vez ha querido NO usar el mouse cuando está ingresando una gran cantidad de datos? Sí yo también. Así que presionas TAB y una palanca como esta debería responder a la barra espaciadora. Pero en cambio, dado que es solo un elemento, se omite por completo.

Espero que alguien pueda ayudarme a resolver la pregunta de “¿Cómo diablos hago que esto sea una tabulación Y esté en el orden correcto?“?

============== EDITAR: AQUÍ ESTÁ MI CÓDIGO JQUERY ACTUALIZADO QUE CONTIENE LA SOLUCIÓN:

$('.toggle').click(function(){
    var input = $(this).next('input');
        if(input.val() == 1) {
            $(this).removeClass('on').addClass('off');
            input.val(0).change();
        } else {
            $(this).removeClass('off').addClass('on');
            input.val(1).change();
        }
}).focus(function() {
    $(this).bind('keydown', 'space', function(e){
        $(this).trigger('click')
        e.preventDefault();
    });

}).blur(function() {
    $(this).unbind('keydown');

}).attr('tabIndex', 0);

Intente configurar su tabindex en 0, en los elementos que no sean de anclaje que le gustaría hacer “tabable”. Por ejemplo tabindex="0". De esta manera, no te meterás con el orden de tabulación, ni tendrás que lanzar índices de tabulación por todos lados.

Mira en el atributo html tabindex. Básicamente, debería poder configurar tabindex en cada entrada que desee enfocable a través de la tecla de tabulación. Comience el primero un 1 y simplemente cuente hacia arriba para cada entrada. Si también desea sacar una entrada del enfoque a través de la tecla de tabulación, configure el tabindex a -1.