Categories

(76)
(52)
(8)
(30)
(70)
(116)

What is ARIA: a great web accessibility tool

20.11.2019
What is ARIA
Author:

Web accessibility is a must-have feature of a successful platform. Unfortunately, many websites have accessibility barriers that make it difficult or impossible for users with impairments to see some content or interact with all website elements. If you want your website to be seen by all users, get more traffic, and increase conversions, you need to invest your time and effort into the improvement of web accessibility.

We have already written about 508 compliance and accessibility testing tools. Today, the web development team at InternetDevels explains what ARIA is and how ARIA attributes can make your website more accessible.

What is web accessibility?

If the website is accessible, it is developed in a way that lets people with disabilities use it and view all the content. There are special standards called Web Accessibility Initiative (WAI) developed by the W3C (the World Wide Web Consortium) to help website owners add accessibility to their platforms.

Check out this Website Accessibility Guide 2020.

What is ARIA?

ARIA stands for Accessible Rich Internet Applications. ARIA is a set of specific attributes published by the World Wide Web Consortium (W3C) that can be added to HTML elements in order to make web pages and applications more accessible to people with disabilities. These attributes don’t add any functionality, but they provide additional descriptions to assistive technologies (AT), such as screen readers.

ARIA key features

ARIA attributes include a few components, including Roles, States, and Properties.

Roles

Roles define the type of user interface (UI) element. It is added via a role="<ROLE TYPE>" attribute. Once set, the role will not change.

ARIA Roles:

  • landmark
  • widget
  • document
  • abstract

Landmark ARIA roles

Landmark roles make navigation easier by breaking the page into various sections, e.g. search, banner, navigation, application, etc. This way, a screen reader is able to announce the start and end of each landmark role, which helps people with disabilities to identify different parts of a web page.

Widget ARIA roles

Widget roles are used to add semantic meaning to the elements of the user interface (UI), e.g. link, button, checkbox, etc. With the help of widget role attributes, people who use AT are able to interact with the web page and get things done. For example, they can open and close tabs, fill out the forms, and more.

Document ARIA roles

Document roles provide descriptions for structures that organize content on a page, e.g. img, list, row, toolbar, etc.

Abstract ARIA roles

Abstract roles are not used in the code. These are the attributes used by the browser in order to give roles their meaning and concept, as well as help with the addition of new roles.

States and Properties

States (e.g. aria-grabbed, aria-disabled, aria-checked, etc.) and properties (e.g. aria-label, aria-haspopup, aria-controls, etc.) support ARIA roles. States can change on their own or based on user interaction, while properties usually don’t change once set.

Categories of states and properties:

  1. Widget Attributes
  2. Live Region Attributes
  3. Drag-and-Drop Attributes
  4. Relationship Attributes

You can learn about each ARIA attribute in more detail at W3C’s ARIA page.

Improve your website’s accessibility with InternetDevels!

Now you know what ARIA is and how it provides additional information to assistive technologies. By implementing ARIA strategies, you can be sure that people with disabilities are still able to interact with your platform.

In addition to ARIA, there are many other web accessibility tricks. Only by using them together can you make your website fully accessible. Let our web support team find out what exactly needs to be done to improve your website’s accessibility!

1 vote, Rating: 5

Read also

1

There are best practices for software deployment that make the process be smooth, safe, and reliable. Check them out in our post.

2

Today we explain what 508 accessibility is and how to make your website compliant with Section 508.

3

Images are meant to inspire your audience, but they also can hamper your website’s speed. Today, we are listing the best WordPress image optimization plugins.

4

We have prepared a bunch of WordPress lead generation plugins. They will help you reach out to your potential customers and spark their interest in your products or services.

5

Web accessibility is a must for a successful website in 2020. If you want your platform to gain more traffic and be loved by more people, ensure that there are no barriers for visitors to navigate...

Subscribe to our blog updates