Content: Align icon and notice guidance

[SmartMouthWords]

As a user I want guidance to be consistent and clear without contradiction, so I can trust the guidance and be confident in my choices.

Icon guidance may contradict the notice design/implementation which uses icons without labels. Both sets of gudiance need to be analyzed and reconciled.

• [ ] Analysis of icon and notice guidance on icon use with/without labels
• [ ] Update documentation
• [ ] Review of changes @adorayi @SmartMouthWords
• [ ] Translation
• [ ] Bilingual review
• [ ] Hand off for publishing

[SmartMouthWords]

The Notice component will not use labels with the icons. This is based on the design for the current contextual alert. The heading text that the user chooses should be aligned with the icon and potentially replaces the need for the icon label.

Do we need to soften our recommendations for icons? How to handle the inconsistency between our guidance on icons and our application of icons in the Notice component?
Can this be fully addressed in the Notice guidance? Can we use the labels as default text for the headings? Could these icons be considered "universal" in the GC context?

[MatildePerrusclet]

Not using label with icons will create accessibility issues. Icons should be accompanied by alt text and a label (the latter can be omitted when icons are universally understood), therefore I don't think there's any way around this. We can't "soften our recommendations" if we want to comply to the recommended accessibility standard (WCAG2.1 AA or the European standard) as requested by the Standard on Web Accessibility, which all departments are required to comply to. In addition, the current contextual alerts don't seem to have alt text for the icons (see screen capture below).

Sources

WCAG 2.1.A 1.1.1 Non-text Content Level A All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. Source: WCAG 2.1 level A

Understanding SC 1.1: Text Alternatives Success Criterion (SC) Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Source: https://www.w3.org/WAI/WCAG21/Understanding/text-alternatives

An button must have alternate text, otherwise screen reader users will not know the button's purpose. Even if the image contains only text, it still requires alternate text, since a screen reader cannot translate images of words into output. Source: dequeuniversity

Image and code snippet of the Canada.ca contextual alert