DEV Community

Cover image for How to Implement ARIA Tags for Better Accessibility: A Comprehensive Guide for Web Developers
Sarvesh Patil
Sarvesh Patil

Posted on • Updated on

How to Implement ARIA Tags for Better Accessibility: A Comprehensive Guide for Web Developers

#css #webdev #design #ux

Introduction

As web developers, it’s essential to make sure your website is accessible to everyone. One of the ways to achieve this is by implementing Accessible Rich Internet Applications (ARIA) tags. ARIA tags are HTML attributes that help make web content more accessible to people with disabilities. In this blog post, we’ll cover everything you need to know about implementing ARIA tags, from the basics to advanced topics.

Let’s start with the basics. ARIA tags are designed to provide additional information to assistive technology, such as screen readers. They help users with disabilities understand the content on your website better.

Some basic ARIA tags that you can start using today include:

ARIA labels and descriptions

aria-label

This attribute is used to provide an accessible name for an element that would otherwise not have a name. You can use this attribute to label buttons, links, and form controls.

<button aria-label="Search" type="submit">Search</button>
Enter fullscreen mode Exit fullscreen mode

aria-labelledby

This attribute is used to provide an accessible name for an element that is related to another element on the page. The value of this attribute should be the ID of the element that provides the accessible name.

<label id="searchLabel">Search:</label>
<input type="text" aria-labelledby="searchLabel">
Enter fullscreen mode Exit fullscreen mode

aria-describedby

This attribute is used to provide additional information about an element, such as instructions or descriptions. The value of this attribute should be the ID of the element that provides the additional information

<label for="password">Password:</label>
<input type="password" id="password" aria-describedby="passwordDesc">
<span id="passwordDesc">Please enter a password that is at least 8 characters long.</span>
Enter fullscreen mode Exit fullscreen mode

ARIA roles

ARIA roles are a set of predefined attributes that can be used in HTML and JavaScript to define the role or function of an element on a web page.

In JavaScript, ARIA roles can be added to elements using the setAttribute() method, which allows you to specify the role for the element.

By setting the role of an element to the appropriate ARIA role, you can ensure that it is properly identified by assistive technologies and provide a more accessible user experience. It’s important to note that ARIA roles should only be used when necessary, and should be used in conjunction with other accessibility best practices to ensure that your website is fully accessible to all users.

role=”button”

The button role is for clickable elements that trigger a response when activated by the user.

const myDiv = document.getElementById("myDiv");
myDiv.setAttribute("role", "button");

//OR

<div role="button">Search</div>
Enter fullscreen mode Exit fullscreen mode

More examples of roles that can be assigned to elements are:

role=”heading”

The heading role indicates that an element is a heading, and the aria-level attribute can be used to indicate the level of the heading (1 through 6).

<h1 role="heading" aria-level="1" >This is a heading</h1>
<h2 role="heading" aria-level="2" >This is a heading</h2>
<h3 role="heading" aria-level="3" >This is a heading</h3>
<h4 role="heading" aria-level="4" >This is a heading</h4>
<h5 role="heading" aria-level="5" >This is a heading</h5>
<h6 role="heading" aria-level="6" >This is a heading</h6>
Enter fullscreen mode Exit fullscreen mode

role=”link”

The link role indicates that an element is a hyperlink, and the href attribute can be used to specify the target URL.

<button href="https://example.com" role="link">Link Text</button>
Enter fullscreen mode Exit fullscreen mode

role=”menu”

The role menu indicates that an element is a menu, and the aria-orientation attribute can be used to specify the orientation of the menu (horizontal or vertical).

<ul role="menu" aria-orientation="horizontal">
  <li role="menuitem"><a href="#">Menu Item 1</a></li>
  <li role="menuitem"><a href="#">Menu Item 2</a></li>
  <li role="menuitem"><a href="#">Menu Item 3</a></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

role=”progressbar”

The role progressbar indicates that an element is a progress bar, and the aria-valuemin, aria-valuenow, and aria-valuemax attributes can be used to specify the current and maximum values of the progress bar.

<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">50%</div>
Enter fullscreen mode Exit fullscreen mode

role=”radiogroup”

The role radiogroup indicates that an element is a group of radio buttons, and the aria-checked attribute can be used to specify the currently selected radio button.

<div role="radiogroup">
  <label><input type="radio" name="option" role="radio" aria-checked="true"> Option 1</label>
  <label><input type="radio" name="option" role="radio"> Option 2</label>
  <label><input type="radio" name="option" role="radio"> Option 3</label>
</div>
Enter fullscreen mode Exit fullscreen mode

