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 was developed by an international community known as W3C – World Wide Web Consortium. W3C had a working draft on September 15, 2008, which later was completed and was recommended on March 20, 2014. However, ARIA still doesn’t have support from all technologies. But with the growth of support, ARIA is now supported by browsers, applications, AT (text-to-speech, screen readers, magnifiers, etc.), and JavaScript toolkits. Why it is so difficult to achieve complete support is because this set of attributes is very complex.
Almost anyone asks themselves a great question: What would happen if ARIA never existed? Well, without WAI-ARIA, there would still be some functionalities that people with disabilities couldn’t use, especially people who can’t use a mouse or depend on screen readers. So, you can definitely say that ARIA is an excellent set of attributes. The attributes enable accessible navigation landmarks in HTML4, JavaScript widgets, form hints, error messages, provide live content updates, and much more that come in hand for those who have some kind of disabilities. What’s also important to know about ARIA is that it is safe, and you can freely use it without worrying whether it would change something. This set of attributes doesn’t affect how the elements behave in browsers or how they are displayed.
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:
- Roles
- States & properties
ARIA’S Roles
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
- Document
- Widget
- Abstract
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
- Img
- List
- List item
- Math
- Note
- Presentation
- Region
- Row
- Row group
- Row header
- Separator
- Toolbar
Widget ARIA Roles
The main function of the Widget roles is to describe JavaScript-based interfaces or the more complicated parts of the website’s interface. Also, the Widget roles are used when the HTML doesn’t define some of the elements. Let’s see what the Widget ARIA roles are:
- 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
- Gridcell
- Link
- Log
- Marquee
- Menu item
- Menu item checkbox
- Menu item radio
- Option
- Progressbar
- Scrollbar
- Slider
- Spin button
- Timer
- Tooltip
- 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
The ARIA States & Properties support the ARIA roles included in some web pages. The properties describe relationships with other elements, and they don’t change once they are set. On the other hand, the states are mostly updated with JavaScript each time a user interacts with the page. Screen readers announce the changes. We managed to provide some of the most frequently used states & properties, so let’s take a look at our bullet list:
- 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.
