The Fourth Gap in a Custom Dropdown: No Role or Expanded State
In a custom dropdown, the trigger is a styled <div>, invisible to the
accessibility tree as an interactive control, and there's no indication
the list is a dropdown or whether it's currently open.
Which specific ARIA additions fix this gap?
The correct answer is "role='combobox' with aria-expanded and aria-haspopup='listbox'."
The trigger needs role="combobox" (or, if built as a real <button>,
the button role is free) with aria-expanded="true"/"false" toggling as
the list opens and closes, and aria-haspopup="listbox" so a screen
reader announces it as a control that opens a list before the user even
activates it.
aria-label alone supplies a name, not the missing role or open/closed
state this gap is about. aria-live announces dynamic content changes,
not a widget's structural role. tabindex="0" alone only makes the
element focusable — a separate gap from telling assistive tech what
kind of control it is.
Share this question