Skip to content Skip to footer

Aria

An illustration of a person speaking, representing how an aria-label is used to talk to the user.
Article Content
  • How aria is like audio commentary for your sites content.
  • How to use aria labels, labelledby and describedby.
  • How to use aria live and aria hidden.
  • How to use aria roles (and why you might not need to)

Aria is a method of labelling HTML content to give screen reader users more context. They essentially function like labels(they work in a similar way to alt tags, read the article on alt tags basics here). Screen reader users (e.g someone with visual impairments) can not rely on visual cues, so Aria was established to help screen reader users better understand a website’s content. As well as functioning like a label, another way of thinking of Aria’s purpose is like the audio descriptions in a film. They essentially act like a commentary on the website’s content, letting the user know what will happen when they interact with certain elements like a button, click on the form or interact with the website’s navigation. There are many different types of aria, and it can be a bit of a minefield when it comes to learning accessibility. This article will break down some essential aria functions that are good starting points for using this accessibility feature.

Aria labels

This is probably the simplest one to get your head around. Aria labels literally label HTML content, adding further context. This is usually done by writing what a component is going to do or describing the purpose of a component in more detail. You could, for example, use an aria label to give more detail on where a link or a button might take you as a user. You can see this in the example below, which adds more information to the submit form button. (Example from Ashley Firth you can read a summary and buy his book here)

Aria label code sample
Button tags, followed by aria label equals subit information and move to the next page and then submit form. Closing button tag.

Another example is if you have two navigations on your website, you can use an aria role to distinguish between the two. You would use an aria label to label the first navigation, (which would likely be inside a header) primary and then to label the second navigation (most likely in the footer) secondary, as shown below,

Navigation primary label example code
Two header tags, inside in two navigation tags and inside that is aria label equals primary.
code sample for aria label secondary
Footer opening and closing tags. Inside this is two navigation tags, and inside that is aria label equals secondary.

Aria describedby, and aria labelledby

Both aria “describedby” and aria “labelledby” play a very similar role. Both provide text content that directly links to components via a shared ID. So, if you have an HTML component, such as a section, you can add an ID to this and then an ID to a corresponding header or paragraph.

This code sample has a section html element, with a arialabelled by property. Inside the section with a heading level and a paragraph inside. The heading element and the aria labelled by share the same id.

The difference between the two is the length of the descriptions. An aria “labelledby” should be a short reference,” brief text that provides the element with an accessible name”. Whilst an aria “describedby” can have a much longer description. So, using our previous example, you are more likely to associate an aria “labelledby” with the header, whilst an aria “describedby” is more likely to be linked to a paragraph. ( Read Firefox on the difference between aria “describedby” and “labelledby” here ) Alternatively read how describedby can be used in forms here.

Aria live

You can use aria live to give the user an indication of a change. For example, using aria live to inform the user of the successful submission of a form. There are two values that you can give here. Aria polite will only inform the user when they are idle. This is commonly used to not irritate the user by informing them of updates too quickly and breaking their concentration on the task they are currently doing.

aria polite code sample
Div opening and closing tags, with aria live equals assertive inside, this followed by a span where please wait while content uploads is written.

Aria assertive will be less patient than aria polite and immediately inform the user of any changes without waiting for them to finish their current action. This should only be used when crucial information requires the user’s attention immediately. For example, in a situation where the form is time-sensitive and the user could be logged out if they don’t complete an action. You can see an example of how this would be coded below. (Both examples adapted from Ashley’s book access it here)

Aria Live code sample
Div opening and closing tags, with aria live equals assertive inside, this followed by a span where content is Uploading is written.

Aria hidden

Aria hidden is useful if you want to hide specific components from screen reader. See a code example below ( Example from Ashley’s book access a link to buy it here)

aria hidden code sample
A paragraph opening and closing tags. Inside is aria hidden equals true and then the text this content is hidden from screen readers.

You might use aria hidden if you had something on the page purely for decorative or presentational reading reasons and which has no semantic meaning. Aria hidden removes it from the flow of the screen reader, so they don’t have to listen to any content that may be relevant to them without visual cues. (You can also use empty alt tags on decorative images to improve screen readers’ user experience, read our article on the advanced use of alt tags here.)

Aria role

This describes the purpose of an HTML component. It was commonly used before HTML semantic elements to let a screen reader user know what section they were on the website.

You had, for example, the aria roles for parts of the website, which were called landmarks, “banner” for a header, “content info” for a footer, main for the principal area of content on your website. “region” for a significant section of content on your website, and “navigation” for the navigation.

These roles were often used to make divs being used as containers more accessible. For example, it was common to have the div that contained the navigation as having the role navigation. These roles have been made less relevant in the age of semantic HTML elements. You don’t need a div with the role navigation, as using the semantic HTML element “nav”, the screen reader will automatically read this as a navigation landmark without needing to add an aria role.

However, I think these Aria roles are still useful to learn, as there may be circumstances where they could still be used. Perhaps you are building a website for older browsers that do not need to support all HTML5 elements, or you have to use a div for a certain element of the site’s interface, and you want to give this element extra context.

Firefox describes it like this, aria roles “should be used to describe elements that don’t natively exist in HTML or exist but don’t yet have full browser support.” ( You can read more of Firefox’s thoughts on this by following this link).

Useful Tip

To find out more about all of the different uses of aria I highly recommed attending the A11y Project course on accessible code available here. You can read more about the course tutor Rian here. They will also be launching a new course soon specifically about aria.

Summary

Aria can be a little confusing when starting out, and it can be easy to feel overwhelmed. My advice would be to start with using aria labels. This alone can make a big difference to screen reader users’ experience of using a website giving them important pieces of information which help them better understand the content.

As you are getting more advanced developer and you start to build forms or more commonly use components such as buttons, you can gravitate towards using more complex pieces of aria such as aria live and aria “describedby” and “labelledby”.

It would also be good practice to look at how large organisations, such as the BBC (visit the BBC here) and UK government (visit the UK gov here), are using aria and regularly look at the recommendations on sites such as MDN web docs(which has been used to help with this article) and follow the latest advice on W3C. (Read W3C’s advice here) (you can also read this article on using screen reader testing to help with Aria here).

Leave a Reply

Your email address will not be published. Required fields are marked *