navigating on the check-boxes using tab key and selecting them using space key

Question

I am using the check-boxes wrapped inside the label tag and also using another label to display a custom icon and hover effect for the check-box. It is working fine using the mouse ie I can select the check-box using mouse.

But now I have to navigate through these check-boxes using the tab key and make them select-able using the space key. I tried by adding the tabindex to both input field and label tag but none of them seems to working.

here is the code snippet that we are using

<label for="checkbox1"> <input class="css-checkbox" type="checkbox" id="checkbox1" tabindex="1"/> <label class="check-label" for="checkbox1"> Health Check </label> </label>

how can I navigate on these check-boxes using tab key and make a selection using space key?

Answer 1

You're probaly looking for a solution like this:

<label for="checkbox1">
    <input class="css-checkbox" type="checkbox" id="checkbox1" tabindex="0"/>
    <span>Health Check</span>
</label>
<br />
<label for="checkbox2">
    <input class="css-checkbox" type="checkbox" id="checkbox2" tabindex="0"/>
    <span>Health Check #2</span>
</label>
<br />
<label for="checkbox3">
    <input class="css-checkbox" type="checkbox" id="checkbox3" tabindex="0"/>
    <span>Health Check #3</span>
</label>

The key points are to use only one wrapping label and then tabindex=0 .

Demo: http://cssdeck.com/labs/oeyqxhhz