intro
Hi Friends!
Welcome to the first blog in my accessibility series, where I will delve into the deep and nitty-gritty details of various ARIA features (as many as I can, if not all).
why
Well, firstly, why not! Accessibility is a human right on the internet and it is our role as developers to ensure we aren't gatekeeping people out, it's discrimination for us to not do everything we can and utilise the tools available to us to get it right.
Let's not be Dominos, who took a visually impaired man to the Supreme Court because they didn't want to make the site accessible, I mean WTF 🤷♂️ that is not cool 'source'.
BTW, I buy much MUCH less dominos because of this.
ARIA
what is it?
ARIA is an acronym for Accessible Rich Internet Applications and is used by developers to create content that is accessible for assistive technology.
ARIA Alert
MDN docs state that the alert role is used to provide the user with important, and usually time-sensitive, information, and often to tell the user an element has been dynamically updated.
We use these all the time, they're great at popping up on the screen, grabbing the users attention to alert them of a message we want to display in a timely manner.
Well, what happens if we don't provide an ARIA role to identify that? The message gets lost, Assistive Technology doesn't understand the importance.
So this is when we use an ARIA alert role="alert" within the content.
Impportant stuff
It is important to note, the alert must be placed within the content for the Assistive Technology to identify the alert properly, if not the focus will not move to the alert and it will get missed.
Be very careful to not have alerts trigger too close to each other, it can get messy and will create a terrible and confusing user experience.
Show me some code
So how can we set this up?
We can use CSS styles to trigger an alert, display: none hides the <p> element form the document, the moment we remove display: none from the element, the alert role gets picked up by Assistive Technologies and read.
<p role="alert" style="display: none;">I'm an ALERT.</p>
Or in the codepen example, we can inject the alert into the document ensuring we set the attributes with setAttribute("role", "alert");
What's next?
Thanks for taking a moment to read my intro to Accessibility with the Alert Role.
Next up is the Application Role, this one is a bit more in-depth, so I look forward to bringing you that one soon.
As I am still really new with Accessibility I encourage dialogue, if there is something missing or I've made a mistake please let me know and I will review edit, or add to the article.
References:
Top comments (0)