What is ARIA? | Beginner’s Guide to ARIA for Accessibility | HostAdvice

What is ARIA? A Beginner’s Guide to ARIA for Accessibility

article bannerAs 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!

screenshot of Best Accessibility tool article

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.

Important
Important: ARIA is a set of attributes with one main goal – making the web applications and the web content more accessible to people with different disabilities who use assistive technologies (AT). The set of attributes can be added to HTML, JavaScript, and other related technologies.

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.

screenshot of W3C website

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.

Note
Note: Keep in mind that ARIA doesn’t add any new functionalities – it only acts as an additional descriptive layer for screen readers.

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.

Warning
Warning: However, the most important thing to remember is that you cannot change a role for a particular element once you set it.

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?

Verdict
Final Verdict: ARIA is a set of attributes that eases the internet journey of people with disabilities.

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.

10 Best VPS Hosting on Reddit: Most Recommended Providers 2024

Reddit is a popular source for hosting recommendations, including VPS hosting. With multiple conversations on choosing a service and dozens o...
4 min read
Ela Gal-Kfir
Ela Gal-Kfir
Digital Marketing Specialist

HostAdvice Speaks to ScalaHosting: An Interview with Chris Rusev

HostAdvice had the opportunity to speak with Chris Rusev, the CEO and co-founder of , a web hosting company that offers shared, cloud VPS, and res...
8 min read
Eddie Segal
Eddie Segal
Digital Marketing Specialist

Email Deliverability: What Is It, Key Factors & Best Practices

What is Email Deliverability? Think of it like mailing a letter and making sure it lands right in the recipient's hands, not lost or thrown...
17 min read
Ela Gal-Kfir
Ela Gal-Kfir
Digital Marketing Specialist

Email Marketing vs. Social Media: Which is More Effective?

What is Email Marketing? Email marketing is a  that involves companies reaching out to potential and existing customers via email ...
10 min read
Ela Gal-Kfir
Ela Gal-Kfir
Digital Marketing Specialist
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top