WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: role="alert" and display:none

for

From: Peter Weil
Date: Oct 5, 2022 7:50PM

HI Maia,

If you go to the next paragraph, the MDN docs also say "While triggering an alert via CSS alone is possible, it is better to rely on JavaScript because it has more browser/screen reader support”.

They don't provide any specifics, and I don't know which screen readers, if any, support triggering alerts via CSS alone. but I've always followed the same advice you have: the container must be in the DOM on page load.

Peter

> On Oct 5, 2022, at 7:37 PM, Maia Miller < <EMAIL REMOVED> > wrote:
>
> Hi folks,
>
> I have a client working on applying live regions onto their error
> messages as per 4.1.3 Status Messages
>
> We've advised that the container with the live regions (for example,
> <div role="alert">) must be in the DOM on load. The error message can
> then be updated with validation.
>
> According to MDN docs*, we can hide this <div> using display:none, then
> changing the display to block will read out the alert. My question is:
> how is this happening? My understanding is that screen readers ignore
> display:none as it essentially removes the element from the document.
> But a live region that appears on load with display:none still gets
> recognized by AT?
>
> Thanks for your help!
>
> * MDN docs reference:
> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
>
> --
> *Maia Miller*, WAS (Web Accessibility Specialist)
> Accessibility Manager
> (she/her)

--
Peter Weil
Web Developer
University Marketing
University of Wisconsin–Madison
608-220-3089