E-mail List Archives
Thread: CSS Live Region
Number of posts in this thread: 8 (In chronological order)
From: Chase, DJ
Date: Tue, Jul 30 2024 8:25AM
Subject: CSS Live Region
No previous message | Next message →
Hi All,
If an interactive element's content changes with CSS based on the state of that element, is it considered a live region? And if so, what would be the best politeness setting for it?
I was thinking aria-live="off" aria-atomic="true" would be best, but Iâd love some input on this. The code is below if that helps.
HTML:
<details>
<summary <!-- aria goes here -->><span id="play">Play</span><span id="stop">Stop</span> game</summary>
<!-- the game -->
</details>
CSS:
details summary {
cursor: pointer;
}
/* closed — game stopped */
details play {
display: inline;
}
details stop {
display: none;
}
/* open — game playing */
details[open] stop {
display: inline;
}
details[open] play {
display: none;
}
Cheers,
--
DJ Chase
From: Dean.Vasile
Date: Tue, Jul 30 2024 8:46AM
Subject: Re: CSS Live Region
← Previous message | Next message →
My consulted Gemini.
And the following is the result:
Not a live region. Use aria-pressed on the summary element to indicate its state (true/false). This Not a live region. Use aria-pressed on the summary element to indicate its state (true/false). This change will be announced automatically by screen readers.
change will be announced automatically by screen readers.
Dean Vasile
617-799-1162
> On Jul 30, 2024, at 10:26 AM, Chase, DJ < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi All,
>
> If an interactive element's content changes with CSS based on the state of that element, is it considered a live region? And if so, what would be the best politeness setting for it?
>
> I was thinking aria-live="off" aria-atomic="true" would be best, but Iâd love some input on this. The code is below if that helps.
>
> HTML:
>
> <details>
>
> <summary <!-- aria goes here -->><span id="play">Play</span><span id="stop">Stop</span> game</summary>
>
> <!-- the game -->
>
> </details>
>
> CSS:
>
> details summary {
>
> cursor: pointer;
>
> }
>
>
>
> /* closed â game stopped */
>
>
>
> details play {
>
> display: inline;
>
> }
>
>
>
> details stop {
>
> display: none;
>
> }
>
>
>
> /* open â game playing */
>
>
>
> details[open] stop {
>
> display: inline;
>
> }
>
>
>
> details[open] play {
>
> display: none;
>
> }
>
> Cheers,
> --
> DJ Chase
From: Patrick H. Lauke
Date: Tue, Jul 30 2024 9:55AM
Subject: Re: CSS Live Region
← Previous message | Next message →
On 30/07/2024 15:46, = EMAIL ADDRESS REMOVED = wrote:
> My consulted Gemini.
A small "can we stop this kind of crap answer? If you don't know the
answer, asking some spicy autocomplete instead won't help capture the
actual nuance required". This isn't "let me AI this for you" as a
service here...
And indeed, while the short answer here is that no, you wouldn't
normally call it a live region, the fact that your currently focused
element is dynamically changing will have repercussions for whether or
not assistive technologies will announce the change. Just setting
`aria-pressed` here is not necessarily the answer either, as you then
get into weird double-negative-style announcements as well. See Have a
read through https://sarahmhigley.com/writing/playing-with-state/
And yes, one "trick" to make the dynamic change of the label for the
currently focused control announce consistently sometimes *does* involve
making the control itself a tiny live region. See
https://adrianroselli.com/2020/12/be-careful-with-dynamic-accessible-names.html
P
--
Patrick H. Lauke
* https://www.splintered.co.uk/
* https://github.com/patrickhlauke
* https://flickr.com/photos/redux/
* https://mastodon.social/@patrick_h_lauke
From: Christine Hogenkamp
Date: Tue, Jul 30 2024 2:20PM
Subject: Re: CSS Live Region
← Previous message | Next message →
I agree with Patrick, I don't think we are serving the members of this
mailing list by normalizing asking AI apps questions about accessibility,
since they are not search engines nor encyclopedia type resources but just
generate text based on statistical likelihood of the next word in the
sentence. A lot of bad advice or incorrect info can be given by accident
just by missing a word like "not" etc. especially as answers to questions
posed by people who don't yet have the expertise to evaluate the answer for
accuracy.
*x*
*Christine Hogenkamp (She, Her)*
Front-end Developer
Context Creative â a Mod Op company
416.972.1439 | contextcreative.com
On Tue, Jul 30, 2024 at 2:00 PM < = EMAIL ADDRESS REMOVED = >
wrote:
>
>
> ---------- Forwarded message ----------
> From: "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = >
> To: = EMAIL ADDRESS REMOVED =
> Cc:
> Bcc:
> Date: Tue, 30 Jul 2024 16:55:10 +0100
> Subject: Re: [WebAIM] CSS Live Region
>
>
> On 30/07/2024 15:46, = EMAIL ADDRESS REMOVED = wrote:
> > My consulted Gemini.
>
> A small "can we stop this kind of crap answer? If you don't know the
> answer, asking some spicy autocomplete instead won't help capture the
> actual nuance required". This isn't "let me AI this for you" as a
> service here...
>
> And indeed, while the short answer here is that no, you wouldn't
> normally call it a live region, the fact that your currently focused
> element is dynamically changing will have repercussions for whether or
> not assistive technologies will announce the change. Just setting
> `aria-pressed` here is not necessarily the answer either, as you then
> get into weird double-negative-style announcements as well. See Have a
> read through https://sarahmhigley.com/writing/playing-with-state/
>
> And yes, one "trick" to make the dynamic change of the label for the
> currently focused control announce consistently sometimes *does* involve
> making the control itself a tiny live region. See
>
> https://adrianroselli.com/2020/12/be-careful-with-dynamic-accessible-names.html
>
> P
> --
> Patrick H. Lauke
>
> * https://www.splintered.co.uk/
> * https://github.com/patrickhlauke
> * https://flickr.com/photos/redux/
> * https://mastodon.social/@patrick_h_lauke
>
>
From: Dean.Vasile
Date: Tue, Jul 30 2024 3:16PM
Subject: Re: CSS Live Region
← Previous message | Next message →
Christine,
I hear both you and Patrick and I appreciate that and I can and will stop doing it.
However, neither of you have offered a solution to this list to the issue that has been posed.
So I accept your constructive criticism. However, what is the answer to the issue?
Dean Vasile
617-799-1162
> On Jul 30, 2024, at 4:20 PM, Christine Hogenkamp < = EMAIL ADDRESS REMOVED = > wrote:
>
> I agree with Patrick, I don't think we are serving the members of this
> mailing list by normalizing asking AI apps questions about accessibility,
> since they are not search engines nor encyclopedia type resources but just
> generate text based on statistical likelihood of the next word in the
> sentence. A lot of bad advice or incorrect info can be given by accident
> just by missing a word like "not" etc. especially as answers to questions
> posed by people who don't yet have the expertise to evaluate the answer for
> accuracy.
>
> *x*
> *Christine Hogenkamp (She, Her)*
> Front-end Developer
> Context Creative â a Mod Op company
> 416.972.1439 | contextcreative.com
>
>
>> On Tue, Jul 30, 2024 at 2:00 PM < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = >
>> To: = EMAIL ADDRESS REMOVED =
>> Cc:
>> Bcc:
>> Date: Tue, 30 Jul 2024 16:55:10 +0100
>> Subject: Re: [WebAIM] CSS Live Region
>>
>>
>>> On 30/07/2024 15:46, = EMAIL ADDRESS REMOVED = wrote:
>>> My consulted Gemini.
>>
>> A small "can we stop this kind of crap answer? If you don't know the
>> answer, asking some spicy autocomplete instead won't help capture the
>> actual nuance required". This isn't "let me AI this for you" as a
>> service here...
>>
>> And indeed, while the short answer here is that no, you wouldn't
>> normally call it a live region, the fact that your currently focused
>> element is dynamically changing will have repercussions for whether or
>> not assistive technologies will announce the change. Just setting
>> `aria-pressed` here is not necessarily the answer either, as you then
>> get into weird double-negative-style announcements as well. See Have a
>> read through https://sarahmhigley.com/writing/playing-with-state/
>>
>> And yes, one "trick" to make the dynamic change of the label for the
>> currently focused control announce consistently sometimes *does* involve
>> making the control itself a tiny live region. See
>>
>> https://adrianroselli.com/2020/12/be-careful-with-dynamic-accessible-names.html
>>
>> P
>> --
>> Patrick H. Lauke
>>
>> * https://www.splintered.co.uk/
>> * https://github.com/patrickhlauke
>> * https://flickr.com/photos/redux/
>> * https://mastodon.social/@patrick_h_lauke
>>
>>
> > > >
From: Patrick H. Lauke
Date: Tue, Jul 30 2024 3:32PM
Subject: Re: CSS Live Region
← Previous message | Next message →
On 30/07/2024 22:16, = EMAIL ADDRESS REMOVED = wrote:
> Christine,
> I hear both you and Patrick and I appreciate that and I can and will stop doing it.
> However, neither of you have offered a solution to this list to the issue that has been posed.
> So I accept your constructive criticism. However, what is the answer to the issue?
If you go back to my reply, there's explanation plus two links for the
OP's consideration - which will guide them to whichever approach they
deem most appropriate.
>>> Just setting
>>> `aria-pressed` here is not necessarily the answer either, as you then
>>> get into weird double-negative-style announcements as well. See Have a
>>> read through https://sarahmhigley.com/writing/playing-with-state/
>>>
>>> And yes, one "trick" to make the dynamic change of the label for the
>>> currently focused control announce consistently sometimes *does* involve
>>> making the control itself a tiny live region. See
>>>
>>> https://adrianroselli.com/2020/12/be-careful-with-dynamic-accessible-names.html
--
Patrick H. Lauke
* https://www.splintered.co.uk/
* https://github.com/patrickhlauke
* https://flickr.com/photos/redux/
* https://mastodon.social/@patrick_h_lauke
From: Dean.Vasile
Date: Tue, Jul 30 2024 3:35PM
Subject: Re: CSS Live Region
← Previous message | Next message →
Thank you for that.
Because this will also help me learn I appreciate it
Dean Vasile
617-799-1162
> On Jul 30, 2024, at 5:32 PM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
>
> On 30/07/2024 22:16, = EMAIL ADDRESS REMOVED = wrote:
>> Christine,
>> I hear both you and Patrick and I appreciate that and I can and will stop doing it.
>> However, neither of you have offered a solution to this list to the issue that has been posed.
>> So I accept your constructive criticism. However, what is the answer to the issue?
>
> If you go back to my reply, there's explanation plus two links for the OP's consideration - which will guide them to whichever approach they deem most appropriate.
>
>>>> Just setting
>>>> `aria-pressed` here is not necessarily the answer either, as you then
>>>> get into weird double-negative-style announcements as well. See Have a
>>>> read through https://sarahmhigley.com/writing/playing-with-state/
>>>>
>>>> And yes, one "trick" to make the dynamic change of the label for the
>>>> currently focused control announce consistently sometimes *does* involve
>>>> making the control itself a tiny live region. See
>>>>
>>>> https://adrianroselli.com/2020/12/be-careful-with-dynamic-accessible-names.html
>
> --
> Patrick H. Lauke
>
> * https://www.splintered.co.uk/
> * https://github.com/patrickhlauke
> * https://flickr.com/photos/redux/
> * https://mastodon.social/@patrick_h_lauke
>
> > > >
From: Christine Hogenkamp
Date: Wed, Jul 31 2024 12:27PM
Subject: Re: CSS Live Region
← Previous message | No next message
Hi Dean,
I am confused, Patrick answered the question which is included in the email
that I replied to as part of my reply and he included two links as
references for more info, perhaps you missed it? Sarah Higley and Adrian
Roselli are powerhouse accessibility experts, I wouldn't dream of trying to
top either of them.
*x*
*Christine Hogenkamp (She, Her)*
Front-end Developer
Context Creative â a Mod Op company
416.972.1439 | contextcreative.com
On Wed, Jul 31, 2024 at 2:00 PM < = EMAIL ADDRESS REMOVED = >
wrote:
>
> From: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Tue, 30 Jul 2024 21:16:51 +0000
> Subject: Re: [WebAIM] CSS Live Region
> Christine,
> I hear both you and Patrick and I appreciate that and I can and will stop
> doing it.
> However, neither of you have offered a solution to this list to the issue
> that has been posed.
> So I accept your constructive criticism. However, what is the answer to
> the issue?
> Dean Vasile
>
>
> 617-799-1162
>
> > On Jul 30, 2024, at 4:20 PM, Christine Hogenkamp <
> = EMAIL ADDRESS REMOVED = > wrote:
> >
> > I agree with Patrick, I don't think we are serving the members of this
> > mailing list by normalizing asking AI apps questions about accessibility,
> > since they are not search engines nor encyclopedia type resources but
> just
> > generate text based on statistical likelihood of the next word in the
> > sentence. A lot of bad advice or incorrect info can be given by accident
> > just by missing a word like "not" etc. especially as answers to questions
> > posed by people who don't yet have the expertise to evaluate the answer
> for
> > accuracy.
> >
> > *x*
> > *Christine Hogenkamp (She, Her)*
> > Front-end Developer
> > Context Creative â a Mod Op company
> > 416.972.1439 | contextcreative.com
> >
> >
> >> On Tue, Jul 30, 2024 at 2:00 PM < = EMAIL ADDRESS REMOVED = >
> >> wrote:
> >>
> >>
> >>
> >> ---------- Forwarded message ----------
> >> From: "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = >
> >> To: = EMAIL ADDRESS REMOVED =
> >> Cc:
> >> Bcc:
> >> Date: Tue, 30 Jul 2024 16:55:10 +0100
> >> Subject: Re: [WebAIM] CSS Live Region
> >>
> >>
> >>> On 30/07/2024 15:46, = EMAIL ADDRESS REMOVED = wrote:
> >>> My consulted Gemini.
> >>
> >> A small "can we stop this kind of crap answer? If you don't know the
> >> answer, asking some spicy autocomplete instead won't help capture the
> >> actual nuance required". This isn't "let me AI this for you" as a
> >> service here...
> >>
> >> And indeed, while the short answer here is that no, you wouldn't
> >> normally call it a live region, the fact that your currently focused
> >> element is dynamically changing will have repercussions for whether or
> >> not assistive technologies will announce the change. Just setting
> >> `aria-pressed` here is not necessarily the answer either, as you then
> >> get into weird double-negative-style announcements as well. See Have a
> >> read through https://sarahmhigley.com/writing/playing-with-state/
> >>
> >> And yes, one "trick" to make the dynamic change of the label for the
> >> currently focused control announce consistently sometimes *does* involve
> >> making the control itself a tiny live region. See
> >>
> >>
> https://adrianroselli.com/2020/12/be-careful-with-dynamic-accessible-names.html
> >>
> >> P
> >> --
> >> Patrick H. Lauke
> >>
> >> * https://www.splintered.co.uk/
> >> * https://github.com/patrickhlauke
> >> * https://flickr.com/photos/redux/
> >> * https://mastodon.social/@patrick_h_lauke
> >>
> >>
> > > > > > > > >
>
>
> ---------- Forwarded message ----------
> From: "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = >
> To: = EMAIL ADDRESS REMOVED =
> Cc:
> Bcc:
> Date: Tue, 30 Jul 2024 22:32:16 +0100
> Subject: Re: [WebAIM] CSS Live Region
> On 30/07/2024 22:16, = EMAIL ADDRESS REMOVED = wrote:
> > Christine,
> > I hear both you and Patrick and I appreciate that and I can and will
> stop doing it.
> > However, neither of you have offered a solution to this list to the
> issue that has been posed.
> > So I accept your constructive criticism. However, what is the answer to
> the issue?
>
> If you go back to my reply, there's explanation plus two links for the
> OP's consideration - which will guide them to whichever approach they
> deem most appropriate.
>
> >>> Just setting
> >>> `aria-pressed` here is not necessarily the answer either, as you then
> >>> get into weird double-negative-style announcements as well. See Have a
> >>> read through https://sarahmhigley.com/writing/playing-with-state/
> >>>
> >>> And yes, one "trick" to make the dynamic change of the label for the
> >>> currently focused control announce consistently sometimes *does*
> involve
> >>> making the control itself a tiny live region. See
> >>>
> >>>
> https://adrianroselli.com/2020/12/be-careful-with-dynamic-accessible-names.html
>
> --
> Patrick H. Lauke
>
> * https://www.splintered.co.uk/
> * https://github.com/patrickhlauke
> * https://flickr.com/photos/redux/
> * https://mastodon.social/@patrick_h_lauke
>
>
>
>
>
> ---------- Forwarded message ----------
> From: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Tue, 30 Jul 2024 21:35:03 +0000
> Subject: Re: [WebAIM] CSS Live Region
> Thank you for that.
> Because this will also help me learn I appreciate it
> Dean Vasile
>
>
> 617-799-1162
>
> > On Jul 30, 2024, at 5:32 PM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
> wrote:
> >
> > On 30/07/2024 22:16, = EMAIL ADDRESS REMOVED = wrote:
> >> Christine,
> >> I hear both you and Patrick and I appreciate that and I can and will
> stop doing it.
> >> However, neither of you have offered a solution to this list to the
> issue that has been posed.
> >> So I accept your constructive criticism. However, what is the answer to
> the issue?
> >
> > If you go back to my reply, there's explanation plus two links for the
> OP's consideration - which will guide them to whichever approach they deem
> most appropriate.
> >
> >>>> Just setting
> >>>> `aria-pressed` here is not necessarily the answer either, as you then
> >>>> get into weird double-negative-style announcements as well. See Have a
> >>>> read through https://sarahmhigley.com/writing/playing-with-state/
> >>>>
> >>>> And yes, one "trick" to make the dynamic change of the label for the
> >>>> currently focused control announce consistently sometimes *does*
> involve
> >>>> making the control itself a tiny live region. See
> >>>>
> >>>>
> https://adrianroselli.com/2020/12/be-careful-with-dynamic-accessible-names.html
> >
> > --
> > Patrick H. Lauke
> >
> > * https://www.splintered.co.uk/
> > * https://github.com/patrickhlauke
> > * https://flickr.com/photos/redux/
> > * https://mastodon.social/@patrick_h_lauke
> >
> > > > > > > > >
>
>
> ---------- Forwarded message ----------
> From: Jon Metz < = EMAIL ADDRESS REMOVED = >
> To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Wed, 31 Jul 2024 17:08:13 +0000
> Subject: [WebAIM] PDF Reading order question
> Howdy,
>
> I have a reading order question for y'all. It's not life-or-death, but I'm
> having a disagreement with an accessibility vendor (with accessibility
> experts I know and respect, FWIW). As I have ASD, it's difficult for me to
> know if I'm wrong or overthinking my opinion on how to handle this
> situation.
>
> Physically, the PDF is like this:
>
> Page 1
> H1
> H2
> Content Label
> Content
>
> H2
> Content Label
> Content
>
> Company Logo on the left, social links on the right, company website under
> the social links
>
> Page 2:
> H2
> Content Label
> Content
>
> H2
> Content Label
> Content
>
> Disclaimer
> Copyright info
>
> My question is, how would you tag the Content Labels, and would you tag
> the document to represent the physical presentation of content; or would
> you structure the document another way? Does doing one way or the other
> break any accessibility rules (for WCAG 2x or PDF/UA-1) you can think of?
>
> I look forward to hearing your opinion!
>
> Thanks,
> Jon Metz
>
> (Thoughts on this list are mine alone and do not necessarily represent the
> views of Delta Dental of California or its affiliates)
>
> The information contained in this email message and any attachments is
> confidential and intended only for the addressee(s). If you are not an
> addressee, you may not copy or disclose the information, or act upon it,
> and you should delete it entirely from your email system. Please notify the
> sender that you received this email in error.
>
> > > > >