Internal issue 2981 - WCAG issue with Alerts

h3. Summary

The Title in Alerts does not appear to conform to WCAG 2.1 SC 1.3.1 (Info and Relationships). The title is visually bold, but this is not represented in the HTML code.

h3. Description

When performing accessibility testing using Accessibility insights for web, the alerts failed for the following reason:

“Words and phrases that are visually emphasized must be contained within semantically correct containers-[WCAG 1.3.1|https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships]”

The title of the alert is in a paragraph tag, not a heading or strong tag. To make this conform to WCAG 1.3.1, it appears that the title of the alert should be marked in HTML as either a heading or placed in a strong tag to indicate the emphasis for users with visual impairments.

h3. Use Value

Making this change will ensure that this element is WCAG compliant and make the alerts more accessible for all users.

h3. Acceptance Criteria

Updating title in alerts to be within the correct container

h3. Guidance

[https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html|https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html]

[https://stackblitz.com/run?file=src%2Fapp.tsx&hideExplorer=1|https://stackblitz.com/run?file=src%2Fapp.tsx&hideExplorer=1]

Start by locating the Alerts component and inspect the HTML markup used for its title. Use Accessibility Insights for web to verify the title is represented by a semantically correct container, then confirm the alert meets WCAG 2.1 SC 1.3.1 and the stated acceptance criterion.

Written by the indexing model from the issue text.