Alternative to tabs or custom listbox menu
<fieldset class= "radio-filter-container" >
<legend id= "radio-filter-group" tabindex= "-1" > <!-- focusable after click of labels-->
Select a NATO letter
</legend>
<div> <!-- block level element for layout purposes -->
<div class= "radio-filter" tabindex= "-1" > <!-- tabindex makes :focus-within work better for some reason-->
<input type= "radio" name= "radio-filter" class= "filter" id= "alphaRadio" checked >
<label class= "radio-filter-label" for= "alphaRadio" > Alpha</label>
<input type= "radio" name= "radio-filter" class= "filter" id= "bravoRadio" >
<label class= "radio-filter-label" for= "bravoRadio" > Bravo</label>
<input type= "radio" name= "radio-filter" class= "filter" id= "charlieRadio" >
<label class= "radio-filter-label" for= "charlieRadio" > Charlie</label>
<input type= "radio" name= "radio-filter" class= "filter" id= "deltaRadio" >
<label class= "radio-filter-label" for= "deltaRadio" > Delta</label>
</div>
</div>
</fieldset>
Select a NATO letter
Pros
Tabs seem like a natural pattern, but many screen reader users don’t know the keyboard shortcuts (arrows/home/end) for tabs. Radio inputs, however, are well known.
Cons
The only problem here is that for the sighted keyboard user, the affordance of radio input functionality is lost if it doesn’t look like radio inputs.