WebAIM - Web Accessibility In Mind

E-mail List Archives

role="alert" and display:none

for

From: Maia Miller
Date: Oct 5, 2022 6:37PM

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)

AAP WAS small circular badge and horizontal name logo for International
Association of Accessibility Professionals (IAAP) Web Accessibility
Specialist (WAS) credential. To the left is a dark blue circle with
three lines of centered white text that read: IAAP Certified WAS. There
is a smaller light blue circle that surrounds the dark blue inner circle
that designates the WAS credential color scheme. To the right, two lines
of dark blue text. Top text reads Web Accessibility Specialist, second
line reads International Association of Accessibility Professionals.
--
Catalyst IT - Expert Open Source Solutions
www.catalyst.net.nz <http://www.catalyst.net.nz>;

Catalyst Logo

Catalyst.Net Ltd - a Catalyst IT group company
CONFIDENTIALITY NOTICE: This email is intended for the named recipients
only. It may contain privileged, confidential or copyright information.
If you are not the named recipient, any use, reliance upon, disclosure
or copying of this email or its attachments is unauthorised. If you have
received this email in error, please reply via email or call +64 4 499 2267.