Details
-
Bug
-
Resolution: Fixed
-
Medium
-
7.16.2
-
Severity 3 - Minor
-
Description
Issue Summary
On 'Advanced search' page, the search input field does not have an accessible label.
Tested URL:
https://confsrva11ya.instenv.atl-test.space/dosearchsite.action?includeArchivedSpaces=false
Steps to reproduce
- Navigate to the confluence homepage.
- Navigate to the Search image button inside header section & activate it.
- Navigate to 'Advanced search' link inside search modal & activate it.
- Navigate to the 'search' input field.
Actual Results
While navigating with screen reader turned on, when user navigate to the 'search' input field screen reader announces as 'Edit text blank'. An accessible label is not provided on the page.
This makes screen reader users difficult to understand the purpose of input field.
Expected Results
The H2 element with text 'Search for pages, files, people and more' can be used as label to the search input.
So the H2 element & the description element 'Refine your search using...' Should be placed above the search input. Mark the text 'Search for pages, files, people and more' in HTML label element & associate it with the input field. Also associate the description element with input field via aria-describedby attribute.
Screenshots:
Workaround
As mentioned by the design team that providing visible label is not possible currently. So as a workaround we can add “aria-label” attribute to the <input> fields as an Accessible label.
For Example : aria-label=“Search for pages, files, people and more”
Additionally the instruction “Refine your search using the filters on the left, or use syntax to create an advanced query.” can be provided near the <input> field but it can be off-screen & it should be connected to the <input> element via “aria-describedby” attribute.
Attachments
Issue Links
- is duplicated by
-
CONFSERVER-79428 Search - Advanced Search : Form elements must have labels
- Closed