-
Type: Improvement
-
Status: Resolved
-
Priority: Critical
-
Resolution: Duplicate
-
Affects Version/s: 3.0.15
-
Fix Version/s: None
-
Component/s: A11y
-
Tags:
in web ui:
go to the default search
search for a keyword and get some results (e.g. worspace)
switch to list view if necessary
=> sort buttons are not announced by the screen reader because missing a label
expected: buttons should be announced by the screen reader
______________
The button is missing an accessible name/label. As a result its functionality or purpose is not conveyed to screen reader users.
Element Name: Unselected Sort buttons
Location:
In main region of the page, after
Clicking “Search” icon in left nav. Enter a search term like “Test”. Select Search and observe that a page that comes up, i.e. Search results with “Table view”.
Recommendation to fix
RULE :
The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.
HOW TO FIX:
Fix this issue by using any of the following techniques:
1. Use the innertext of the <button> or role="button" element
<button>Apply now!</button>
<button class="apply-btn"><span class="sr-text">Apply now!</span></button>
2. Use a non-empty aria-label attribute on the <button> or role="button" element.
<button class="apply-btn" aria-label="Apply now!"></button>
<span role="button" class="apply-btn" aria-label="Apply Now!"></span>
REFERENCE:
Deque University: https://dequeuniversity.com/class/custom-widgets2/concepts/name
W3C ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-label
BACKGROUND:
Buttons must have discernible text that describes the button's function or action for screen reader and other assistive technology users.
- duplicates
-
ELEMENTS-1427 Improve label for sort order button
- Resolved
- is related to
-
ELEMENTS-1427 Improve label for sort order button
- Resolved