This content originally appeared on DEV Community and was authored by Sarvesh Patil
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>
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">
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>
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 myButton = document.getElementById("myButton");
myButton.setAttribute("role", "button");
//OR
<button role="button">Search</button>
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>
role=”link”
The link role indicates that an element is a hyperlink, and the href attribute can be used to specify the target URL.
<a href="https://example.com" role="link">Link Text</a>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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;
}
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();
}
});
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>
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 | Sarvesh Patil
Passionate writer sharing insights and experiences to inspire and inform. Join me on a journey of discovery and growth.
sarveshh.beehiiv.com
Originally published at https://blog.sarveshpatil.com
This content originally appeared on DEV Community and was authored by Sarvesh Patil
Sarvesh Patil | Sciencx (2023-02-27T07:20:06+00:00) How to Implement ARIA Tags for Better Accessibility: A Comprehensive Guide for Web Developers. Retrieved from https://www.scien.cx/2023/02/27/how-to-implement-aria-tags-for-better-accessibility-a-comprehensive-guide-for-web-developers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.