“The power of technology is in its ability to empower everyone, regardless of their abilities.” John Maeda
Picture reading this article without the ability to see anything on the screen. For many people who navigate the web, this is a severe reality that they have to live with and face daily. However, technological advancement has made it possible for these people to have the same experience interacting with the web as others. Today, we will gain an in-depth understanding of a crucial tool that plays a pivotal role in defining web accessibility: ARIA.
ARIA is a very useful tool that helps create equal digital opportunities for people with disabilities. Accessible Rich Internet Applications is a set of attributes that make the web more usable and accessible to people with disabilities. It provides extra information about the purpose and behavior of web elements that helps assistive technologies properly decipher the web content, hence creating equal digital opportunities for everyone. ARIA has three key components: roles, properties, and states.
ARIA roles are used to impart semantic knowledge so that screen readers can read the webpage clearly when native HTML elements' semantics fall short or are insufficient. These roles add semantic detail and context to the content of a webpage, enabling it to be read properly by screen readers and creating an inclusive web environment for everyone.
Different ARIA roles exist to serve different purposes.
Role Type | Purpose | Example |
| Landmark | Navigation and page structure | Navigation, main, banner |
| Widget | Interactive Components | Tab, button, slider |
| Document Structure | Content organization | Article, heading, separator |
| Live Region | Dynamic Content Updates | Alert, log, status |
ARIA landmarks are used to establish key sections of a web page. They allow people using assistive technologies like screen readers to navigate a web page efficiently. One example is jumping to the main content and bypassing repeated blocks of elements like navigation. Landmarks are used to establish the web page’s structure and help screen readers identify the different key sections of the page. There are five key landmark roles: main, navigation, banner, contentinfo, and complementary. Here’s a full list of ARIA landmarks on the W3C’s ARIA 5.3.3 Landmark Roles page.
Example:
<nav role="navigation" aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
ARIA widget roles have the same semantics as native HTML elements. Normally, these roles define common interactive patterns and require the use of JavaScript for interaction. Larger or composite widgets are composed of standalone UI widgets and are used as containers that control other contained widgets. Some examples of standalone widgets are: button, alert, link, tab, menuitem, and checkbox. Radiogroup, menu, tablist, grid, and combobox are examples of composite widgets.
One common question is how widget roles are used by a user. The answer is pretty simple. People use them to interact with a web page to get things done, like completing forms, navigating a sidebar or main bar, or opening/closing tabs.
Here’s a full list of ARIA widget roles on the W3C’s ARIA 5.3.3 Widget Roles page.
Example:
<div role="grid">
<div role="row">
<div role="gridcell">A1</div>
<div role="gridcell">B1</div>
</div>
<div role="row">
<div role="gridcell">A2</div>
<div role="gridcell">B2</div>
</div>
</div>
The document structure roles impart structural descriptions about the sections of a web page to assistive technologies. They are not normally interactive and help define a page hierarchy to a screen reader. They also provide information about relationships between different sections of a page. Document structure roles are not used much due to native HTML elements; however, they can be quite useful in some scenarios. Common examples of document structure roles are document, heading, list item, list, toolbar, and image. Here’s a full list of ARIA document structure roles on the W3C’s ARIA 5.3.3 Document Structure Roles page.
Example:
<div role="list" aria-label="Fruit List">
<div role="listitem">Apples</div>
<div role="listitem">Bananas</div>
<div role="listitem">Cherries</div>
</div>
ARIA states and properties are used to describe the relationships between different elements and support ARIA roles existing on the web page. ARIA semantics are especially useful in imparting extra information to a browser’s accessibility API. ARIA states and properties are supported by a role, which is why the developer must assign a role and the relevant properties and states to an element of a web page, unless the element already has ARIA semantics via the use of a proper HTML element.
The states are quite dynamic and are updated when a user interacts with the page. When this happens, it notifies the assistive technologies (i.e., screen readers) about the changes in the states so they can report those changes to the user interacting with the page.
There are almost 35 ARIA states and properties defined by the W3C, and you can read about them in detail on the W3C site. However, here are a few principal ones shared below:
- aria-expanded: Specifies whether collapsible elements like accordions are collapsed or expanded.
- aria-describedby: Specifies an element’s ID that provides useful information about the target element.
- aria-disabled: Specifies whether an element is disabled.
- aria-live: Indicates the type of updates an element might receive, such as assertive, polite, or off.
- aria-hidden: Indicates that an element (non-interactive) should be hidden from the accessibility API.
- aria-labelledby: Specifies an accessible name for elements.
- aria-busy: Specifies that an element is currently performing some sort of action (e.g., loading).
- aria-invalid: Specifies if an invalid value is found for an input field.
- aria-selected: Specifies the current selected state of any given element.
Example:
<div role="combobox" aria-expanded="false" aria-owns="listbox1" aria-haspopup="listbox">
<input type="text" aria-autocomplete="list" aria-controls="listbox1"/>
</div>
Example:
<div>
<a href="#" aria-label="Click this link to learn more about Aria labels">Read More...</a>
</div>
The best thing about web accessibility is that you learn new things every day. It is quite important to integrate ARIA into the everyday web development process to make the digital world accessible to all. Developers need to understand ARIA concepts so they can implement them in their code to improve the overall user experience. In the future, the use of ARIA in web accessibility is only going to become more important and grow stronger, which is why it is essential to evolve with the digital world and understand the role of ARIA in creating an inclusive digital space for everyone.
If you’re interested in learning how to improve data ingestion workflows while maintaining efficiency and structure, check out our blog on Using Databricks Auto Loader for Efficient Data Ingestion on the Delta Lake Platform.
...Loading Related Blogs
We have got the answers to your questions.
