A11y :~ Alert
Tags: a11y, webdev, codenewbie
Published: 2021-01-22 04:08:22

---
title: A11y :~ Alert
published: true
description: A breakdown of the Alert ARIA Role
tags: #a11y #accessibility #webdev #codenewbie
cover_image: https://images.unsplash.com/photo-1587620962725-abab7fe55159?ixid=MXwxMjA3fDB8MHxzZWFyY2h8N3x8Y29kZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60
---
[Image from Unsplash](https://unsplash.com/photos/vpOeXr5wmR4)

### 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](https://www.cnbc.com/2019/10/07/dominos-supreme-court.html)'.

BTW, I buy much MUCH less dominos because of this.

---
# [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/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](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role)

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.

![list of different alerts](https://dev-to-uploads.s3.amazonaws.com/i/cgbwp1lnhvuv9ozb763x.png)
[Image Source](https://www.w3schools.com/howto/howto_js_alert.asp)

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.
 
```html
<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");`

{% codepen https://codepen.io/Cooper_Codes/pen/oNzmWvp %}

### 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: 
* [W3C - Alert](https://www.w3.org/TR/wai-aria-1.1/#alert)
* [Digital A11y](https://www.digitala11y.com/)
* [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
* [W3S](https://www.w3schools.com/default.asp)
* [Accessibility Developer Guide](https://www.accessibility-developer-guide.com/)