WebAIM - Web Accessibility In Mind

E-mail List Archives

CSS Live Region

for

From: Chase, DJ
Date: Jul 30, 2024 8:25AM

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