WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: role="alert" and display:none

for

From: Patrick H. Lauke
Date: Oct 6, 2022 3:08AM

On 06/10/2022 01:37, Maia Miller wrote:

> 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?

That MDN page is wrong/inaccurate. While in some instances flipping the
display:none/display:block value on the container with role="alert"
*may* work, it's inconsistent (and seems to rely mostly on internal
timings of the browser).

The MDN page about live regions in general is more accurate in this
regard, mentioning that the container itself that has the role must be
present/seen by the browser/AT first, and THEN populated.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

So, the most reliable approach is: keep an empty <div
role="alert"></div> present, and inside THAT you can flip the display
property of a child container. THAT will then work consistently.

<div role="alert">
<span style="display:none">Error message</span>
</div>

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke