Critical in web ui:
browse a document with read access at least
on the right side of the document, start adding a comment
=> comment actions like submit and clear are not announced by the screen reader because missing a role / label
expected: should be announced by the screen reader
________________________
Source Code
<iron-icon id="submit" name="submit" class="main-option opaque" icon="check"></iron-icon>
<iron-icon name="clear" class="main-option opaque" icon="clear"></iron-icon>
Description
The button is missing both a role and an accessible name/label.
Element Name: 'Submit' and 'Clear' controls under 'Comments' tab
Location: Homepage-> Select Search from Left Navigation-> Select 'Switch to Queue view' select a document, it opens in Main region of the page.
NVDA Is narrating name as clickable when its focus is on each of the Tick and X mark controls under Activity when entered a comment.
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:
To fix this issue, BOTH a ROLE and a NAME must be provided for the button.
Provide a ROLE by using one of the following techniques:
1. Use a native HTML <button> element.
<button>Apply now!</button>
2. Add role="button" to the custom button container.
<span role="button" class="apply-btn" aria-label="Apply Now!"></span>
Provide a NAME 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-widgets/concepts/name
Deque University: https://dequeuniversity.com/class/custom-widgets/examples/button
W3C ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-label
BACKGROUND:
Every user interface control must have a role to convey what type of control it is for screen reader and other assistive technology users. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) using ARIA as well as expected keyboard interactions.
Buttons must have discernible text that describes the button's function or action for screen reader and other assistive technology users.
- links to
