Improving Accessibility with ARIA attributes

Accessibility is an important aspect of web design, as it ensures that everyone, including people with disabilities, can access and use your website.


One way to improve the accessibility of your website is by using semantic HTML elements, as discussed in our previous blog posts. Another way is by using ARIA attributes. These can provide additional information to assistive technologies and make your website more accessible.

What are ARIA attributes?

ARIA (Accessible Rich Internet Applications) attributes are a set of HTML attributes that improve the accessibility of web content. Particularly for users with disabilities. ARIA attributes provide additional information about the purpose and structure of HTML elements. Making it easier for assistive technologies, such as screen readers, to navigate and interpret the content.

Using ARIA attributes

Here are some common ARIA attributes that improves the accessibility of your website:

aria-label

The aria-label attribute is used to provide a label or description for an HTML element that doesn’t have any visible text. For example, if you have an icon that doesn’t have any text associated with it, you can use aria-label to provide a description of what the icon represents.

Example usage of aria-label attribute:

<button aria-label="Search"><i class="fas fa-search"></i></button>

aria-labelledby

The aria-labelledby attribute is used to provide a label or description for an HTML element by referencing the ID of another element on the page. This is useful when you want to associate a label with an input field or form control.

Example usage of aria-labelledby attribute:

<label id="name-label">Name:</label>
<input type="text" id="name-input" aria-labelledby="name-label">

aria-describedby

The aria-describedby attribute is used to provide additional information about an HTML element. This is to provide a description or instructions for a form field or button.

Example usage of aria-describedby attribute:

<label for="email">Email:</label>
<input type="email" id="email" aria-describedby="email-help">
<p id="email-help">Please enter a valid email address.</p>

aria-expanded

The aria-expanded attribute is used to indicate whether an element that can be expanded or collapsed, such as a dropdown menu or accordion, is currently expanded or collapsed.

Example usage of aria-expanded attribute:

<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Contact</a></li>
</ul>

Wrapping it up

ARIA attributes in addition to semantic HTML elements, can greatly improve the accessibility of your website. They provide additional information about the purpose and structure of HTML elements. Making it easier for assistive technologies to interpret the content. Implementing them can ensure you that your website is accessible to as many users as possible, including those with disabilities.

Read more about ARIA on MDN.