Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:23Length:2.5 hours
  • Overview
  • Transcript

3.7 Introduction to ARIA

ARIA stands for Accessible, Rich Internet Applications and is important for helping assistive technology understand your web page without adding crazy markup or anything like that. ARIA can be used alongside your standard markup in HTML4.01 or higher. There are two main ways we’ll be talking about ARIA in this course. The first is the value of ARIA roles on a page and the second is ARIA states and properties.

Related Links

3.7 Introduction to ARIA

Hey, John Hartley here with TutsPlus and in this lesson of a Beginners Guide to Web Accessibility, we'll be taking a look at ARIA. ARIA is Accessible Rich Internet Applications. And it's important for helping assistive technology understand your website a little better without adding any crazy markup or anything like that. ARIA can be used alongside your standard markup in HTML 4.01 or higher. ARIA is just an acronym, and some people say area, some people spell it all the way out. But, it's easiest to just call it ARIA, that way you don't get it confused with an area tag or something along those lines. Now it can be easy to get carried away with ARIA, but really, you should just use it on as much as you actually need to. Don't overdo it with this. Now there are two main ways we'll be talking about ARIA in this course. The first is the value of ARIA roles, and the second is ARIA states and properties. First for ARIA roles, there are four types of roles. You have abstract roles, widget roles, document structure roles and landmark roles. Now I'm not gonna go through each of these individually. It's a pretty hefty document that would take about 92 total minutes to read. So I'll just kinda give you an overview here of the different types and a few of the big ones. We'll start with landmark roles. These probably make the most sense and are regions of the page intended as navigational landmarks. When we talked about voiceover and NVDA, these are things that you can use to kinda get through the site quickly. So you can find a form. You can find search. You can find the main content. You can find the navigation. And so that's what we see here. We have application, banner, complimentary, content info, form, main, navigation, and search. For banner, you'll see this as something at the top of the site generally, usually in the header. Something that's general to the site and not page specific. So think along the lines of branding for that. Role of content info is where you might see copyright information and links to privacy statements. The main role is just the main content of the document. Navigation role has links to another page. And you can have multiple navigations throughout your page. And then the search is just placed on a form and is used to identify an area that will build up search functionality for each site. So landmarks are generally where you'll hear people talk about implicit roles. What does implicit roles mean? Some HTML elements like nav and header for example, have default native semantics. Now those semantics are referred to as implicit. So in the nav element, in HTML5, you'll see navigation role. The char element gets the separator role. And header gets a banner role and so on. There's a whole list on the W3 site that you can actually look at and see what the default is and the states and properties that can be applied to it. So if you're still curious about implicit roles, go ahead and check that out. Really all that's good for is knowing that for nav, I don't have to have an extra role in there because it's redundant. That brings us to document structure roles. This list is a little longer, so I'll just show it here on the screen and go through a few of them. For article, it's not a navigational landmark but it could still contain important information for your site. Basically an article is, as you would think of it for a newspaper or a magazine. It can be nested inside of other articles but then they all pertain to whatever parent they are then nested in. The directory role could be used for something like the table of contents. The math role generally has a format with either MathML or TeX to convert the text in to mathematical equations. The role of math denotes that whatever is inside is math specific. Using the role of math opens assistive technology up to greater options for reading all of your mathematical formulas. Presentation role is one that you'll see quite often, and it's used when an element should not take on its defined implicit role and acts differently. Now we just talked about implicit roles. So this would be if you, for some reason, didn't want your nav to have a role of navigation. You would use role="presentation" to override it. And this is sometimes accompanied by ARIA labeled by, that way you're explaining why it's different from the default role. Something like role="presentation" would not be used on a span. It would be used on something that has that implicit role already. It could be used on a heading, and that would remove the implicit heading role. Row enhances the readability of tables, when used along with grid and grid cell. And that just makes it more readable for a screen reader. You just attach it to the tr, and that would be inside of the rest of your table, which also would have other roles attached to it. We'll transition onto widget roles, and this is a user interface. And this really is just defining user interface widgets that are a small part of a larger whole. So, these are all basically what you would expect them to be. We have link, it just defines a standard link. checkbox, button, option, these are all things that we've used before in longer forms. Then you have things like tooltip and timer, that are just declaring that they're a bit different than what their default values are going to be. Now there are widget roles that then contain the other widgets. So, the larger box that contains widgets inside of it. Grid, as we just talked about, used with table. And then tree is sometimes used with lists. And radio group just groups all of your radio buttons together. last is abstract roles, and abstract roles are the foundation upon which all other ARIA roles are built. So this helps organize the role taxonomy and places roles under specific umbrellas or categories. I'm not really gonna touch on those too much, but you can see that landmark is in there and that's one of the other roles. So, all of the roles that we talked about as a landmark role fall under that landmark umbrella. And that brings us to ARIA states and properties. So ARIA expands on describing content. Not going to go into too much detail like the ARIA rolls because ARIA could basically be it's own course. But the states and properties that are applicable to all elements are here on the screen. And as with roles, I'll go ahead and explain a few of these. So aria-busy, this is one that's a state. And it's a state for when an element is busy working on something. Normally fetching information from AJAX or working through a script of some sort. With aria-controls, that's used to identify content that the element itself controls. And think of a group of checkboxes, it controls that group. aria-describedby is a lengthier version of aria-labeledby. And it's important to remember that each of these has default values. So, it has values that you can set for them whether it be programatically, as you're working throughout your page. Or when you just first load the page, each of these, if you're using them you'll have some sort of value. For aria-hidden we've used this earlier in the course. And remember, aria-hidden="true" removes the element from being read by a screen radar. aria-label, used when you can't reference text it has elsewhere on the page. aria-labelledby points to another items that describes current elements and is good for forms. aria-live, now this goes on regions where text is going to change, and can be given values of off, polite, or assertive. polite will wait until the screen reader is finished speaking, while assertive will immediately interject with the new content. Last time I checked, there were close to 60 ARIA states and properties, so we'll stop our list here. The properties and states are generally changed using scripting. So a single page application that's all JavaScript base could still pass compliance, but would have to lean pretty heavily on ARIA states and properties to keep the screen reader reading. Keep in mind that ARIA should not be abuse. But when used properly, can greatly help the readability of your site to screen readers. In the next lesson, we'll take a look at JavaScript and how to avoid accessibility issues when scripting.

Back to the top