role=”region”

The role region indicates that an element is a region of the page, and the aria-label attribute can be used to provide a descriptive label for the region.

<div role="region" aria-label="Main Content">
  <p>This is the main content of the page.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

role=”search”

The role search indicates that an element is a search field, and the aria-label attribute can be used to provide a label for the search field.

<form role="search">
  <label for="search">Search:</label>
  <input type="text" id="search" name="search" aria-label="Search">
  <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

ARIA states and properties

ARIA states and properties refer to attributes that can be used to make web content more accessible to users with disabilities. ARIA state can indicate whether an element is expanded or collapsed, or whether it’s selected or not. ARIA properties provide more specific information about an element.

aria-hidden

This attribute is used to hide an element from screen readers and other assistive technology. This can be useful for decorative or redundant elements that do not provide any meaningful information.

<div class="decorative" aria-hidden="true">
  <img src="decorative-image.png" alt="">
</div>
Enter fullscreen mode Exit fullscreen mode

aria-invalid

This attribute is used to indicate that the value of an input is not valid. This can be useful for form validation and error messages.

<label for="email">Email:</label>
<input type="email" id="email" aria-invalid="true" required>
<div class="error-message">Please enter a valid email address.</div>
Enter fullscreen mode Exit fullscreen mode

aria-checked

Indicates whether an element is checked or not

<!-- Using aria-checked with a checkbox -->
<input type="checkbox" id="example-checkbox" aria-checked="false" />

<!-- Using aria-checked with a button -->
<button id="example-button" aria-checked="true">Selected</button>
Enter fullscreen mode Exit fullscreen mode

aria-disabled

Indicates whether an element is disabled or not.

<!-- Using aria-disabled with a button -->
<button id="example-button" aria-disabled="true">Disabled</button>
Enter fullscreen mode Exit fullscreen mode

aria-expanded

Indicates whether an element is expanded or not.

<!-- Using aria-expanded with a collapsible section -->
<button id="example-button" aria-expanded="false" aria-controls="example-section">Expand</button>
<section id="example-section" aria-hidden="true">Collapsible content</section>
Enter fullscreen mode Exit fullscreen mode

aria-selected

Indicates whether an element is selected or not

<!-- Using aria-selected with a listbox -->
<ul role="listbox">
  <li role="option" aria-selected="true">Option 1</li>
  <li role="option" aria-selected="false">Option 2</li>
  <li role="option" aria-selected="false">Option 3</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

ARIA live regions

ARIA live regions are a set of Accessible Rich Internet Applications (ARIA) attributes that allow web developers to create dynamic, live updates to web content that are accessible to users with disabilities. In JavaScript, ARIA live regions can be used to update portions of a web page without requiring the user to refresh the entire page.

ARIA live regions are particularly useful for web applications that display real-time information, such as news tickers, chat rooms, or sports scores.

To use ARIA live regions in JavaScript, developers can use the aria-live attribute to specify the level of importance and the mode of updating the live region. The aria-live attribute has three possible values: "off", "polite", and "assertive".

  • The “polite” value indicates that updates to the live region are less urgent and should not interrupt the user’s current task.
  • The “assertive” value indicates that updates to the live region are more important and should interrupt the user’s current task.
  • The “off” value means that the live region is not active.

Overall, ARIA live regions in JavaScript are a powerful tool for creating more dynamic and accessible web applications, especially for users with disabilities. By using ARIA live regions, developers can ensure that all users, regardless of their abilities, can access and interact with web content in real-time.

Example:

<div id="live-region" aria-live="polite">
    Initial content.
</div>
<button onclick="updateLiveRegion()">Update Live Region</button>

function updateLiveRegion() {
  var liveRegion = document.getElementById("live-region");
  var newContent = "New content added at " + new Date().toLocaleTimeString();
  liveRegion.innerHTML = newContent;
}
Enter fullscreen mode Exit fullscreen mode

In this example, there is a div element with an id of "live-region". The aria-live attribute is set to "polite" to indicate that the live region should not interrupt the user's current task. The initial content of the live region is "Initial content".

When the user clicks the “Update Live Region” button, the updateLiveRegion() function is called. This function gets the div element with an id of "live-region" using the getElementById() method, and then updates the innerHTML property of the element with the current time. Because the aria-live attribute is set to "polite", the updated content is announced by screen readers without interrupting the user's current task.

This is just a simple example, but it shows how ARIA live regions can be used to provide real-time updates to web content that are accessible to all users, including those with disabilities.

ARIA modal dialogs

