How to allow for users to keyboard tab over and select invisible checkboxes with visible labels?

Question

I'm working with "card" style checkboxes - there are three invisible checkboxes (opacity: 0) with corresponding labels that get displayed as boxes with backgrounds.

When the label is clicked, the checkbox is selected, and I have its label changing to a blue background. This is all working fine except I found that I cannot tab through the labels and select their corresponding checkboxes when the labels themselves are in focus by hitting the space bar.

The checkboxes themselves are able to be tabbed to and selected with the spacebar, but not when the label is focused on... it's in between the labels.

Note: I set a tabindex="0" on the labels and that allows them to be focused on and highlighted.

Is there any way to accomplish this without JavaScript? I'm working on the UI for an Angular application but I don't have a whole lot of Angular knowledge.

I know there's also inconsistencies with tabbing and input selection with varying browsers (I'm working on this in Chrome), so I hope to take that into account as well. Thanks.

/* Unchecked labels are red */
label {
  display: inline-block;  
  width: 100px;
  height: 50px;
  background-color: tomato;
}

/* Invisible checkboxes */
input[type="checkbox"] {
  opacity: 0;    
}

/* If checkbox is checked, blue background */
input[type="checkbox"]:checked + label {
  background-color: blue;
}

<input type="checkbox" id="1">
<label for="1" tabindex="0"></label>

<input type="checkbox" id="2">
<label for="2" tabindex="0"></label>

<input type="checkbox" id="3">
<label for="3" tabindex="0"></label>

Answer 1

A very creative answer by @dacre-denny, and it answers the original question, but the original code and the answer code still have some serious accessibility problems, and since the accessibility tag was specified for this question, I wanted to comment on that, even though it wasn't part of the OP.

The accepted answer suggested updating tabindex for the <label> elements to have tabindex of 0, 1, and 2. Please do not use values for tabindex that are greater than 0.

The spec for tabindex has two warnings:

Using a positive value for tabindex to specify the element’s position in the sequential focus navigation order interacts with the order of all focusable elements. It is error-prone, and therefore not recommended

and secondly,

authors should only make elements focusable if they act as interactive controls or widgets

A <label> element is not an interactive element so should not have a tabindex. If you want the label to be interactive, you'd have to add a click handler and a keypress handler and give the label an appropriate role so that a screen reader user will know what that element is.

I think the accepted answer will work properly if you completely remove tabindex from the <label> elements and just let the natural keyboard focus go to the "hidden" checkboxes. The red block will display a focus indicator when the checkbox has focus due to @dacre-denny's styles, and the user will be able to use the space to select the hidden checkbox and the block will change color.

(I brought up the browser's code inspector on the "code snippet" and removed tabindex from the <label> elements and was able to tab through the blocks and select them with the space key.)

Answer 2

If I understand your question correctly, then what you're needing can be achieved via the :focus selector. You could add this CSS:

input[type="checkbox"]:focus + label {
  border:2px solid red;
}

This would cause a red border to show around your label when the corresponding checkbox has focus. This will allow your users to track which checkbox has focus as they "tabs through" the checkbox collection.

Also, consider updating the tabindex of your checkbox inputs as shown below, for consistent/orderly tab navigation:

/* Unchecked labels are red */
label {
  display: inline-block;  
  width: 100px;
  height: 50px;
  background-color: tomato;
}

/* Invisible checkboxes */
input[type="checkbox"] {
  opacity: 0;    
}

/* If checkbox is checked, blue background */
input[type="checkbox"]:checked + label {
  background-color: blue;
}

/* Add this */
input[type="checkbox"]:focus + label {
  border:2px solid red;
}

<input type="checkbox" id="1">
<label for="1" tabindex="0"></label>

<input type="checkbox" id="2">
<label for="2" tabindex="1"></label>

<input type="checkbox" id="3">
<label for="3" tabindex="2"></label>