The First Gap in a Custom Dropdown: No Accessible Name at All
A custom dropdown's trigger and hidden option list sit next to a visible label reading "Country," but nothing in the markup ties the label to the control. A sighted user infers the connection visually; a screen-reader user reaching the control by field navigation hears only "combobox, collapsed," with no indication of which field it even is.
What's the fix for this specific gap?
The correct answer is "Associate the label explicitly, via
Fixing this gap means associating the label explicitly — either a real
<label for="..."> pointing at the trigger's id (if it's a real
<button>), or aria-labelledby pointing at the label element's id.
Without this, a screen-reader user who reaches the control field-by-
field hears "combobox, collapsed" with no indication of which field it
is at all.
Adding role="combobox" alone fixes a different gap (the missing ARIA
role), not the label-association gap. A live region announces dynamic
changes, not a static label relationship. Increasing font size is a
purely visual change with no effect on the accessibility tree at all.
Share this question