Source Order, Skip links and Structural labels
Webusability has published the results of their research on Source Order, Skip links and Structural labels.
Our results suggest that:
- Most screen reader users expect at least the main site navigation to be presented before the informational content of the page.
- The source order of a web page is likely to be of little relevance to the majority of screen reader users.
- About half of the screen reader users we either tested or surveyed found the use of skip links on the test sites helpful.
- All the participants indicated the inclusion of structural labels identifying the different levels of navigation on a web page was useful.
Structural labels are something that I haven't seen discussed much in the way of accessibility but it makes sense. A structural label is a header like "Site Navigation" that helps identify the content that occurs right after that header. We tend to do this anyways but some headers, like the Site Navigation example I used, might not be necessary for sighted users. In which case, you can rely on CSS to hide those.
Source order is another interesting topic that could see some debate. While some say that putting content before navigation results in a more usable site for users of screen reader software, the results of this research seems to indicate that users are divided on whether it is actually easier. All respondants, however, indicated that they would expect to see the navigation before the content. On the flip side is search engine optimization where engines like Google apparently give preference to keywords found higher in the document. As a result, placing content first would give you better search rankings.
This kind of research is fantastic. It's easy to develop based on assumptions but it's even easier when you know it's actually making a difference.
Conversation
You've got to ask, though - how much of that is learned behaviour rather than what is actually more helpful? Of course they expect the navigation to be first, because 99% of developers have never considered there might be an alternative.
It really is great to see research like this. I have cut down on structural labels, as I'm not sure how to mark them up. For a number of reasons, I only include one
h1
on each page. Usually, navigation comes before content, and theh1
is in the main content. Therefore, if one views heading hierarchy as an outline of the page (as the W3C validator optionally does),h#
s are precluded for structural labels. What should I do?What do others do?
David Benton:
If your source order is such that the navigation appears after the content, and therefore after the h1, then using a h2 marker for the navigation bar would work fine but I guess you probably know that.
If your navbar appears before the content in source order, perhaps a p or div element would be sufficient.
David, I personally use my sole h1 for the site name/logo. Main navigation goes afterwards, then an h2 for the current page's title/description/etc. Logically, I could use an h2 for a navigational label. However, I'm not certain that it would be entirely necessary, since the site name appears immediately before the navigation, with another heading element appearing afterwards (similar to the study's birds site #2, but with the "site navigation" heading missing). I always place a label of some sort before sub-navigation/local navigation links, though.
If the general rule of thumb says that a main navigation list should be roughly 3-7 items long, placing it above the main content (rather than below) should have little impact on pagerank. It's the position of sub-navigational elements that should be of concern regarding pagerank, since they can be quite lengthy.