-
Bug
-
Resolution: Cannot Reproduce
-
Low
-
None
-
4.20.0
-
Severity 3 - Minor
-
Issue Summary
aria-hidden="true" is used on informative content making it inaccessible to assistive technology.
Elements:
- Configure
- Copy
- Delete
Location:
Present on expanding "Settings" button
Note:
Remove aria-hidden = "true" in the outer container.
Tested URL
Steps to Reproduce
- Step 1
Actual Results
Actual results
Expected Results
Fix Information
RULE :
The reading and navigation order MUST be logical and intuitive.
HOW TO FIX:
Important note: If you do not place the modal dialog container as a direct child element of the <body> element in the DOM, handling the aria-hidden attribute becomes MUCH more difficult. You will be responsible for correctly adding the aria-hidden="true" attribute to many more elements.
Fix this issue by adding the aria-hidden="true" attribute to the modal dialog container's sibling elements within the <body> element. (You do not need to add aria-hidden="true" to <script> and <style> or the page overlay <div> elements as screen readers do not read content in those tags.) This will prevent screen reader users from browsing outside the modal dialog. When the modal dialog is dismissed it is extremely important that the aria-hidden="true" attribute is removed to expose the page content to screen reader users again.
REFERENCE:
Deque University: https://dequeuniversity.com/class/semantic-structure2/within-pages/order
BACKGROUND:
Modal dialogs overlay page content and prevent users from interacting with the content behind the modal dialog until it is dismissed. If screen reader users can read content behind a modal dialog window, they may become disoriented or confused. Both keyboard focus and screen reader focus must be trapped within a modal dialog until it is dismissed. When both keyboard focus and browsing are trapped within a modal dialog, screen reader users are able to interact with it as intended.
Screenshot
Screen Recording
screen recording
Workaround
workaround
Bug Ref: 747123
Bulldog Ref:
Form Name |
---|
[JSDSERVER-12096] Insight Object Schemes : aria-hidden="true" is used incorrectly.
Resolution | New: Cannot Reproduce [ 5 ] | |
Status | Original: Needs Triage [ 10030 ] | New: Closed [ 6 ] |
Resolution | Original: Fixed [ 1 ] | |
Status | Original: Closed [ 6 ] | New: Needs Triage [ 10030 ] |
Labels | Original: 1.3.2 Accessibility WCAG21 ax-at-NVDA ax-bug ax-dev-ready ax-high-priority ax-jsm ax-platform-dc ax-qa ax-qa-prioritised ax-vpat-critical | New: 1.3.2 Accessibility WCAG21 ax-at-NVDA ax-bug ax-critical ax-critical-priority ax-dev-ready ax-high-priority ax-jsm ax-platform-dc ax-qa ax-qa-prioritised ax-vpat-critical |
Labels | Original: 1.3.2 Accessibility WCAG21 ax-at-NVDA ax-bug ax-dev-ready ax-high-priority ax-jsm ax-platform-dc ax-qa-prioritised ax-vpat-critical | New: 1.3.2 Accessibility WCAG21 ax-at-NVDA ax-bug ax-dev-ready ax-high-priority ax-jsm ax-platform-dc ax-qa ax-qa-prioritised ax-vpat-critical |
Resolution | New: Fixed [ 1 ] | |
Status | Original: In Progress [ 3 ] | New: Closed [ 6 ] |
Story Points | New: 1 |
Status | Original: Ready for Development [ 10049 ] | New: In Progress [ 3 ] |
Rank | New: Ranked higher |
Sprint | New: JSM Sprint 1 [ 6985 ] |
Assignee | New: Oleksandr Stoliar [ a955dc6cda19 ] |