Add role="alert" to New Alert Designs

[mgifford]

Coming from wet-boew/wet-boew#8886

I just want to know if this was considered, especially for the Danger alert below:

<section role="alert" class="provisional alert alert-danger">
	<h3>Danger alert</h3>
	<p>Optional alert details.</p>
</section>

I do not know if this is appropriate or if it would much of a benefit to screen reader users.

[mgifford]

Worth while looking at what the U.S. Web Design System (USWDS) https://designsystem.digital.gov/components/alert/

Which does recommend :

Use the proper ARIA role. If the message is not interactive, use the ARIA role="alert" to inform assistive technologies of a time-sensitive and important message. If the message is interactive, use the use the ARIA role="alertdialog" instead.

Mind you GDS doesn't seem to recommend it
https://design-system.service.gov.uk/components/warning-text/

Frankly their HTML doesn't have much of any semantic value.

[mgifford]

Some more discussion here alphagov/govuk-design-system-backlog#71

[Christopher-O]

@mgifford I tried using NVDA on different examples of pages with role="alert" as a static function. And the browser support is very inconsistant to me. Sometimes it will read the alert as the first thing before navigating anywhere (which is okay if it's the first thing on the page, but what if there are multiple ones throughout the page?). The other times, it does not provide any extra context to the screen reader (does not tell me it's an alert). I also used JAWS inspect and it did not recognize the text in the alert as anything more than text. I think for consistant experience for screen readers across multiple platforms, the governance should include adding invisible text to the alert to say "warning alert" or "alert - warning". something to that effect. The UK gov site you linked to has that very thing.

If it's really detrimental and needs to be consistant throughout the agency, I don't know if there might be an appetite to use scripting to auto inject the phrase into the alert, similar to what we do with some of the other dynamic designs like expand/collapse.

[mgifford]

In looking at this more deeply I think that the role="alert" only occurs in an error message which is provided in response to some form of input (ie a form) where an active announcement would be expected.

As for support for ARIA, it isn't as good as any of us would like, but here's a list of supported browsers from 2012:
https://developer.paciellogroup.com/blog/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/

Also worth seeing:
http://www.pauljadam.com/demos/aria-alert-validation.html
http://pauljadam.com/demos/aria-alert-assertive-validation.html

It could also be that it isn't set up correctly https://stackoverflow.com/questions/55129929/ie-role-alert-is-not-read-on-page-load

[cfarquharson]

The Australian Gov says this for their alerts: https://designsystem.gov.au/components/page-alerts/rationale/
"We removed the ARIA alert role ( role="alert" ) from the Page Alert component as it was being used incorrectly. The ARIA role is now optional and we recommend it being used in certain situations.

Using role="alert" will immediately interrupt assistive technology to inform users of the alert and for this reason should be used sparingly.

We recommend only using the role="alert" when there is important time-sensitive information that would be detrimental for a user to miss."

[mgifford]

Excellent, user testing. Thanks Chad. Plus links back to documentation that indicates when it is most useful.

The alert role is most useful for information that requires the user's immediate attention, for example:

An invalid value was entered into a form field
The user's login session is about to expire
The connection to the server was lost, local changes will not be saved

Probably all of which should be following the styling from the New Alert Designs.

It might be worth adding something to the documentation pointing to the Australian example, but it seems clear that it role="alert" shouldn't be added to the Danger styling.