Accessibility: alerts are missing headings and an indication that a message is an 'alert'

[KseniaCheinman]

Current alerts used on Canada.ca are often missing headings and are skipped by screen readers when one pulls out headings and links.

The alert governance does not include a requirement to have:

-a heading
-invisible text to explain what type of alert this is

There are also 4 different documents providing guidance on the use of alerts

1. https://design.canada.ca/common-design-patterns/contextual-alerts.html
2. https://design.canada.ca/crisis/alerts.html
3. https://blog.canada.ca/2020/07/15/alert-fatigue.html
4. https://docs.google.com/presentation/d/1kpDFOVUAW1YdWMGZdmZaG1ksRXOCS9aHb1mnrvIHcrE/edit#slide=id.g71f30593e9_0_10

I've combined the governance from the three and included additional governance to address accessibility issues here:

https://docs.google.com/document/d/1JkjLhLWrT989QcrHiXJDaseBEUB9JB2NIse8ztqx6vc/edit?usp=sharing

We should encourage different departments to test their alerts and share research evidence to improve this governance.

[KseniaCheinman]

This issue should be folded in with a visual presentation of how the component should be used (How to implement) #107.

[KseniaCheinman]

Is there an opportunity to create another segment in the Design System that lists the component Anatomy, similar to the Carbon Design System https://www.carbondesignsystem.com/components/notification/usage/#main-elements.

This is where the elements of the component can be shown. It's a quick way to show what the essential pieces are. In the case of alerts, a heading will be essential.

[quidampepin]

Hi Ksenia - The new model we were working towards had something very similar: This is not live yet, but this is the model we were wanting to test for all components: https://design.canada.ca/components/alerts.html

[KseniaCheinman]

That's great, thanks for sharing David!

Also, this discussion was just shared with me alphagov/govuk-design-system-backlog#2 (comment) it highlights the importance of 'verbal indication' for each colour of banners due to the difficulty in differentiating between the types of banners.

Here the suggestion is to use "role" to describe the type of message. Status for green, Warning for red, for example.

Also, there might be an issue about placing banners at the top of the page, even with headings, quote:

"Clarification: When a screen reader user uses the list of headings they would not miss it, the banner heading will be in that list. But it's likely they would miss it if they skip to the h1 first as a means to skip to the main content and then start reading the content from there (or skip to the next heading etc)."