What is ARIA, or another useful web accessibility tour
The times of the accessible World Wide Web have come. Either a website follows web accessibility guidelines, or it fails to be competitive in many aspects.
Every guide to web accessibility always mentions the term “ARIA.” We decided to answer the question “what is ARIA?”. We will also take a glimpse at how it works to make websites accessible.
In a nutshell: why web accessibility matters
Some website owners may still think it’s optional to make their website accessible to users with impairments. We have dedicated a whole post to explaining why website accessibility is important for your business, so here is a very brief overview:
- The world will know whether your brand cares about modern standards and is inclusive of all audiences… or not!
- Your business will be protected from accessibility lawsuits under legislation like ADA (the Americans with Disabilities Act).
- Your audience could increase significantly. 26% of adults in the US have some form of disability (stats by the Center for Disease Control and Prevention).
- Best accessibility practices overlap with ones in SEO. ALT text for images, clear structure of headings, video captions, and much more will help your site rank higher.
- Think of conversion growth thanks to accessible web forms and CTA buttons. Their ease-of-use works with absolutely every audience.
What is ARIA in web accessibility?
It’s pretty clear with the importance of web accessibility, but what, exactly, is ARIA? ARIA, or Accessible Rich Internet Applications, is a set of attributes that can be added to the web page’s HTML markup.
These provide additional information about the site to assistive technologies like screen readers. This is especially helpful with dynamic and interactive UI elements created with AJAX, JavaScript, etc.
ARIA was published by the World Wide Web Consortium (W3C) in 2014, although it first appeared as a draft back in 2008. Now it is a technical specification. The full name is WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications).
Why is ARIA important?
Thanks to WAI-ARIA, users who rely on assistive devices can interact with parts of the UI otherwise inaccessible to them. Small bits of code do a lot of work by letting anyone understand or use:
- popups
- alerts
- error messages
- button dropdowns
- live content updates
- form hints
and many other UI elements.
Just imagine users who cannot see the page or hold a mouse getting better user experiences with ARIA.
Notes on ARIA use
WAI-ARIA expands but does not replace the native markup capabilities. It should only be used with elements that have no native ways to provide accessibility — in other cases it’s redundant. For example, HTML already has the <button> element already supported by screen readers, so no ARIA attribute is needed.
This was the first rule of ARIA use created by W3C. Let’s review all 5 of them:
- If you can use a native or built-in element, use it instead of ARIA.
- Do not change the native semantics unless absolutely necessary.
- All interactive ARIA control should be available for use with a keyboard.
- Do not add role=“presentation” or aria-hidden=“true” on focusable elements.
- All interactive elements should have accessible names.
The types of components in ARIA
ARIA components comprise three main types: ARIA roles, ARIA states, and ARIA properties.
ARIA roles define the type of the UI element and say what purpose it serves. In their turn, they fall into 4 subcategories:
- Abstract roles are used by the browser and should not be used in the code.
- Document structure roles provide descriptions for page sections (e.g. listitem, toolbar, document, etc.)
- Landmark roles break the page into different sections for better navigation (e.g. form, banner, main, search, etc.)
- Widget roles define the elements (e.g. alert, checkbox, tabpanel, etc.)
ARIA states and properties provide support to ARIA roles. For example, an ARIA role could be “checkbox” and an ARIA state “aria-checked.”
- States change dynamically as a result of the interaction with the user.
- Properties usually do not change once set.
Improve your website’s accessibility now!
Hopefully, our answer to the question “what is ARIA?” had been clear, just like its mission. However, in the arena of web accessibility, ARIA is just one player, and the best results are achieved by teamwork.
So, in addition to ARIA, no one should forget about other web accessibility tips and tricks (higher contrasts, responsive web design, descriptive ALTs, keyboard accessibility, audio transcripts, and so on).
Our website support team is ready to improve your website’s accessibility. We can accept individual tasks, or do complete accessibility testing to know where your website needs improvement.