Text-only HTML radio buttons that are keyboard-navigable? - html

Question

This thread (Text only radio buttons) provides a way to make radio buttons that show only text, surrounded by a border that changes color when the button is selected.
The problem is that keyboard navigation does not work in this setup. That's not surprising; it's hiding the radio button and displaying only the labels.
Is there a way to have text-only radio buttons that work with keyboard navigation?
Thank you.

Answer 1

The only solution I can think of without Javascript is to make the button invisible without using display: none, because it doesn't render the button and so you can't navigate it.
This can be done trough opacity. This will make it invisible, but it'll still be there on its spot. In order to make it not interfere with the other elements, you can set it to position: absolute. All troubles gone.
See:
label {
display: inline-block;
width: 100px;
height: 50px;
border: solid 2px red;
}
input[type="radio"] {
opacity: 0;
position: absolute;
}
input[type="radio"]:checked + label {
border: solid 2px green;
}
<input type="radio" id="test" name="jeff">
<label for="test">Pizza</label>
<input type="radio" id="test2" name="jeff">
<label for="test2">Steak</label>
An addition as mentioned by CBroe is to use the .visuallyhidden class instead of just using opacity. The compatibility might be better.
input[type="radio"] {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}

Answer 2

The following W3C page describes a way to make custom radio elements using ARIA:
ARIA radiogroup and radio Example
You should not use any CSS trick with native radio elements as it could led to unexpected behaviour. For instance focusing a native radio element with a screenreader may not always display the focus indicator (outline) around the label, but around the checkbox, which is problematic for people with low vision if that checkbox has been hidden.