ARIA modal dialogs are a type of ARIA tag that can be used in JavaScript to create accessible modal dialogs. Modal dialogs are typically used to present information or requests to users that require immediate attention, such as error messages, confirmations, or notifications.

ARIA modal dialogs are designed to be accessible to users with disabilities, particularly those who use screen readers. They work by temporarily disabling the rest of the page, while the modal dialog is displayed, and by providing information about the dialog to assistive technology. This makes it easier for users with disabilities to understand and interact with the content of the dialog.

To create an accessible modal dialog using ARIA, you can use the role attribute to define the role of the element as a dialog, and the aria-modal attribute to indicate that it is a modal dialog. You can also use other ARIA attributes to provide additional information about the dialog, such as its title, description, and state.

Example:

<button id="open-modal">Open Modal Dialog</button>

<div id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Modal Dialog</h2>
  <p>This is a modal dialog. Press the escape key or click the close button to close the dialog.</p>
  <button id="close-modal">Close</button>
</div>

const openModalButton = document.getElementById('open-modal');
const closeModalButton = document.getElementById('close-modal');
const modal = document.getElementById('modal');

function openModal() {
  modal.style.display = 'block';
  modal.setAttribute('aria-hidden', 'false');
  document.body.style.overflow = 'hidden';
}

function closeModal() {
  modal.style.display = 'none';
  modal.setAttribute('aria-hidden', 'true');
  document.body.style.overflow = 'auto';
}

openModalButton.addEventListener('click', openModal);
closeModalButton.addEventListener('click', closeModal);
modal.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    closeModal();
  }
});
Enter fullscreen mode Exit fullscreen mode

In this example, we have a button that, when clicked, opens a modal dialog. The modal dialog has a role attribute of "dialog" and an aria-modal attribute of "true", which indicate that it is a modal dialog. It also has an aria-labelledby attribute, which references the ID of the title of the dialog, and a close button, which will be used to close the dialog.

In the JavaScript code, we define functions to open and close the modal dialog, and add event listeners to the buttons and the modal to handle user interaction. When the modal dialog is open, we set the aria-hidden attribute of the rest of the page to "true", which makes it inaccessible to screen readers. We also disable scrolling on the page while the modal is open to prevent users from accidentally interacting with the rest of the page.

This is just one example of how you can use ARIA modal dialogs in JavaScript. The key is to use the appropriate ARIA attributes to indicate that the element is a modal dialog and to provide additional information about the dialog to assistive technology. By doing so, you can make your modal dialogs more accessible to users with disabilities.

ARIA tab panels

ARIA tab panels are a way to organize content into tabs, which users can click or tap on to access different sections of a webpage. For example, screen readers can read out the different tabs and their associated content, allowing users with visual impairments to navigate the page more efficiently. ARIA tab panels also provide a more organized and streamlined user interface for all users, improving the overall user experience of a website.

<div role="tabpanel" aria-labelledby="tab1">
  <p>This is the content of the first tab.</p>
</div>
<div role="tabpanel" aria-labelledby="tab2">
  <p>This is the content of the second tab.</p>
</div>

<ul role="tablist">
  <li role="tab" id="tab1" aria-controls="panel1" tabindex="0">Tab 1</li>
  <li role="tab" id="tab2" aria-controls="panel2">Tab 2</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Best Practices

To ensure that you’re using ARIA tags correctly, it’s essential to follow best practices. Here are some tips to keep in mind when implementing ARIA tags:

  • Only use ARIA tags when necessary
  • Use ARIA tags consistently across your website
  • Test your website with assistive technology to ensure that it’s accessible to people with disabilities

By following these best practices, you can ensure that your website is both accessible and usable for everyone.

Conclusion

In conclusion, implementing ARIA tags is a crucial step in making your website more accessible. By understanding the basics and more advanced topics of ARIA tags, you can make significant improvements in the accessibility of your website. By following best practices, you can ensure that your website is accessible to everyone, regardless of disability or impairment. As an expert in web development, it’s your responsibility to ensure that your website is accessible, and implementing ARIA tags is a great way to achieve this goal.

Thank you for reading this far

Subscribe to my Newsletter for exciting posts just like this.

Subscribe | The Pen, Pixel & Profit Club

Join 1,187+ coders, entrepreneurs, and creators for a weekly newsletter featuring web dev tips, business case studies, how-to stories, writing deconstructions, and genius AI tools with usage instructions. Get inspiration and practical advice for your projects. Sign up now!

favicon sarveshh.beehiiv.com

Originally published at https://blog.sarveshpatil.com

Top comments (11)

Collapse
 
rouilj profile image
John P. Rouillard •

