-
Bug
-
Resolution: Unresolved
-
Medium
-
Severity 3 - Minor
-
-
Accessibility
Issue Summary
The Search input field has an inappropriate accessible name.
Test URLs
mycolorado-accessibility-support
Steps to Reproduce
- Open the myColorado support request form on Android and iOS devices.
- Enable a screen reader (VoiceOver on iOS or TalkBack on Android).
- Activate the Search button in the header > the search input field appears.
- Observe that verbose name is announced by screen readers.
Screen Recording
MissingAccessiblename_SearchField.mp4
Actual Results
An inappropriate accessible name has been defined for the "Search" input field. When focused, screen readers announce the placeholder text "Search for help resource" twice, along with the helper text "Looking for something? Enter your search term above to get started." This redundancy occurs because the placeholder text is implemented both as an aria-label and as a placeholder attribute.
As a result, users of assistive technologies will not be able to understand the purpose of the form field effectively.
Expected Results
Ensure that the label/name for the interactive elements are appropriate and clear.
Apply the following changes ->
- Do not use placeholder text as the accessible name for the search field.
- Provide a clear and concise accessible name for the search field using aria-label (e.g., aria-label="Search").
Code Snippet
<input id="search-bar-input" aria-label="Search" aria-describedby="dynamic-search-result" data-ds--text-field--input="true" name="Search bar input" placeholder="Search for help resources" class="css-1xtgxff" value="">
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