E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Maia Miller
Date: Wed, Oct 05 2022 6:37PM
Subject: role="alert" and display:none
No previous message | Next message →

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.

From: Peter Weil
Date: Wed, Oct 05 2022 7:50PM
Subject: Re: role="alert" and display:none
← Previous message | Next message →

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

From: Patrick H. Lauke
Date: Thu, Oct 06 2022 3:08AM
Subject: Re: role="alert" and display:none
← Previous message | Next message →

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

From: Patrick H. Lauke
Date: Sat, Oct 08 2022 9:41AM
Subject: Re: role="alert" and display:none
← Previous message | No next message

On 06/10/2022 10:08, Patrick H. Lauke wrote:
> On 06/10/2022 01:37, Maia Miller wrote:
[...]
>> 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).

Closing the loop, I've just submitted an almost complete rewrite of the
incorrect MDN page about role="alert" here
https://github.com/mdn/content/pull/21395

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