Skip to main content

Curbcut WCAG AAA

Suggestion

Type-to-filter over a known list — an ARIA 1.2 combobox.

Show the markup 
<div class="cc-field cc-suggestion" data-cc-suggestion>
  <label class="cc-label" for="ex-sug">Department</label>
  <input class="cc-input" id="ex-sug" role="combobox" aria-expanded="false" aria-controls="ex-sug-list" aria-autocomplete="list" autocomplete="off">
  <ul class="cc-suggestion__list" id="ex-sug-list" role="listbox" aria-label="Departments" hidden>
    <li class="cc-suggestion__option" id="ex-sug-1" role="option" aria-selected="false">Town Clerk</li>
    <li class="cc-suggestion__option" id="ex-sug-2" role="option" aria-selected="false">Assessor's Office</li>
    <li class="cc-suggestion__option" id="ex-sug-3" role="option" aria-selected="false">Board of Health</li>
    <li class="cc-suggestion__option" id="ex-sug-4" role="option" aria-selected="false">Highway Department</li>
  </ul>
</div>

Accessibility

  • ARIA 1.2 combobox: aria-expanded, aria-controls, aria-activedescendant; arrow keys move the active option, Enter selects, Esc closes.
  • Focus never leaves the input — the listbox is operated virtually, per the pattern.
  • Typing is optional: arrow-down opens the full list, so it degrades to a picker.
  • For short lists a native Select beats a combobox — reach for Suggestion only past ~15 options.