What is ARIA

What is ARIA and what are the main principles of ARIA

Internet access is a prerequisite for a successful platform. Unfortunately, many websites have accessibility barriers that make it difficult or impossible for users with a physical disability to see and interact with all elements of the website. If you want your site to be seen by all users, and you get more traffic and more conversions, you need to invest your time and effort into improving the accessibility of your web pages.

What is Internet Accessibility?

If the site is accessible, it is designed so that people with disabilities can interact with it and view all content. There are specific standards called the Web Accessibility Initiative (WAI) developed by the W3C to help website owners make their websites more accessible.

What is ARIA?

ARIA stands for Accessible Rich Internet Applications. ARIA is a set of special attributes published by the W3C that can be added to HTML elements to make web pages and applications more accessible to people with disabilities. These attributes do not provide functionality. They provide additional descriptions for assistive technologies (ATs) such as screen readers.

Main functions of ARIA

ARIA attributes include the following components: Roles, States, and Properties.

Roles

Roles define the type of user interface element. Roles are added via the role=”<ROLE TYPE>” attribute. After installation, the role does not change.

ARIA roles:

  • landmark
  • widget
  • document
  • abstract
Rules for using ARIA in HTML

Landmark ARIA roles

The landmark roles make navigation easier by breaking the page into different sections, such as search, banner, navigation, application, and so on. In this way, the screen reader is able to announce the start and end of each important role that helps people with disabilities identify different parts of a web page.

Widget ARIA roles

Widget roles are used to give meaning to user interface elements such as link, button, checkbox, and so on. Widget attributes allow people using AT to interact with the web page. For example, they can open and close tabs, fill out forms, and so on.

Document ARIA roles

The document roles contain descriptions of the structures that organize the content on the page, such as img, list, row, toolbar, and so on.

Abstract ARIA roles

Abstract roles are not used in the code. These are the attributes that the browser uses to give roles their meaning and concept, and to help add new roles.

States and Properties

States (aria-grab, aria-disabled, aria-checked, etc.) and properties (aria-label, aria-haspopup, aria-control, etc.) support ARIA roles. States can change on their own or based on user interaction, while properties usually don’t change after setting.

Categories of states and properties:

  • Widget Attributes
  • Live Region Attributes
  • Drag-and-Drop Attributes
  • Relationship Attributes

You can learn about each ARIA attribute in more detail on the ARIA W3C page. https://www.w3.org/TR/wai-aria/

Improve the accessibility of your website!

Now you understand what ARIA is and how it provides additional information to assistive technologies. By implementing ARIA strategies, you can ensure that people with disabilities can interact with your site.