WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: CSS Live Region

for

From: Dean.Vasile
Date: Jul 30, 2024 8:46AM

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