Easy ARIA Tip #4: Landmarks

Yes, they’re back! This is the fourth Easy ARIA Tip in a trilogy of Easy ARIA Tips. :)

This week, WebAIM published the results of their second screen reader survey. One of the things to note for me was that not many users seem to be aware of a feature in the WAI-ARIA (Accessible Rich Internet Applications) specification called landmarks. This article aims to provide an easy to follow guide to implement landmarks in a matter that makes sense, in the hopes that more folks will start using them in their web projects and more screen reader users will take notice and utilize them in their daily surfing experience.

What the heck are they?

WAI-ARIA landmarks are a new method of providing easy navigation to certain points or hot spots on a page. Traditionally, this is being accomplished by providing visually hidden “skip links” to various anchor points. A commonly encountered one is the “skip to main content” or similarly named link that provides a quick way to navigate past all the navigation, search etc. features a site may have, and start reading directly at the main content of a page.

However, as the above cited survey results show, skip links aren’t nearly as important for most screen reader users as a good heading structure is. Skip links are usually also very useful for keyboard users (who need not necessarily be screen reader users).

However, one of the biggest problems is that “skip links” aren’t consistent. They might be called “skip to…” or “jump to …”, “skip past …” etc., and they may vary in what features they provide. This may also cause complaints for usability. I’ve been demoed pages that provide 20 or so skip links at the top before an actual link to a site feature is encountered. Needless to say, it didn’t provide a skip link for the skip links. :)

WAI-ARIA attempts to rectify that by standardizing a certain number of navigational anchor points to allow easy and quick access to portions of a page that are frequently needed.

How are they added?

Landmarks are added to a page by specifying the role attribute on certain HTML elements. If you view the source of this blog page, for example, and search for the word “role”, you’ll find it added to some HTML elements that start blocks of interest. The addition is very simple, the only thing that really needs to be done is give some thought about placement of the landmarks.

Screen readers such as JAWS version 10 and above, Orca, NVDA from version 2009.1beta and above recognize WAI-ARIA landmarks in Firefox 3.0+ and IE 8. They usually provide one of their quick navigation keys to navigate to each landmark in turn, and JAWS and NVDA also provide lists of landmarks on a page. NVDA even shows the nesting of landmarks.

The different landmarks

Below is an explanation of the intention of each landmark from a practical standpoint.

banner

The banner landmark denotes the portion of a page where a company logo, site slogan or the like would be found. Providing this landmark will allow a screen reader user to easily access that information to, for example, copy the text info to paste somewhere for providing information, correct spelling etc.

complementary

the complementary landmark denotes a section with complementary information to the main content of the page. For example for a page that shows a single blog post, the complementary information could be links to related articles.

contentinfo

The contentinfo landmark denotes the section of a page that contains the copyright notice, link to privacy statement etc. It can also be used to denote a section with footnotes, but I’ve not seen an example of that yet.

main

The main landmark denotes the section of a page that contains the main content. This is equivalent to the target of a “skip to main content” link. On a page showing a single blog post, this is obviously where the title of the post is which starts the article.

Note that it is explicitly stated in the WAI-ARIA spec that this landmark should only appear once in a document. I believe the reason is obvious: If you had more than one main content on a single page, you should split that into two pages. :) All other landmarks can appear more than once (in fact it makes sense for them to do so in some circumstances), but main should only appear once.

navigation

The navigation landmark denotes one or more sections of a page that contain navigational items. Usually these are links to various features of your site.

search

The search landmark denotes the section of a page that starts your search feature. This is not necessarily the search textbox itself, but starts usually at the search form level to also include advisory information or the label you might want to include for your search.

application

The application landmark is a special landmark in that it does not just provide an anchor point but also usually causes different screen reader behavior. The application landmark denotes a section of a page that should not be treated like just any other ordinary web content, but provides features that are more closely related, in concept, to what a desktop application would provide. An example is the Search feature on the Yahoo! pages that provides a very rich experience with widgets not found in standard HTML.

When a screen reader encounters such an application section, what happens is, at least on Windows, that they switch out of their virtual document reading modes into a more interactive mode called “Focus mode” or “forms mode”. In addition, contrary to normal form elements, they usually prohibit switching back to virtual mode as long as focus is inside the application section. The user is required to interact with whatever keyboard navigation and other feedback (for example through the use of live regions) the web app author provided.

Having said that, the application landmark is usually not found when it comes to providing simple navigation anchors. When the application role is used, you should expect the web author to also have implemented an accessible rich internet application experience and can expect widgets to appear you wouldn’t find in your standard HTML element. If someone uses the application landmark without providing real rich widgetry, it’s probably a bug on their part and they’d most likely appreciate a friendly hint. ;)

