What is ARIA Markup? – A Beginner’s Guide

Accessibility is a major issue in today’s online world. These days, having a website that many people struggle to navigate is considered unacceptable.

ARIA markup is a step in the right direction. It’s an answer to the question how you can make your website more usable for those with disabilities.

What is ARIA? A set of code attributes that expand HTML’s capabilities and make it easy to optimize your site for screen readers. It does this by making parts of your website visible to assistive technology, that otherwise, these devices wouldn’t be able to interact with at all.

Ready to include ARIA in your website? Or just curious to learn more about it? In this article, we’ll explain what ARIA is, how to make your site accessible, and give you the resources to learn more about this invaluable technology.

Why Make Your Site Accessible?

Some people might wonder: why care about web accessibility? Is it really worth putting in the resources to learn specifications like ARIA? Is creating an accessible website really making much of an impact?

Disability Isn’t Uncommon

In actuality, yes. Disability isn’t so rare. 18.7% of Americans have a disability of some form. While not all of these will impair their ability to interact with the web, that’s still a staggering number, and it only includes people from the US.

statistics of internet users with disability

3.3% of Americans also have a vision impairment. This means they could have trouble seeing websites and may rely on tools like screen readers. That’s also a significant percentage of your potential user base and includes the elderly and those with temporary disabilities.

People with impairments need the Internet just as much as everyone else. Many use it to shop, socialize, and find information. Sometimes it’s their primary, or even their sole way, of doing so.

54% of disabled people are online, and while this number is smaller than compared to the general population, it’s still a significant portion.

Plus, it’s 2019. In this day and age, we should strive to include every user group as well as we can. Giving people with disabilities unrestricted access to browse the web should be a major goal for any web developer.

Plus, it even comes with personal benefits.

Accessibility Overlaps With Good Web Design and SEO

A site that follows accessibility standards is often one that’s using good web design principles, works better on mobile devices, and ranks high in SEO.

For instance, one of the WCAG standards includes not auto-playing long clips of audio without a way to stop the sound. This is already a big no-no for web designers. Another standard is providing enough color contrast between elements. Colors that blend together on a website are often an indication of a bad palette.

As a consequence, following accessibility guidelines leads to a site that looks better and is more user-friendly. Can anybody say win-win?

wireframes as example for web design

Accessibility is also an important part of SEO. Shirking it can lead to ranking penalties from Google and other search engines. But adding alt text to your images, including keyboard controls in interactive elements, and using headings both help disabled visitors and give you an SEO boost.

As you can see, making your site accessible is a good idea as it has an impact on all user groups. If designing a website that offers everyone a good experience is your aim, then you should do everything you can to avoid excluding people with impairments.

One thing you can do is implement ARIA into your design, so people with screen readers can better find their way through your site.

What are Screen Readers?

A screen reader is a program that reads the content of a page or document out loud while allowing you to navigate it using the keyboard. Anyone can download one onto their computer, and there are a variety of programs available free or paid.

Some of them also help navigate the desktop and other programs as well as websites. They may enlarge text and images for the visually impaired, and some can output to a refreshable braille display. This guide explains how screen readers work.

Without screen readers, visually impaired people would struggle to use a computer and the Internet, or be unable to use them at all.

ARIA markup plays a big part in how these tools function. It provides extra information, giving them more options and the ability to interact with parts of the UI that would otherwise be invisible to them.

But what exactly is ARIA, and how can you improve your website by including it? Let’s give a quick breakdown on this specification and how it works.

What is ARIA?

ARIA stands for Accessible Rich Internet Applications. It is a set of attributes that provide extra context for how a web page is laid out and what’s inside it. In other words, they give more information about parts of the UI, such as popup alerts, menus, or even whole sections of the page.

If you have ever looked at a website with the browser developer tools, you might have seen it before.

To quote the Mozilla documentation: “The complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated.” So, basically, this part of the markup lets screen readers know about what part of the layout they are dealing with.

Consequently, ARIA allows you to create accessible interfaces and widgets without even changing how they look or act on the front end. Most people won’t be able to even tell the markup is present. But add a little code, and screen readers will be able to seamlessly interact with your interface.

When is ARIA Really Necessary?

By default, screen readers can understand most HTML and HTML5 elements. If you have a very simple, static site, you may not need to implement ARIA at all. But some Javascript, dynamic, and interactive elements can’t be seen by screen readers, and this is where the markup comes in.

On the other hand, you shouldn’t use ARIA when what you’re defining is already accessible. For instance, the HTML

Sharing is Awesome, Thank You! :)

Share this Blue 37 post with your friends