- Beginner Recipe: How to markup figures and captions using the figure and figcaption elements
- Beginner Recipe: How to markup the date and time using the <time> element
- Beginner Recipe: Make a Native Toggle Widget with the <details> element
- Beginner Recipe: How to Correctly Use the <address> Element
- Beginner Recipe: Highlight Text with the <mark> Element
- Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
- Beginner Recipe: Measuring with the <meter> Element
- Beginner Recipe: How and When to Use the <s> element
- Beginner Recipe: Changes to existing elements
- Recipe: Wrapping links around elements
- Intermediate Recipe: Adding more semantic information with Microdata
- Intermediate Recipe: Using WAI-ARIA with HTML5
- Advanced Recipe: Markup an Article Page with Comments
From the Rough Cut
From the Rough Cut
From the Rough Cut
Intermediate Recipe: Using WAI-ARIA with HTML5
WAI-ARIA (Web Accessibility Initiatives Accessible Rich Internet Applications), also known just as ARIA, is a draft specification (w3.org/TR/wai-aria) that improves the accessibility of web applications and web pages. ARIA enables developers and content authors to develop rich internet applications and content that can be recognized and used by assistive technology. More often than not assistive technology doesn’t know what a widget is and rarely are they accessible with a keyboard. Also consider when content is updated with an AJAX call, assistive technology doesn’t know that the content has been updated, and so it cannot inform the user. Whilst we won’t be looking at all the possible solutions that ARIA offers, we will be looking at the Landmark Roles section of ARIA, and how we can add these new roles to our HTML5 document.
Landmark roles are "regions of the page intended as navigational landmarks". There are over fifty of them listed in the spec (w3.org/TR/wai-aria/roles#landmark_roles) but here are some that we would more likely use than others when marking up our HTML page
- role="article"
- role="banner"
- role="complementary"
- role="contentinfo"
- role="form"
- role="heading"
- role="main"
- role="navigation"
- role="search"
We add these to our mark up easily like this:
<form role="search"> .... </form>
This signifies that this particular form (there might be several forms on the page) is for searching.
Looking through the above list, some appear to have obvious pairings with our new HTML5 elements and when add them to our main page structure diagram from the previous chapter; we have a layout similar to that in Figure 2.10:
)
Figure 2.10 basic website layout with ARIA roles
Because we have used a logical structure to our markup, along with ARIA roles, one day assistive technology will be able to navigate easily to certain area of the page content. I say "one day" because at the moment there is limited screen reader support, not only for HTML5, but also for ARIA elements.
We are encouraged to use "skip-links" at the top of a document, very often hidden with CSS, which allow people navigating with a screen reader, keyboard or another assistive technology to quickly "skip" or "jump" to areas we think are important, usually the main navigation or the main content. The code would look similar to this:
<ul> <li><a href="#menu">Skip to navigation</a></li> <li><a href="#content">Skip to content</a></li> </ul>
But with ARIA, the landmarks will be highlighted to a user so they can cycle through the options.
HTML5 validation accepts ARIA roles and you can use the ARIA roles in HTML 4, but they cause a validation error, but does that really matter?
These roles also provide us with a nifty CSS hook which adds to our arsenal of selectors. You may have several headers or footers on a page, but you want to style the main page header and footer differently and you can target them in CSS like this:
/* to style all headers */
header {background: red; border: 5px dotted black;}
/* to style our main header, which likely has the site logo */
header[role=banner] {background: black; border: 5px solid red;}
/* to style all footers */
footer {background: blue; border: 5px dotted green;}
/* to style our site footer, which likely has copyright info */
footer[role=contentinfo] {background: green; border: 5px solid blue;}
We don’t necessarily have to use CSS this way but it’s a nice option to have and
There is so much more to the WAI-ARIA spec and HTML5 accessibility, so we encourage you to do some further reading (after you've finished this book of course) at the following sites
- w3.org/TR/wai-aria
- html5accessibility.com
- paciellogroup.com/blog