Personally, I don’t consider application to be just another landmark role. For me, application clearly belongs more in the space of true rich internet application development. I just mention it here because it is listed in the same section in the specification.

What about validation?

Oh yes, that may be important to some! The current W3C validator doesn’t validate XHTML+ARIA or HTML+ARIA yet, which includes the landmarks. However, if you don’t care, or you can convince your client that landmarks are a viable new feature for their sites, Steve Faulkner of The Paciello Group has worked out a way to validate the landmarks.

Further reading

A slightly different approach to explaining the WAI-ARIA landmarks has been done by Steve Faulkner of The Paciello Group in January of this year.

Previous Easy ARIA Tips

  1. aria-required
  2. aria-labelledby and aria-describedby
  3. aria-invalid and role “alert”

flattr this!

This entry was posted in Accessibility, ARIA. Bookmark the permalink.
Skip to top

Comments

22 Responses to Easy ARIA Tip #4: Landmarks

  1. Twitter Comment


    Marco Zehe: Easy ARIA Tip #4: Landmarks: Yes, they’re back! This is the fourth Easy ARIA Tip in a trilogy of Ea.. [link to post]

    Posted using Chat Catcher

  2. Twitter Comment


    RT @MarcoZehe published a new Easy #ARIA Tip: #Landmarks [link to post] #a11y #accessibility

    Posted using Chat Catcher

  3. a11y (a11y) says:

    Twitter Comment


    RT @MarcoZehe: published a new Easy #ARIA Tip: #Landmarks [link to post] #accessibility

    Posted using Chat Catcher

  4. Twitter Comment


    Easy ARIA Tip: Landmarks [link to post] (â™» @MarcoZehe)

    Posted using Chat Catcher

  5. Twitter Comment


    the fourth part of the trilogy by @MarcoZehe: Easy ARIA Tip: Landmarks [link to post]

    Posted using Chat Catcher

  6. Twitter Comment


    Landmarks are back :) Easy ARIA Tip #4: Landmarks @marcozehe [link to post] spannend Role application

    Posted using Chat Catcher

  7. Twitter Comment


    RT @sprungmarkers: Landmarks are back. Easy #ARIA Tip #4: Landmarks @marcozehe [link to post] spanned Role application

    Posted using Chat Catcher

  8. Twitter Comment


    Nice blog post by @MarcoZehe Easy ARIA tips, landmarks, [link to post]

    Posted using Chat Catcher

  9. Twitter Comment


    RT @MarcoZehe The rise from the dead! :) Published a new Easy ARIA Tip: Landmarks [link to post]

    Posted using Chat Catcher

  10. Hi Marco,

    Well explained posting about landmarks!

    I noticed you have implemented them on your blog.
    Can you tell us a little about how to add them to a wordpress blog?
    Is it only possible if you run a self-hosted wordpress based blog or can they also be added to a wordpress.com hosted blog?

    Thanx in advance for your answer.
    -Harald

  11. Marco says:

    @Harald thanks for your comment! I am using the default WordPress theme which includes landmarks by default. This in version 2.8 and higher of WordPress.

    I think it is possible to have landmarks on hosted blogs if the host admin allows individual users to modify the template. So if wordpress.com allows you to modify the template source of your blog, you can add the landmarks as explained. I do not actually have a blog at wordpress.com, so don’t know whether this is possible.

  12. Pingback: Laura Carlson (lauracarlson) 's status on Monday, 02-Nov-09 09:19:18 UTC - Identi.ca

  13. Twitter Comment


    Easy ARIA Tip #4: Landmarks [link to post] By @MarcoZehe #accessibility

    Posted using Chat Catcher

  14. Pingback: Stumbling Around .gov Websites: Good, Bad, and Goofy « As Your World Changes

  15. Twitter Comment


    Easy ARIA Tip #4: Landmarks « Marco’s accessibility blog [link to post]

    Posted using Chat Catcher

  16. Pingback: Apple’s iOS 4 supports WAI-ARIA landmarks « Marco’s accessibility blog

  17. Pingback: Apple’s iOS 4 supports WAI-ARIA landmarks « The BAT Channel

  18. Pingback: Apple’s iOS 4 supports WAI-ARIA landmarks « AccessTech News

  19. Pingback: 模块中使用ARIA region | 进步博客

  20. Pingback: Navigation & Labeling Reference Links | kabayview.com

  21. Pingback: Use ARIA Region For Modules | Blog

  22. Pingback: Use ARIA Region For Modules | Bitport

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>