Updates

en/articles/aria-live-regions/index.html

@@ -91,4 +91,4 @@
 <span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clock-mins<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clock-secs<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></code></pre><p>The <code>timer</code> role has no announcement priority, so it's set to <code>aria-live="off"</code> by default. Therefore, it's recommended to additionally use <code>aria-live="polite"</code> and <code>aria-atomic="true"</code> with it. If you want a screen reader to announce changes after a certain time interval, you can do it with JavaScript. Just switch <code>aria-live="off"</code> to <code>aria-live="polite"</code> at the interval what you need, e.g., every 60 minutes.</p><h2>Wrapping up</h2><p>If you have a part of your page whose content changes, you need to make it a live region. Assistive technologies will then be able to keep users informed about all the changes. You can make such a part a live region by using ARIA roles such as <code>status</code>, <code>alert</code>, <code>log</code>, <code>marquee</code>, and <code>timer</code>. Another way is using the <code>aria-live</code> attribute.</p><p>The use cases for ARIA live regions roles:</p><ul><li><code>status</code> for less important notifications: Autosave messages, form validation feedback</li><li><code>alert</code> for important and time-sensitive information: Server errors, lost internet connection</li><li><code>log</code> for situations where the sequence of information updates is important: Message history, list of system errors</li><li><code>marquee</code> for frequently updating information: Tickers, currency rates, forecast widgets</li><li><code>timer</code> for a part of a page where we count down or up: Stopwatch, timers, pomodoro timer</li></ul><p>The <code>aria-live</code> ARIA attribute is responsible for how urgently changes need to be announced. In most cases, there's no urgency to announce changes, so <code>aria-live="polite"</code> comes in handy. Sometimes, when it's an important message, such as a critical error, you can use <code>aria-live="assertive"</code>.</p><p>Other ARIA live regions attributes are optional and provide assistive technologies with more details about the amount of changes, their type, and so on. Here is the list of them:</p><ul><li><code>aria-atomic</code> affects whether a screen reader announces the entire region or only that part where changes occured</li><li><code>aria-busy</code> indicates whether the element's content is currently being updated or not.</li><li><code>aria-relevant</code> defines the type of content changes to be announced</li></ul><p>Finally, you can use native HTML elements such as <code>&lt;output&gt;</code> and <code>&lt;progress&gt;</code>, which have implicit live region behavior.</p><h2>Further reading</h2><ul><li><a href="https://www.w3.org/TR/wai-aria-1.3/" rel="noopener">WAI-ARIA 1.3</a></li><li>″<a href="https://medium.com/@rishabhsrao/aria-live-regions-6cc96e1a8b72/" rel="noopener">ARIA Live Regions</a>″ by Rishabh Rao</li><li>″<a href="https://hidde.blog/how-to-make-inline-error-messages-accessible/" rel="noopener">How to make inline error messages accessible</a>″ by Hidde de Vries.</li></ul></div><section aria-labelledby="heading"><h2 id="heading">Other articles</h2><ul class="cards cards--in-article"><li class="cards__item cards__item--compact"><a href="/en/articles/how-to-protect-users-with-epilepsy-and-vd/" class="cards__item-link">Thinking about users with seizures and vestibular conditions</a> <span class="cards__item-details"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" class="cards__item-details__ico" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg> Previous</span></li><li class="cards__item cards__item--compact"><a href="/en/articles/css-media-features-for-a11y/" class="cards__item-link">CSS media feature to improve accessibility</a> <span class="cards__item-details">Next <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" class="cards__item-details__ico" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></li></ul></section></main></div><footer><div class="footer wrapper"><div class="footer__column"><span aria-hidden="true">ʢ·͡ᴥ·ʡ∩๐า╭∩าﾉ\</span> <small>Tatiana Fokina, 2021–2024</small></div><div class="footer__column"><small>Build on <a href="https://www.11ty.dev/">11ty</a>, icons by <a href="https://lucide.dev">Lucide</a> </small><small>Find an issue? Let me know on <a href="https://github.com/TatianaFokina/a11y-blog">GitHub</a></small></div></div></footer><script>setTimeout(function(){var e,t,n,a;e=window,a=document,t="script",e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=+new Date,n=a.createElement(t),a=a.getElementsByTagName(t)[0],n.async=1,n.src="https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js",a.parentNode.insertBefore(n,a),ym(83045434,"init",{clickmap:!1,trackLinks:!1,accurateTrackBounce:!0})},2e3)</script><script defer="defer" data-domain="a11y-blog.dev" src="https://analytics.vasiliy-dudin.com/js/script.js"></script></body></html>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></code></pre><p>The <code>timer</code> role has no announcement priority, so it's set to <code>aria-live="off"</code> by default. Therefore, it's recommended to additionally use <code>aria-live="polite"</code> and <code>aria-atomic="true"</code> with it. If you want a screen reader to announce changes after a certain time interval, you can do it with JavaScript. Just switch <code>aria-live="off"</code> to <code>aria-live="polite"</code> at the interval what you need, e.g., every 60 minutes.</p><h2>Wrapping up</h2><p>If you have a part of your page whose content changes, you need to make it a live region. Assistive technologies will then be able to keep users informed about all the changes. You can make such a part a live region by using ARIA roles such as <code>status</code>, <code>alert</code>, <code>log</code>, <code>marquee</code>, and <code>timer</code>. Another way is using the <code>aria-live</code> attribute.</p><p>The use cases for ARIA live regions roles:</p><ul><li><code>status</code> for less important notifications: Autosave messages, form validation feedback</li><li><code>alert</code> for important and time-sensitive information: Server errors, lost internet connection</li><li><code>log</code> for situations where the sequence of information updates is important: Message history, list of system errors</li><li><code>marquee</code> for frequently updating information: Tickers, currency rates, forecast widgets</li><li><code>timer</code> for a part of a page where we count down or up: Stopwatch, timers, pomodoro timer</li></ul><p>The <code>aria-live</code> ARIA attribute is responsible for how urgently changes need to be announced. In most cases, there's no urgency to announce changes, so <code>aria-live="polite"</code> comes in handy. Sometimes, when it's an important message, such as a critical error, you can use <code>aria-live="assertive"</code>.</p><p>Other ARIA live regions attributes are optional and provide assistive technologies with more details about the amount of changes, their type, and so on. Here is the list of them:</p><ul><li><code>aria-atomic</code> affects whether a screen reader announces the entire region or only that part where changes occured</li><li><code>aria-busy</code> indicates whether the element's content is currently being updated or not.</li><li><code>aria-relevant</code> defines the type of content changes to be announced</li></ul><p>Finally, you can use native HTML elements such as <code>&lt;output&gt;</code> and <code>&lt;progress&gt;</code>, which have implicit live region behavior.</p><h2>Further reading</h2><ul><li><a href="https://www.w3.org/TR/wai-aria-1.3/" rel="noopener">WAI-ARIA 1.3</a></li><li>″<a href="https://medium.com/@rishabhsrao/aria-live-regions-6cc96e1a8b72/" rel="noopener">ARIA Live Regions</a>″ by Rishabh Rao</li><li>″<a href="https://hidde.blog/how-to-make-inline-error-messages-accessible/" rel="noopener">How to make inline error messages accessible</a>″ by Hidde de Vries.</li></ul></div><section aria-labelledby="heading"><h2 id="heading">Other articles</h2><ul class="cards cards--in-article"><li class="cards__item cards__item--compact"><a href="/en/articles/how-to-protect-users-with-epilepsy-and-vd/" class="cards__item-link">Thinking about users with seizures and vestibular conditions</a> <span class="cards__item-details"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" class="cards__item-details__ico" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg> Previous</span></li><li class="cards__item cards__item--compact"><a href="/en/articles/css-media-features-for-a11y/" class="cards__item-link">CSS media features to improve accessibility</a> <span class="cards__item-details">Next <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" class="cards__item-details__ico" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></li></ul></section></main></div><footer><div class="footer wrapper"><div class="footer__column"><span aria-hidden="true">ʢ·͡ᴥ·ʡ∩๐า╭∩าﾉ\</span> <small>Tatiana Fokina, 2021–2024</small></div><div class="footer__column"><small>Build on <a href="https://www.11ty.dev/">11ty</a>, icons by <a href="https://lucide.dev">Lucide</a> </small><small>Find an issue? Let me know on <a href="https://github.com/TatianaFokina/a11y-blog">GitHub</a></small></div></div></footer><script>setTimeout(function(){var e,t,n,a;e=window,a=document,t="script",e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=+new Date,n=a.createElement(t),a=a.getElementsByTagName(t)[0],n.async=1,n.src="https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js",a.parentNode.insertBefore(n,a),ym(83045434,"init",{clickmap:!1,trackLinks:!1,accurateTrackBounce:!0})},2e3)</script><script defer="defer" data-domain="a11y-blog.dev" src="https://analytics.vasiliy-dudin.com/js/script.js"></script></body></html>