New to ARIA tags? In this article, we’ll bring more depth on what the ARIA tags are and where to start using them.
Quick history about ARIA
The main 3 technologies behind the web are HTML, CSS and JavaScript.
Originally, HTML was pretty straightforward with only 18 elements and web pages were pretty static. As HTML evolved over time, so did CSS and JavaScript and more and more web pages are acting more like mini applications where content isn’t just staying on the page. It’s changing and we have to be able to provide information to screen readers about what is changing and also give a little more context of how that HTML is being used.
The thing is, ARIA standards are being constantly updated by the W3C. In fact, if you go to their website, you will see that there is a draft version available and it goes to show that they are still adopting new suggestions.
If you’re a beginner however, we don’t recommend that you start there. There is a wealth of information on that website but it might not be the most organized for somebody that’s just trying to jump in and start figuring their way around.
So why use ARIA?
ARIA can be used to make your website more accessible. Good semantic HTML improves the accessibility of web pages. The goal is not to always have to use ARIA if you can use HTML elements. ARIA should be used to provide additional context where you can add in more information for screen readers.
Adding ARIA tags shouldn’t affect the render of the page for sighted visitors. It should really be for people using a screen reader to give that screen reader additional context.
Reasons that you would definitely want to consider adding ARIA tags to your website would be if you have the content on the page changing or if there’s a state of something expanding. That would be useful to be able to alert the screen reader to tell its visitor that something has changed.
Also if you’re using outdated HTML, it might be a good stopgap until you do a redesign to use better HTML. Not necessarily saying that HTML was done wrong but we’ve all been in the place where you have turnover and things were done in a way that there were limits back five years ago of how you develop something.
Maybe their predecessor did something the way that it was expected back then but now, there are better ways of doing it. But what if you don’t have time to go through a full redesign? That’s where you can use ARIA and incorporate that into your existing HTML to give more context to what’s going on and to make use of some of the newer technologies available.
Will your web page be accessible if you don’t use ARIA?
No, not necessarily. It’s possible that you could make your web page more accessible. Accessibility is not a black-and-white thing. It’s a sliding scale and lots of different shades of gray.
ARIA can be used to make things better. There’s not really any drawbacks to adding ARIA as long as you do it correctly. We strongly suggest that before you deploy certain ARIA tags, make sure that you fully understand them because there specific cases that you will want to check your website and make sure you’re avoiding it. If you’re a novice, it could cause the keyboard shortcuts that are natural to web visitors not to be able to be used.
ARIA Basics
The three main terminologies you should know are the following: roles, properties and states. In this article, we will only covering roles and the remaining two will be discussed on the next part.
Roles
These will not change once they are defined within the source of the page. They are always in lowercase so if you see capitalization in any of the roles, there’s something off and it’s not implemented correctly.
There are four types of ARIA roles:
1. Landmark roles
This is like the low-hanging fruit and the easy place to start. Landmark roles add functionality for screen readers to navigate between sections of the webpage.
You can use the landmark role to link from the top of your page to include jumps for keyboard navigators but screen readers will pick-up on the landmarks and give them as options for navigating through content.
If you add landmarks to your page, you need to mark-up all areas of the page with perceivable content with an appropriate landmark. It’s worth noting that when you go to add your landmarks, the first thing you should do is look at your web page and print it out or draw boxes around it, and then write on it what landmarks you think those areas should be. Just make sure that each area is covered by a landmark.
Just because you don’t have “role=”, doesn’t mean you’re not already using a landmark. In fact, many HTML 5 elements define ARIA landmarks by default so if you’re using HTML 5, it’s possible that you already have some landmarks within your site.
It is important to understand the meaning behind the ARIA roles being associated with HTML 5 elements automatically when creating your HTML so you’re not confusing users. Adding an aria attribute to an HTML 5 element that has ARIA roles built in is redundant. So if you’re using an HTML 5 element, you don’t have to add “role=”.
Here are the common landmark roles that we encourage to start using if you’re not using HTML5 elements that have the same meaning:
role=”banner” – This could be a confusing connotation. It doesn’t necessarily mean that it is the banner image. Usually, your banner area is going to be where your logo is or just that top bar on your website.
role=”navigation” – If you’re using “nav” element in HTML 5, you don’t need to add role=”navigation”. But role=”navigation” is a great way to be able to provide jumps to people to your different navigations. So whether it be your main site navigation, or you have a department navigation, you can have multiple of the same role on a page but this can give people an easy way to traverse your page, especially if they’re using a screen reader.
role=”main” – This will be where your main content is contained. Remember that you only have one role=”main” on your page and that’s the only hard and fast rule there.
role=”complimentary” – This is usually your sidebars. It can be additional information that’s related to the main content. A lot of people have news stories but they’ll have related stories sections so that might be a complementary section.
role=”contentinfo” – This is going to be your footer and actually, “footer” element has “contentinfo” role built into it. This would be your copyright statement or anything that contains your footer links.
role=”search” – This is a great way to give somebody an easy way to quickly jump to your search menu.
role=”form” – If for some reason you’re not using a form element, you might want to add this to the code that you’re provided from a third party service.
role=”region” – This is like a “complimentary” but a little more generic. If you use role=”region”, you’ll need to provide a label for that region because it’s just too generic.
Take note that using a landmark more than once on a page is totally fine. Below, we have an example.
Hypothetically speaking, let’s say you’re using an old bootstrap template that didn’t have HTML5 elements like “nav”, you could have role=”navigation” and here is how an example of how you would provide label to the navigation so that people would know which navigation it is.
These are the HTML 5 elements with built-in ARIA roles:
aside – This is a complementary role.
footer – If it’s directly within the body element, it is treated as “contentinfo” role but if it’s tucked into something else, that role no longer applies and you could add a custom role for it.
form – If you use the “form” element, you don’t need to add role=”form”.
header – If you have the “header” element, you don’t need to add role=”banner”. It is a lot like the footer where if it’s not directly within the body element, you should probably add the role that you are intending for it.
section – This has a region. When it has an accessible name using aria-labeledby or aria-label. So if you do use section, you should still add that label because it is treated as a generic region.
2. Document structure roles
These are a little more granular and are the ones that we don’t typically think you should be using if you have good HTML.
3. Widget roles
Widget roles lack equivalent semantics in HTML. This is where you can get deep into using roles within your HTML. They can be used on their own or as part of a larger composite widget. Widgets are really where you’re going to be building custom components within your website.
Think about mega menus that have dropdowns, tabs or accordions. A lot of us make the tab or accordion code from some source that gives us the JavaScript and you just plug in the JavaScript and then the CSS that they give you and you use the HTML element as they document.
You can add ARIA roles to those things. The one thing to note though when you’re developing widgets is that the roles are going to be static and then the states are going to change and you will have to do some custom programming for that.
Putting in the widget roles isn’t that hard to add to your HTML that you’re given by a third party. Different widget roles that exist are “alert”, “alertdialog”, “button”, “checkbox”, “dialog”, “gridcell”, “link”, “log” and there’s lot more.
The ones that are most often in higher education websites are “tab” and “tabpanel”.
4. Abstract roles
If you’re a beginner then you don’t need to consider or concern yourself with this. They’re used for actual application development and not for marking-up HTML. They don’t provide extra accessibility information to screen readers directly from the HTML and there would have to be a lot of additional programming.
This ends of the first part of our basics of ARIA tags so that you won’t be overwhelmed with too much information. In the second part of our article, we will continue with properties and states which are most commonly referred to as ARIA attributes.
Add Comment