In my previous posts I’ve created the basic HTML and the Microformats for the CSSoff contest. Microformats were used to help machines understand the contact information contained in the footer of the Triple Dare web page. The next step in making our web page more accessible is to add WAI-ARIA roles and more specifically Structural Roles that Facilitate Navigation with Assistive Technologies (not my words but that of the w3.org’s WAI-ARIA best practices document).
WAI-ARIA roles are intended to help create usable, accessible and logical layouts for people with visual or leaning difficulties. So how do we add this to our website? Let’s dive right in.
In order to help assistive technologies recognize the different sections in our web page (navigation, header, footer, etc.) it is imperative to label various sections of the site with navigation landmarks. These landmarks are created by adding the role attribute in our HTML tags. For example, defining the role of navigation in our nav tag (<nav role=”navigation”>). Different roles allow assistive technologies to navigate through various sections. Some screen readers seem to be able to read the new HTML5 attributes while others cannot. Unfortunately the use of these technologies to read and navigate through websites is pretty crude as compared to the experience of a sighted user. With a bit of searching, I managed to find a website that shows the landmark capabilities of several screen readers.
There are quite a few different WAI-ARIA roles but, according to my research, there are a few standard regional landmarks. Focus will be on a few of the more popular roles (navigation, banner, main, contentinfo, region, form, button ). Fortunately adding roles in general is pretty intuitive. For example, the navigation role is used in our nav tag.
<nav role="navigation"> <ul> <li><a href="#obstacles">Obstacles</a></li> <li><a href="#prizes">Prizes</a></li> <li><a href="#contestant">Be A Contestant</a></li> <li><a href="#top">Back To Top</a></li> </ul> </nav>
The banner role is used for a region that contains the prime heading or internal title of a page. In the Triple Dare website the banner role will be added to the header HTML tag.
<header name="top" id="top" role="banner"> <hgroup> <h1>Triple Dare</h1> <h2>The Web’s Messiest Challenge!</h2> <h3>Airing Thursdays on the Knucklelodeon Network™</h3> </hgroup> </header>
The next area to tackle is the main content of the website (Obstacles, Prizes and Be a Contestant). The main role is used to encapsulate our main content. The main role should only used once on your page. In the case of the Triple Dare site a <div> container will encapsulate the Obstacles, Prizes and Be a Contestant sections with the role of main.
The region role is added to each of the three sections (Obstacles, Prizes and Be a Contestant). The region role is used with our sections to represent a generic section of a document (similar to the section html5 tag). From my readings and research, I’ve come to the understanding that when a region is defined the attribute aria-labelledby is added to allow screen readers to identify the section heading. The aria-labelledby value looks for the id attribute (the h1 tag on the Triple Dare website) to label the region with a header. Some assistive devices use the title attribute to identify the heading so we’ll add that in there as well. The aria-labelled attribute searches inside it’s container for an id to create a header. The name and id attributes (which were previously in the section tag, have been moved to the h1 tag to allow screen readers to identify it as the section header.
<div role="main"> <section role="region" title="obstacles" aria-labelledby="obstacles"> <h1 name="obstacles" id="obstacles">Obstacles</h1> <ul> <li> <a href="img/lg-the-tank.png"> <img src="img/th-the-tank.png" alt="Illustration of a pink rectangular pool with white icing and sprinkles"> <p>The Tank</p> <p>Frosting with sprinkles all over</p> </a> </li> ...
Another small alteration to the web page involves images. After using VoiceOver on my Mac to read the Triple Dare web page I noticed that my alternative text wasn’t very descriptive (more on using VoiceOver later in this article). My alt text now describes the image in more detail so non sighted uses can get a better idea of the images.
Roles were also added to the form in the Be a Contestant section.
<pre><section role="region" title="contestant" aria-labelledby="contestant"> <h1 name="contestant" id="contestant">Be A Contestant</h1> <form role="form"> <label for="name">Your Name</label> <input name="name" placeholder="Your Name"/> <label for="emailaddress">Email address</label> <input type="email" name="emailaddress" placeholder="Email Address"/> <label for="team">Team Name</label> <input name="team" placeholder="Team Name"/> <label for="team-color">Team Color</label> <select title"Team Color"> <option value="">Team Color</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="ultra-violet">Ultra-violet</option> </select> <label for="gender">Gender</label> <select> <option value="">Gender</option> <option value="male">Male</option> <option value="female">Female</option> <option value="hermaphrodite">Both</option> <option value="intersex">Neither</option> </select> <label for="photo">Profile Photo URL</label> <input type="url" name="photo" placeholder="Profile Photo URL"/> <input type="submit" value="Submit entry!"> </form>
And finally the contentinfo role is applied to the footer of the page. Contentinfo is used to define a large perceivable region that contains information about the parent document, things like copyright and other typical footer information.
And here’s the obligatory “what we have so far”
Testing your roles on the Mac
On a Mac computer or any other Apple, device VoiceOver makes it easier for the blind and those with low-vision to use a computer. It also allows us to preview what people using such technoloties will hear when navigating the Triple Dare webpage. The software isn’t perfect by any means but it’s included in the OS, doesn’t cost anything, and gives us a great indicator as to what people with visual difficulties face when navigating a website.
Setting up VoiceOver
In the Finder, access the System Preferences. In the System Preferences, choose Universal Access. Ensure that the Seeing tab is selected and click “Open VoiceOver Utility”. When that window opens, select Web from the side menu. Under “When navigating web content use:” choose Group navigation. Ensure that “Navigate Images” and “Only navigate images with a descripoint” are checked. You can now close the VoiceOver utility window and the Universal Access info.
Using VoiceOver in Safari
On your Mac, launch Safari and load what we have so far in the browser. Enable VoiceOver by hitting Command + F5. The computer should start speaking “VoiceOver On. Safari. Window” It will then read the title of the site and then say “HTML Content has Focus”. You should also see a thin black border around the window portion of the browser.
We can now navigate through our website. Press and hold Control – Option – Shift and the Down Arrow (not Command). This will drill down to the navigation section of the website and VoiceOver will say “Start Interacting with HTML content”. To navigate through the sections use Control – Option + either side arrow (left or Right). You can then dive deeper into the HTML with Control – Option – Shift and the Down Arrow. Sadly, VoiceOver doesn’t let us properly navigate our 3 regions (Obstacles, Prizes and Be a Contestant) but you can navigate through every HTML tag in those sections one at a time. Moving up a level in the HTML is as easy as hitting Control – Option – Shift and the Up Arrow.
Once you’re done listening to the site, turn off VoiceOver by hitting Command – F5.
Here’s a quick cheat sheet.
Command – F5 = Turn VoiceOver on and off
Control – Option – Shift + Down Arrow = Start interacting (dig down into selected section)
Control – Option – Shift + Up Arrow = Start interacting (dig up out of selected section)
Control – Option + Left or Right Arrow = Navigate between sections or words (depending on what you are interacting with)
Control – Option + A = Read highlighted text