Introduction to ARIA for web accessibility

In this article I will introduce you to ARIA for web accessibility is and how you can implement it to help your community; especially people with a disability; to be included and to be able to access and navigate your blog or website. To not make anyone digitally impaired.

Disability is not uncommon, it is estimated that about 15% of the world’s population suffers from some level of disability; that is about a billion people, mind-boggling isn’t it?

While not all of the billion people’s ability is impaired to interact with the web it is nevertheless important to create an environment that is accessible to everyone.

What is ARIA for web accessibility

ARIA stands for Accessible Rich Internet Application and was created for the main purpose to provide accessibility and usability for users with disabilities who use AT (Assistive Technologies).

An example of an AT is a screen reader; this is a program that reads information out loud meanwhile it permits the user to navigate with a keyboard. A screen reader is the main tool for the visually impaired to navigate on the web.

In other words, ARIA just provides more explicative coding that the AT converts to information about parts of the UI, for example, menus, forms, and pop-up alerts.

Use ARIA for a raking boost

A website that offers accessibility usually uses good principles when coding and in web design and therefore works better on the computer and mobile devices that ultimately rank higher on SEO.

You may not know that accessibility is an important part of SEO; not offering accessibility may lead to ranking penalties from Google and other search engines. By making simple changes to your HTML source code can give your site an SEO boost.

How to implement ARIA

With only simple changes in your HTML coding you can make your website accessible; adding alt text to your images, utilize headings, and include keyboard controls for interactive elements.

HTML 5 made it very easy, just using the default syntaxes and using them correctly you already completed the first step of making your webpage ARIA friendly. However the screen readers don’t have the ability to see what’s on the site, yet, so some dynamic, interactive, and javascript elements will be skipped by the screen readers. This is where ARIA can help bridge those gaps.

HTML before ARIA

Always use HTML syntaxes primarily. HTML is, as you just learned, the foundation of web accessibility; and you should ONLY use ARIA when the semantics you are searching for is not available in HTML.

Screen readers work in such a way that they translate and read out loud HTML code that describes accessibility information for example a <nav> or <button> but not a <div>.

An example of how NOT to use HTML coding is to create a button using a <div>, you could ALWAYS use the correct HTML semantic, <button>.

ARIA roles

Elements on a page such as navigation bar, buttons, and links are defined as roles. The role function is to help screen readers tell the user how to interact with elements and what they do. Roles are divided into four different categories, landmark, document, widgets, and abstract roles.

Landmark roles

Landmark roles separate a page into different parts, menu, main content search bar, etc. To separate the page into different sections helps the user to easier find information and to navigate.

Document roles

The document roles define the content of a webpage, they define particular sections within a page, documents, articles, headings, and lists are some examples.

Widgets roles

Widget roles are elements and interfaces of a page, they often describe javascript-based interfaces or the more complex parts of a web page, some examples are alerts, buttons, and text boxes.

Abstract roles

The abstract roles are used by the browser and are the basis of how the other ARIA roles, landmark, document, and widget roles are defined. You don’t bother with them, one thing less to worry about.

ARIA testing

Once you implement ARIA on your web page I strongly recommend that you test it using a screen reader. You would want everything to go smoothly and to provide the best possible experience for all your users. To test your web page you download a free screen reader, eg. ChromeVox if you use Chrome, ideally blindfold so you can get the full user experience. 

These are the basics of ARIA, hopefully, it feels not as intimidating as it did in the beginning. Once you break down something into smaller parts it automatically gets much simpler to grasp. However this is just the beginning of ARIA, you would be surprised how much you can do and achieve with ARIA.

I strongly believe to include everyone and everybody can contribute towards that goal; whether you can contribute by using ARIA to make someone feel included or you achieve this goal another way does not matter, you made a difference.