WAI-ARIA Roles5:24 with Aisha Blake
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.
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 up