Skip to main content Skip to site Map

Radio filter

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.