Details
-
Bug
-
Resolution: Fixed
-
Medium
-
7.16.2
-
Severity 3 - Minor
-
Description
Issue Summary
On the 'Advanced search' page, the CONTRIBUTOR & IN SPACE form control are not associated with its visible label programmatically.
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 CONTRIBUTOR & IN SPACE form controls in left sidebar.
Actual Results
While navigating with screen reader tuned on, when user navigate to the CONTRIBUTOR & IN SPACE form controls screen reader announces as 'search text field' because the visual label is not correctly associated with input fields. The id & for values provided are different for input & label elements.
This makes screen reader users difficult to understand the purpose of these input fields.
Expected Results
The screen reader should announce the labels when user navigate to the CONTRIBUTOR & IN SPACE form controls. Associate the labels to the input fields explicitly via for & id relation. The values of 'for' attribute of labels should be same as value of 'id' attributes of input fields.
Code Snippet:
<label for="s2id_autogen1">Contributor</label>
<input type="text" class="select2-input" id="s2id_autogen1">
<label for="s2id_autogen2">In space</label>
<input type="text" class="select2-input select2-default" id="s2id_autogen2" >
Screenshots:
Issue 719703: https://axeauditor.dequecloud.com/api/v1/file/b6ad3332-4ebd-11ec-8184-3f18fedf0815
BACKGROUND
People who are blind cannot use the visual layout of a form to determine which labels go with which form elements. In order to be certain which label goes with which form element, the label and form element must be programmatically associated. When labels and form elements are programmatically associated, a screen reader user can put focus on a form element and the screen reader will automatically read the label and element type together. In addition, some coding methods will create a larger clickable area for the form element which benefits people with motor disabilities.
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Attachments
Issue Links
- duplicates
-
CONFSERVER-77301 Search - Advanced Search - contributor: Form elements must have labels
- Closed
-
CONFSERVER-77302 Search - Advanced Search-in space: Form elements must have labels
- Closed
-
CONFSERVER-79429 Search - Advanced Search : Form elements must have labels
- Closed
-
CONFSERVER-79430 Search - Advanced Search : Form elements must have labels
- Closed