WAI-ARIA stands for
Web Accessibility Initiative Accessible Rich Internet Applications.
It's a bit of a mouthful, but it's the umbrella name for this
specification that's centered on creating accessible sites and applications.
As I'm sure you can understand, it's more commonly referred to as ARIA.
Now, this specification which you are looking at here, contains many
recommendations for implementing greater accessibility on sites and applications.
One of the most important and noteworthy recommendations is what we're going to
look at in this exercise, and that would be the landmark role attribute.
So, if I scroll down through the table of contents,
I can see that we have a link right here for landmark roles.
I'm going to click on that, and jump to that section of the content.
Now, the roles attribute has been around for a long time, and
there are different categories of roles.
In this case we're looking at the landmark roles, and
you can see that we have application, banner, complimentary, content, info,
form, main navigation, and search.
Some of these look very similar to the new elements that have been added to HTML 5,
and that is really not an accident.
HTML 5 has attempted to sort of bring the same type of semantics that
have been available in these roles for a number of years.
So, what do these help us do?
Well, when you apply a role attribute to an element, that allows screen readers,
assisted devices, and other user agents to quickly scan that page content, and
then to navigate to those specific sections when required.
So, let's say, for
example, that on the page navigation, you give it a roll equals navigation.
That allows the screen reader to either jump to the navigation, or
skip that navigation very easily, because you've identified that content.
So, it's an very important part of the authoring content, because it's
going to make your content more accessible to a greater number of users.
So, if we look at the landmark roles, if we were to say click on one of them,
you get a nice definition for what that role is.
Banner, for example, is a region that contains mostly site oriented content,
it talks about things like logos, identity, site specific search tools.
It also talks about how banners should only be used once within a document.
So, in this exercise, we're not going to take the time to go through
every single one of these landmark roles, or other roles and read their definition.
But, I think it's a very important thing for all web authors to understand what
these roles allow you to do, and the semantics that they pass along.
So, in addition to the specification,
which I would highly recommend you check out.
At the end of the exercise,
I'm going to leave you with a couple of other references that can help deepen your
understanding of WAI-ARIA, in general, and how those roles can help you.
So, in order to use them in our own page, we're going to go back to
the structure.htm, this time found in the 04_09 directory.
And, what we're going to do,
is we're just going to go down through each of the elements, and
talk about which roles are suitable for specific elements.
The first element we have at the top of the page here is the header.
And, the role that we were just looking at, banner, is perfect for
this because this is sort of the header of the entire page.
And, it contains identifying introductory content.
So, to give it a role attribute, I'm just going to type in role equals, and
then inside that we're going to use banner for the header.
Now scrolling down a little bit I can see a nav element.
That nav element is perfect for navigation.
So, we're going to do role equals navigation.
And, as I scroll down, I'll find the main element, and
I'm going to give it a role of main.
Now, what's interesting about this is that some of these roles are named
exactly the same thing as the element.
So, the element's named to main, and its role is equal to main.
This may seem like overkill.
And, in fact, in the specification it tells you
that if there's an element that passes a long the same semantic value,
you should use the element and not the attribute.
In practice, however, most screen readers now don't yet
recognize elements like main.
So, for the time being, and
for the foreseeable future, it's actually a good idea to apply both of them.
Articles, for examples, can have a role of article.
And, as we scroll down, we can find other sections, for
example, the aside, which we'll give a roll of complimentary to.
So, complimentary passes along pretty much the same semantics that aside does,
which is this content is related to the content that it's found with.
And, then finally, I'm going to get down to the footer and
give it a roll of content info, and then I'll save that.
So, now in just a few short moments,
we've made our page significantly more accessible than it was before.
Screen readers and assisted devices can now scan this content,
and if they want to jump specifically to the main content, skip the navigation,
jump to the navigation, read an article,
they have all that information at their fingerprints.
So, there's a lot more semantics going on now then we had before,
even though we're using more semantic tags.
So, as an author,
one of the things that you want to do is get comfortable with these landmark roles
and when they're appropriate to use.
In addition to the specification that I talked about earlier,
there are two other sites that I want to pass along to you.
One is sort of a complementary site that the W3C has put together called,
Using WAI-ARIA in HTML.
You can see this was updated fairly recently at the time of this recording,
the 26th of June, 2014.
And, this basically, if I scroll down and
look at the table of contents, it's got rules on using ARIA,
when you should use them, where you should use them, different roles.
And there's this nice recommendations table down here at the bottom,
that basically says, okay, if you're going to use this element, for
example, article on the page, this is the role that you can associate with it, and
should you associate that role or not.
There's a lot of information here.
It's a little hard to read at first, but once you get used to using this table,
this is a really nice reference to bookmark, and come back to.
I want to also point out the blog for
the Sela Group, but you can find this at blog.selagroup.com.
And this is an article written by Steve Faulkner,
who is one of the leading experts in accessibility right now.
He published this in February 12th of 2013.
You can search for this, it's pretty easy to find.
This is an update of an article he wrote earlier.
This is talking about when it's appropriate to use them,
how you should use them, and at the bottom of this article, he has another table that
basically compares the ARIA landmark roles to the new HTML5 structural elements.
And, kind of tells you when they're is, equivalent element in HTML5, and
sort of how that element and roles should be used together.
So, I know this was just sort of a brief introduction into it,
but these ARIA roles are definitely worth your time as an author to explore.
They offer a tremendous amount of functionality for
very little investment on your part.
So, as an author,
I would encourage you to make them a default part of your authoring process.