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 InternetDevels website development company 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:
- Widget Attributes
- Live Region Attributes
- Drag-and-Drop Attributes
- 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 website maintenance company find out what exactly needs to be done to improve your website’s accessibility!