I realize you are giving contrived examples but the first rule of ARIA is don't use ARIA. You correctly state this at the conclusion of your article.

However,

<button aria-label="Search" type="submit">Search</button>
Enter fullscreen mode Exit fullscreen mode

The text Search inside the button already provides the label. aria-label isn't needed. You can see this by putting your example in a web page and pulling up accessibility tools from your browser's dev tools. Add and remove the aria-label and reload the page. You will see that the button's visible text becomes the name for the button.

Your example does show that the aria-label and visible label should be the same. This assists partly sighted people using a voice recognition system. They can say "Press Search". IIRC setting an aria-label to a value different from the visible label would break this. It would make the button inaccessible.

Also role=button is not needed with a <button> element.
That is the default role for button and is at best redundant.

If you were using a div as a button (with all the javascript etc. needed to make that "work"), role=button would be needed.

Similarly using aria-checked isn't needed with an input type-checkbox. As developer.mozilla.org/en-US/docs/w... says:

Note: Where possible use an HTML <input> element with
type="checkbox" and type="radio" as these have built in
semantics and do not require ARIA attributes.

Again, I appreciate that simple examples are tough to come up with. Teaching people about ARIA is important and I am glad you are trying. But providing examples that people just learning ARIA will use incorrectly isn't good either.

Collapse
 
sarveshh profile image
Sarvesh Patil •

Thank you for taking the time to read my article and provide feedback. I appreciate your input and agree with your points.

You are correct that the first rule of ARIA is to not use it if there is an appropriate HTML element available. I included the example with aria-label for educational purposes, to demonstrate the proper usage of the attribute when there is no visible label present. However, as you rightly pointed out, in the case of the element, it already provides a visible label, making the aria-label attribute redundant.

Regarding the use of role=button, I agree that it is unnecessary when used with the element. I included it as a way to demonstrate the proper usage of the role attribute for educational purposes. However, I should have made it clear that it is redundant in this case.

Similarly, regarding the use of aria-checked with a checkbox, I should have made it clear that it is unnecessary when using the element with type="checkbox". The same goes for aria-selected with the element.

Thank you for pointing out these errors. I will update the article to make it clearer and more accurate. Your feedback is valuable and will help me improve my future articles.

Collapse
 
netdjw profile image
Balázs Winkler •

Please fix this article, because it suggest bad practice.

A button should NOT define role="button", because it's a button. You dont need to define again it's a button. And an "a" tag should NOT define role="link" because it's a link by naturally.

With these unneccessary definitions you not simply just write more codes, but whit that you downgrade the performance a bit for accessibility tools, because they will parse the button element, register it's a button, then parse the role attribute, and overdefine it's a button. So this is absolutely wasting resources.

Collapse
 
sarveshh profile image
Sarvesh Patil •

Thank you for taking the time to read my article and provide feedback. I appreciate your input and agree with your points.

You are correct that the role attribute is not necessary for the button and link elements since they already have their default roles defined. In the article, I included these examples to demonstrate the proper usage of the role attribute for educational purposes. However, I should have made it clear that it is redundant in these cases.

I apologize for any confusion this may have caused and for the potential impact on accessibility tool performance. I will update the article to make it clearer and more accurate, taking your feedback into consideration.

Again, thank you for bringing this to my attention and helping me improve the quality of my content.

Collapse
 
citronbrick profile image
CitronBrick •

Please enable syntax highlighting in your Dev.to code blocks, using

(triple backtick) (name of language. eg: html)
(your code)
(triple backtick)

Collapse
 
sarveshh profile image
Sarvesh Patil •

I will definitely take your suggestion into consideration for future posts and will make an effort to implement it. Thank you once again for your valuable input!

Collapse
 
dinodonga_76 profile image
dinoDonga • • Edited

id start with this article. its an easy fix and makes all of our reading experiences way better

Image description

Thread Thread
 
sarveshh profile image
Sarvesh Patil •

Noted

Collapse
 
vulcanwm profile image
Medea •

great post!

Collapse
 
sarveshh profile image
Sarvesh Patil • • Edited

Hey, thanks @vulcanwm

Collapse
 
vulcanwm profile image
Medea •

np!

Read next

whoamivoyager profile image

Flask and APIs

Jonathan McIntosh -

shivankshuklaa profile image

Keeping Your Microservices Safe: Best Practices and Patterns

Shivank Shukla -

walternascimentobarroso profile image

Code Improvements

Walter Nascimento -

vparul profile image

Choosing the Right CSS Approach: Tailwind CSS vs Bootstrap vs Vanilla CSS

Parul Verma -