#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/autocomplete-design/aria-patterns

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/autocomplete-design/aria-patterns

Repovive

ARIA Patterns - Autocomplete Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

ARIA Patterns

ARIA for autocomplete

Autocomplete requires specific ARIA patterns.

Required attributes:

<input
  role="combobox"
  aria-autocomplete="list"
  aria-expanded={isOpen}
  aria-controls="suggestions-list"
  aria-activedescendant={highlightedId}
/>
<ul id="suggestions-list" role="listbox">
  <li role="option" id="suggestion-0">...</li>
</ul>

Screen reader behavior:

Announces number of suggestions
Reads highlighted option
Announces selection

Testing: Verify with VoiceOver or NVDA. Automated tools miss many issues.