As technology and the Internet develop, we know that millions of different people are using them. Being different from the others is indeed remarkable. Still, as a website developer, you should consider creating web content and web applications that will be more accessible to people with disabilities. Or suppose you can use some tools to help them with this? You got it right – we are speaking of the best accessibility tools on the market!
As years went by, some functionalities weren’t accessible to users with specific disabilities. That’s why W3C developed ARIA, or to be more precise, WAI-ARIA. This guide will help you learn what ARIA is, what it does, and more. So, we won’t waste more time. Let’s lead you closer to WAI-ARIA.
What is ARIA, and Who is it For?
ARIA is a shorthand that stands for Accessible Rich Internet Applications. The formal name for this suite is WAI-ARIA or Web Accessibility Initiative – Accessible Rich Internet Applications.
ARIA Technical Solutions
ARIA offers a framework that adds attributes that identify features that boost user interaction, their current state, and how they relate to each other. Also, WAI-ARIA provides different navigation techniques to mark regions and web structures, like primary content, secondary content, menus, and banner information. To make it more straightforward, with ARIA, the developers can easily identify regions of pages and ease the moving among regions for keyboard users instead of pressing the Tab many times. What’s more, ARIA includes technologies to live regions, map controls, events to accessibility APIs, and custom controls used for rich internet applications. ARIA’s techniques apply to widgets, like drop-down lists, tree controls, buttons, calendar functions, etc. After speaking of the technical solutions that ARIA provides, it’s time to move to maybe one of the most crucial parts.
What is ARIA Capable of?
To work flawlessly and to ease the journey of people with disabilities, WAI-ARIA’s set of attributes consists of three components which are divided into two categories:
- States & properties
ARIA’s roles are used to define the user interface (UI) element type.
You can add an ARIA role via
role=”<role_name>”; There are four different ARIA roles:
Landmark ARIA Roles
The Landmark Aria roles help users to easily navigate through some part of a web page or identify different web page parts. The Landmark role is very helpful for screen readers. The screen reader announces the start and the end of every Landmark role set on a page, and the web rotor displays a list of the roles. Here are different landmark roles:
- Banner: contains the title of the page or the main heading
- Complementary: a section of the document that supports the main document but is separate
- Content info: contains info for the parent document (copyrights and links to privacy statements)
- Form: a region of the document that represents a collection of the form (associated elements that can represent editable values)
- Main: as the name implies, this presents the main content in a document
- Navigation: links that are suitable for navigating the document or related documents
- Search: the search tool of a document
- Application: a region declared as a web application
Document ARIA Roles
The second ARIA role category is the Document, and this role describes the structure of the content on the page. In continuance, we’ve provided some of the most frequently used Document ARIA roles:
- Article: section of the page that is an independent part of a page, document, or a website
- Definition: a definition of a term
- Group: a set of user interface objects which aren’t intended to be in a page summary by AT
- Heading: a heading for a part of the page
- Column header
- List item
- Row group
- Row header
Widget ARIA Roles
- Alert: an important message or time-sensitive information
- Alert dialog: dialog that contains an alert message; the focus is on one element within the dialog
- Button: an input that allows for user-triggered actions when clicked
- Checkbox: a checkable input with three possible values – true, false, or both
- Dialog: an application window designed to interrupt the process of an application in order to enter an information
- Radio: a checkable input in a group of radio roles; only one can be checked at a time
- Tab: a grouping label that provides a mechanism for selecting the tab content that is to be delivered to the user
- Tab panel: a container for the resources that are connected to the tab; each tab is contained in a list
- Textbox: input that displays free-form text as its value
- Menu item
- Menu item checkbox
- Menu item radio
- Spin button
- Tree item
Abstract ARIA Roles
Lastly, we have the Abstract ARIA roles. These roles are the ‘life’ of all other roles. The abstract roles are the basis of how the other three roles are defined. They give meaning in context to the roles and help with adding new ones. These roles aren’t used in HTML.
The ARIA States & Properties
- ARIA-active descendant: identifies each active descendant of a composite widget
- ARIA-autocomplete: indicates if there are provided user input completion suggestions
- ARIA-checked (state): indicated the current “checked” state of the widgets
- ARIA-controls: identifies the element of the contents that are controlled by the current element
- ARIA-described by: identifies the element that describes the object
- ARIA-disabled (state): indicated the disabled elements
- ARIA-expanded (state): indicates if the element is currently expanded or collapsed
- ARIA-hidden (state): indicates the not visible elements
- ARIA-invalid (state): indicates the entered value that doesn’t conform to the expected format
- ARIA-label: defines a string value that labels the current element
- ARIA-labeled by: identifies the element that labels the current element
- ARIA-live: indicates that the element is changing, dynamic, and it will be updated; also describes which updates the users can expect
- ARIA-owns: identifies an element to help define a visual, contextual, or functional parent/child relationship
- ARIA-pressed (state): the current “pressed” state of toggle buttons
- ARIA-required: indicates that the user input is required on the element before a form may be submitted
- ARIA-selected (state): the current “selected” state of various widgets
When to Use ARIA?
After explaining the roles and the states & the properties of ARIA, let’s say a word or two about when to use ARIA. ARIA should be used when you want to:
- Add descriptive labels to HTML, such as links or buttons
- Announce events to screen readers
- Create relationships between elements
- Make forms accessible
ARIA – a Helpful Tool for People with Disabilities
Today, our blog focused on explaining some of the main things you need to know about ARIA – Accessible Rich Internet Applications. So, what have we learned so far?
Although all do not support it, it is still a significant step in technology that ensures these people can use web applications or web pages like everyone else. If you doubt whether to use ARIA, our answer would be yes! We hope this guide will help you learn what ARIA is and the benefits of using it.