Yesterday, I spoke a bit about web accessibility and how I’ve started learning about it. I mentioned the fact that by default when something is updated interactively (using JavaScript) on a web page a screen reader may not realize it. As I’m creating interactive examples on my site, I want to ensure that everyone can access them and realize when changes are occurring. ARIA, which I quickly brought up at the end yesterday, provides the context necessary to our HTML elements in order to tell a screen reader to announce those interactive changes. I’ve integrated an interactive demonstration into my [HTTP Introduction tutorial](/posts/an-introduction-to-http-the-foundation-of-the-web). When readers change values, they can click submit and see the changes appear on screen. In order to ensure a screen reader catches the change, I’ve used ARIA live regions. You add a tiny amount of markup to an HTML element and suddenly, when it changes, those updates will be announced. With ARIA live regions you can specify the urgency as well as which controls relate to the region. Maybe an error has occurred and you want the user to know immediately, or maybe the user received a new chat message and you don't want to disturb what they're currently doing right away. ARIA live regions give you that granularity. It’s really incredible how such a small change can make a big difference in the user experience. I’m glad that I can hopefully help someone else better access my site and hopefully this will inspire others to think about this too!
Do you have a reply you want to share? You can send me the URL here: