Founder and CEO of Equally AI, a world-class, secured, convenient and modern web accessibility compliance solution for everyone.
Accessible Rich Internet Applications, a.k.a. ARIA, is a set of attributes that web developers add to HTML elements on websites to make them more accessible, especially for assistive technology users. While this might sound technical, the premise is quite simple. ARIA provides additional information about the behaviors and purpose of web elements.
Why is ARIA crucial for web accessibility?
There are more than 7 million visually impaired Americans, many of whom use screen readers to navigate and interact with the web. Just like braille signage and handrails make physical spaces more accessible to them, proper use of ARIA on websites can help them navigate the internet more easily.
Say, for example, there’s a “click here” button on a website. For people without visual disabilities, it’s easy to recognize it as a button. But this might not be so obvious to a blind or low-vision user who uses a screen reader. To resolve this, an ARIA attribute can be added to the button to tell the screen reader, “This is a button, and this is what it does.” ARIA can also indicate the current state of interactive elements, such as whether a dropdown menu is expanded or collapsed.
As technology advances, modern websites often update content without refreshing the page. A notification might pop up, or a page’s section might change after a user completes an action. ARIA helps convey these changes to assistive technologies to ensure that users who cannot see the screen are aware of such changes as they happen.
What are ARIA components?
ARIA has three main components: roles, states and properties.
ARIA roles define an element on the website and its purpose on the web page. They tell you whether an interactive element is a button, a navigation menu, a checkbox or a tooltip.
ARIA states indicate the current condition of an element. An element with a “checked” state indicates that a checkbox is currently selected. States help assistive technologies understand how an element is currently interacting with the user or the application.
ARIA properties provide additional information about an element not covered by roles or states. A property might indicate that a certain field in a form is required or a textbox has a popup associated with it, improving the user interaction for assistive technology users.
What are the ARIA naming conventions?
Just like we use proper nouns to identify people and objects in real life, ARIA provides attributes that help define accessible names and descriptions for web elements. These enable screen readers and other assistive technologies to deliver meaningful information to users.
aria-label
Sometimes, an element may not have visible text associated with it. For example, a search button might only show a magnifying glass icon. Here, adding an aria-label attribute defines a string that labels the current element, such as “Search,” to provide context for users who cannot see the screen.
aria-labelledby
This points to the element that labels the current element. For example, if a button opens a dialog box, the aria-labelledby attribute on the dialog box could point to the button. This helps users understand the relationship between the two elements.
aria-describedby
This attribute is used to point to the element that describes the current element. For example, if a button has additional information in a tooltip, the aria-describedby attribute points to the tooltip, essentially saying, “If you want more info about me, check out this tooltip over here!”
Where can you use ARIA?
We’ve already established that ARIA attributes are used on web elements to make them more accessible to assistive technology users. Below are some use cases where they can be especially useful.
Interactive Elements
ARIA labels can help assistive technologies understand the purpose and state of user-interactive elements, such as buttons, links or form fields. You can use aria-label to provide an accessible name for a button that does not have visible text (as explained earlier) or aria-required to indicate a mandatory form field.
Dynamic Content
For content that changes dynamically, like a live feed or a notification, adding ARIA labels helps to communicate these updates to assistive technologies. A simple example is using aria-live to indicate that an element will be updated and the level of importance of those updates.
Complex Widgets
ARIA attributes can help create accessible interfaces for complex user interface widgets not available in HTML, like carousels or tab panels. Developers often use aria-selected to indicate the currently selected slide or aria-controls to associate a tab with its corresponding panel.
Visual Elements
ARIA attributes also help assistive technology ignore purely visual elements that do not convey any information, such as decorative images or background graphics. A common practice is using alt=”” to hide decorative images from screen readers.
How can you use ARIA correctly?
ARIA is a powerful tool for enhancing web accessibility, but it must be used correctly to be effective. Here are some guidelines for using ARIA properly.
Semantic HTML
Use semantic HTML whenever possible. Semantic elements already have built-in accessibility features, making it unnecessary to add ARIA attributes to them in many cases.
ARIA Guides
W3C’s ARIA documentation is an invaluable resource for understanding and using ARIA attributes correctly. Make it your handy guide for best practices on ARIA use.
Limitations
ARIA cannot make all aspects of a web page accessible. For example, it cannot be used to make images or videos accessible. Understanding its limitations will help you use ARIA effectively.
Keep in mind that ARIA is just one aspect of web accessibility. Color contrast, keyboard navigation and text alternatives for images are also crucial. Make sure you address all aspects of web accessibility, not just those that can be enhanced with ARIA.
Forbes Business Council is the foremost growth and networking organization for business owners and leaders. Do I qualify?
Read the full article here