-
Bug
-
Resolution: Unresolved
-
High
-
Severity 3 - Minor
-
-
Accessibility
Issue Summary
The “What can we help you with?” and “Category” comboboxes are announced as text fields by VoiceOver and TalkBack screen readers on mobile devices.
Note:
The combobox functionality works as expected on desktop. However, on mobile devices, the “What can we help you with?” and “Category” select-only comboboxes are announced as text fields by VoiceOver (iOS) and TalkBack (Android) — e.g., “text field, combobox, listbox, collapsed.”
Since these are select-only comboboxes, they should not be announced as text fields, as this can confuse screen reader users about how to interact with them.
Test URLs
mycolorado-accessibility-support
Steps to Reproduce
- Open the myColorado Support Request Form on iOS or Android devices.
- Enable a screen reader (VoiceOver on iOS or TalkBack on Android).
- Navigate to the “What can we help you with?” and “Category” comboboxes.
- Observe that the comboboxes are announced as text fields by the screen reader.
Screen Recording
Combobox announcement issue.mov
Actual Results
When screen reader users navigate through the “What can we help you with?” and “Category” select-only comboboxes on mobile devices using VoiceOver (iOS) or TalkBack (Android), the comboboxes are announced as “text field, combobox, listbox, collapsed”.
This occurs because the comboboxes are implemented using <input type="text" role="combobox"> and related ARIA attributes. On mobile devices, coding a select-only combobox with <input type="text"> causes it to be rendered and announced as a text field.
As a result, screen reader users may be confused about the expected functionality of these select-only comboboxes.
Expected Results
When screen reader users navigate through select-only comboboxes on mobile devices using VoiceOver (iOS) or TalkBack (Android), the comboboxes should be announced as comboboxes only and not as text fields.
Apply the following changes:
- Use native <select> elements wherever possible.
- Native select elements are reliably announced as comboboxes by VoiceOver (iOS) and TalkBack (Android) without additional ARIA.
- If a custom combobox is required, implement ARIA attributes correctly:
- Use role="combobox" on the container element.
- Ensure aria-haspopup="listbox" and aria-expanded reflect the state of the dropdown.
- Associate the combobox with its label using aria-labelledby or aria-label.
- Ensure aria-activedescendant is updated as users navigate options.
- Avoid using <input type="text"> for select-only comboboxes, as it may be announced incorrectly on mobile devices.
For information on creating accessible select-only comboboxes, refer to the following resources:
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
iPhone 15 Pro Max
iOS Version 26.0
Android Version 14
Chrome - Version 140.0.7339.207
Safari- Version 26
TalkBack
VoiceOver - Version Latest