Panel - Indicate live regions for dynamically changing content - (2036570576)

[dqateam]

Module:

23a Panel

Violation:

Indicate live regions for dynamically changing content

WCAG Reference:

• 1.3.1 Info and Relationships

Instance ID:

2036570576

Severity:

9

Description:

[Pattern: ARIA live region - Missing for loading indicator]

[Issue]
The loading indicator is not announced for screen reader users. Even though the role=progressbar is provided the loading message is not announced

[Occurrences]
09a Button
09b Split Button
14a Floating Action Button (FAB)
15 Inline Editable
18b Card
20a Loader
23a Panel
25b Scrim

[User Impact]
Screen reader users will be unaware when the page is in a loading state.

[Code Reference]

<calcite-loader class="loading-in" aria-label="Loading" id="1179fac2-76b9-ac8d-9db7-4062b0d421a0" role="progressbar" active="" inline="" scale="m" calcite-hydrated="">
<div class="loader__svgs">
<svg class="loader__svg loader__svg--1" viewBox="0 0 16 16">
(...)
</svg>
</div>
</calcite-loader>

Note:

[Suggestion]
Indicate live regions for dynamically changing content. Live regions can be created by adding a role attribute set to "log", "status", "alert", "progressbar", "marquee", or "timer" as appropriate. Alternatively, custom behavior can be created by using the aria-live, aria-atomic, and aria-relevant attributes. Text injected into this live region element will be announced by screen readers.

Importantly, the element with the ARIA live attributes must be available when the page loads. Otherwise, many screen readers will not detect updates to the element. Additionally, the element must be empty on page load unless an immediate screen reader announcement is desired.

To create such a region:

• Ensure that a visually hidden container <div> or <span> is present when the page loads. - Add aria-live="polite" attribute to this <div> or <span>
• When the page is in a loading state, use JavaScript to inject text into this <div aria-live="polite"> that describes the loading behavior (e.g., "Loading").

[Compliant Code Example]

N/A

Media Type:

Live Regions

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[geospatialem]

Duplicate of #5587