Details
-
Bug
-
Resolution: Duplicate
-
Low
-
None
-
7.16.2
-
Severity 3 - Minor
-
Description
Issue Summary
The button is missing both a role and an accessible name/label.
Element:
1) "invite people to edit" button.
Location:
This is present next to "Draft".
Issue id: 725313
Expected Results
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 ONE of the step 1 AND using an aria-label attribute on the element.
1.a. Use a native HTML <button> element.
<button>Apply now!</button>
1.b. Add role="button" to the custom button container.
<span role="button" class="apply-btn" aria-label="Apply Now!"></span>
2. Add an aria-label attribute on the element.
<button class="apply-btn" aria-label="Apply now!"></button>
<span role="button" class="apply-btn" aria-label="Apply Now!"></span>
REFERENCE:
W3C HTML5 Recommendation: https://www.w3.org/TR/html5/sec-forms.html#the-button-element
Deque University: https://dequeuniversity.com/class/custom-widgets2/examples/button
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:
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.
Actual Results
Issue 725313: https://axeauditor.dequecloud.com/api/v1/file/abd726d0-4ebc-11ec-af91-3351b50d9dd6
Create new page - blank page: https://axeauditor.dequecloud.com/api/v1/testrun-unit-screenshot/8bf0f41c-50c5-11ec-a77b-a747481f46ce
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Attachments
Issue Links
- is duplicated by
-
CONFSERVER-78044 Confluence editor: Invite people element is not accessible for Keyboard & screen reader users.
- Closed