What is ARIA?
Accessible Rich Internet Applications (ARIA) is an extension to HTML that enables developers to add extra information to web pages to help assistive technology understand the purpose and behavior of elements on the page. It is particularly useful for making dynamic content and advanced user interface controls accessible to assistive technology (AT) and can include roles, states, and properties that describe the element’s purpose and relationships to other elements on the page.
Developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), ARIA labels provide a way to add semantic information to HTML elements, allowing assistive technologies like screen readers to better understand the structure and purpose of the content on a web page.
Why is ARIA important?
ARIA helps to bridge the gap between the visual presentation of a web page and the underlying code. Without ARIA, assistive technologies may have difficulty interpreting the structure and purpose of a web page, making it difficult for users with disabilities to navigate and understand the content.
The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) provide recommendations for making web content more accessible, but these guidelines do not always cover all the features and controls that can be found on modern web pages. ARIA fills in these gaps by providing a way to add accessibility information to elements that are not natively supported by HTML.
How and when is ARIA used?
ARIA can be used to add semantic information to HTML elements in the form of attributes and roles. For example, the “role” attribute can be used to indicate the purpose of an element (such as a button or a heading), and the “aria-label” attribute can be used to provide a text description of an element. ARIA is typically used in conjunction with standard HTML elements to provide additional information for assistive technologies.
Examples of ARIA elements:
Roles:
ARIA roles are used to specify the type of element, such as a button, checkbox, or heading. For example, the role attribute can be added to a element to indicate that it acts as a heading. This allows assistive technology to properly announce the element as a heading rather than just as a generic block of text.
role=”button” – Identify an element as a button.
role=”checkbox” – Identify an element as a checkbox.
role=”heading” – Identify an element as a heading.
role=”link” – Identify an element as a link.
role=”menuitem” – Identify an element as a menu item.
States and properties:
ARIA states and properties provide additional information about the current state of an element or its relationship to other elements on the page. For example, the aria-checked attribute can be used to indicate whether a checkbox is checked or not. This allows assistive technology to provide the appropriate feedback to users when interacting with the checkbox.
aria-label – Provides a text description of an element.
aria-labelledby – Associates an element with another element that contains its text description.
aria-describedby – Associates an element with another element that provides additional information about it.
aria-checked – Indicates the current state of a checkbox or toggle button.
Live regions:
ARIA live regions are used to mark regions of a page that get updated dynamically, such as a live feed or chat window. For example, aria-live=”polite” attribute can be used to indicate that new content will be added to the region and assistive technology should announce the new content when it is inserted.
ARIA Use Cases
- Structuring Content
- ARIA can be used to better structure content on a page, helping to clarify the meaning of elements and their relationship to each other.
- Navigation
- ARIA can be used to provide helpful navigation cues to users.
- Examples: landmarks and tabbing order.
- Widgets
- ARIA can be used to provide more detailed information about widgets.
- Examples: sliders, menus, and buttons.
- [Dynamic Content
- ARIA can be used to provide helpful hints when dynamic content is added to a page.
- Keyboard Input
- ARIA can be used to provide helpful hints for keyboard input.
- Examples: a list of available keys or shortcuts.
- Forms
- ARIA can be used to provide helpful hints for forms, such as labels and descriptions.
- Popup Alerts
- Provide helpful hints for popup alerts through text-to-speech and screen reader
- Examples: error messages or warnings.