Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Web Accessibility Compliance!
You have completed Web Accessibility Compliance!
Preview
There will be times when even our semantic tags don’t convey everything we want to about a particular element. WAI-ARIA stands for Web Accessibility Initiative Accessible Rich Internet Applications. It allows us to craft our elements’ functionality in new, accessible ways. Using WAI-ARIA roles is particularly useful in clarifying the functionality of elements to screen readers.
Further Reading:
- Inclusive Components - A blog about designing inclusive web interfaces, piece by piece.
-
WAI-finding with ARIA Landmark Roles
-
Using the aria-label attribute
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
There will be times, of course,
when even semantic tags don't convey
0:00
everything we want to about
a particular element.
0:05
WAI-ARIA stands for
0:08
Web Accessibility Initiative
Accessible Rich Internet Applications.
0:09
And it's meant to be an extension
of what we can convey using HTML.
0:15
The spec outlines how we can permit
all users to move beyond simply
0:18
understanding the content we offer and
actually use our applications.
0:22
All your rules can be split into
four categories, landmark, document,
0:29
widget, and abstract.
0:33
There's a lot to talk about here, but
we'll focus on the landmark, AKA big and
0:36
important rules in this video.
0:40
You as the developer add WAI-ARIA
landmark rules as attributes
0:43
to the relevant element or elements.
0:47
These rules describe the elements
they're attached to, and
0:50
may even add functionality that
wouldn't be there otherwise.
0:53
We'll take a look at a few examples,
0:57
using the sample site we
worked on in the last video.
0:59
But first let's have a look at all
the landmark roles available to us.
1:02
The banner role works as
the header of the page.
1:06
This should include the primary heading or
title of the page and
1:10
the majority of the element's content
should be related to the site as
1:14
a whole rather than specific
to the page itself.
1:18
Navigation contains a menu on the page.
1:21
Note that just as it is
when using the nav element,
1:25
more than one element on a single page
may be given the role of navigation.
1:29
In that case,
1:33
you'll want to use the aria-label
attribute to distinguish between them.
1:34
You'll find the link to more info
on the aria-label attribute in
1:39
the teacher's notes.
1:43
Main is used to convey that the content
contained within is the main content.
1:45
The meat and potatoes of the page.
1:50
To go often literally alongside the main
content, we have the complementary role.
1:52
Content appropriate for
this rule supports and
2:00
is related to the main content, but could
be understood even if viewed separately.
2:02
This role has many similarities
to the aside element.
2:08
The content info role should be applied
to a single element that holds metadata
2:13
about the parent document,
such as copyright information, terms and
2:18
conditions, or footnotes.
2:22
This role will generally be
given to a footer element.
2:24
From here,
the rules start to get a bit trickier.
2:27
There is a form landmark role,
but this is not recommended for
2:32
use with the form element.
2:36
But why, when all the others we've
talked about seemed equally redundant?
2:39
The form element, unlike any of the
semantic elements we've discussed in this
2:43
session, already reliably exposes
the necessary cross browser functionality.
2:48
And therefore,
does not require an additional role.
2:53
Better to use this one on a div that
contains form components in the absence
2:57
of a form element.
3:01
Even more specific is the search role,
which should be applied to a form
3:03
used to perform an internal
search within the site.
3:08
Be very careful about using the last
landmark role, application.
3:11
This represents a self-contained
piece of software and
3:16
navigation controls away to be
defined by said application.
3:20
It's outside the scope of this
course to discuss exactly how to
3:25
properly configure your application for
use with this role.
3:28
So we'll leave it at this for now.
3:31
Don't use the application rule,
unless you know what you're doing and
3:33
have processes in place to adequately
test the accessibility of your product.
3:37
Jumping back into our
example project from earlier,
3:42
we'll start at the top of
the page with our header element.
3:45
The first role we'll
add is the banner role.
3:48
This is sometimes described
as the masthead of the page.
3:52
While we might have several header
elements on a single page, one for
3:56
the page itself, perhaps one for
each of our posts, and so on.
4:00
There will generally be just
one each of the landmark roles.
4:04
So there's one banner,
which some assistive technologies
4:08
will use to allow the user to
skip over navigation per page.
4:12
As we move on through, we'll find a few
more places where we can add roles.
4:17
There's one for our navigation and
main elements, and
4:22
our aside gets the role of complementary.
4:25
If your footer contains copyright
information, terms and conditions, or
4:39
other legal information, they'll probably
want to add the contentinfo role.
4:43
While these landmark roles can help
to make our markup as robust and
4:50
accessible as it can be,
remember to use ARIA roles sparingly.
4:54
At this point in time,
if you can accomplish the exact same
4:59
things with plain old HTML,
that's going to be your best bet.
5:03
The ARIA spec isn't limited to
describing what different elements are.
5:08
But it's also used to describe
relationships between different elements
5:12
and the state of elements.
5:17
I've listed a few really
solid resources for
5:19
learning more about WAI-ARIA
in the teacher's notes.
5:21
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up