A11Y 101: WAI-ARIA live

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Chris Bongers I first time hear this topic...can u give a brief description.
Shubham Sigdar 100Devs The article itself should explain it pretty well.
But in short it's a system you can use to "notify" people that can't see visual updates on the screen.
For instance if you get a popup, how do blind people notice this? That's one area where this system can come in handy.
In this series I'll explore the basics of accessibility and you can join me on this learning trip.
It's been an eventful series looking back at all these A11Y articles. I've already learned so much and feel like I only touched base on some of the basic stuff. For now, I don't have any articles planned around accessibility, but I'm writing down ide...
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

While diving into this magical accessibility journey, we have come across the WAI-ARIA Live several times.
And every time, I've promised you to return to it as it deeps a deeper explanation.
So here we are, an introduction to ARIA live.
In modern-day websites and applications, we use fancy scripts and methods to reload parts of the website dynamically. This can include updating post items on the fly, showing notifications, etc.
The possibilities are endless.
Now imagine you are a non-visual user. How are you notified of these changes suddenly appearing on your screen?
And that's precisely where ARIA-live comes in handy. It will announce elements inside a live region.
We can denote these regions with dynamically changing content by using the aria-live attribute.
It's also good to note you should only opt to have one aria-live per page as it can confuse screen readers and make it unclear what's happening.
As for the value of this aria-live, we have a set of three possible values.
polite: This is the default way of announcing elements. Whenever something changes, the reader will focus right after finishing what was active.assertive: This should only be used for critical or time-sensitive notifications as it abruptly changes focus from what it was focused on before to the live region.off: This is the default for any element and the equivalent of not setting aria-live.There are also a couple of roles that act as aria-live when used.
role="log": Additionally you can use aria-live="polite" to enhance this feature.role="status": Additionally you can use aria-live="polite" to enhance this feature.role="alert": Be careful with manually adding aria-live as screen readers might read out your text twice.role="marquee": For scrolling textrole="timer": For any countdown/clockThere have been some additions to live regions that we can also leverage.
aria-atomic: This is a boolean value to describe whether or not the whole live region changes. The default is false, and only "new" changes will be announced. Setting this to true will read out the entire live region again.aria-relevant: We can describe which types of changes we want to announce. For this, we can use additions removals as our options.Be minimalistic when it comes to introducing live regions. Make sure your non-visual readers only get updates they need, as this is pretty disruptive behavior.
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter