WCAG Accessibility Checkpoints
The WCAG (Web Content Accessibility Guidelines) 1.0, Priority 2 Checkpoint 13.2, states that you should:
Provide metadata to add semantic information to pages and sites.
Don’t disregard this checkpoint because of the word “metadata”, as I first did before I looked into what it really meant. I was associating it with metatags packed with keywords to improve SEO, which is now virtually obsolete for this purpose.
Simple, Unseen and Underused
This checkpoint makes use of the <link> element to add information (to the structure, rather than the content) thereby increasing the usability/accessibility of the document.
Style the Document
You will probably have seen it most commonly used for telling a user agent where style information can be found for different media types. The first example tells it what style to use when printing a page and the second, how to describe an alternative style:
<link rel="stylesheet"
type="text/css"
media="print"
href="http://www.punkchip.com/style/print.css" /><link rel="alternate stylesheet"
type="text/css"
media="print"
title="Punkchip: Desert Sun"
href="http://www.punkchip.com/style/yellow.css" />Some user agents, such as Firefox, use the ‘alternate stylesheet’ to present a list of available styles to the user (View > Page Style). You can have as many alternative stylesheets as you want e.g. to present a zoom layout or different content layouts.
Feed Readers
Another common use, increasing in popularity, is to inform RSS readers of where to find the site’s update feed:
<link rel="alternate"
type="application/rss+xml"
title="RSS 2.0"
href="http://www.punkchip.com/feed/" />Firefox displays an RSS icon to the right-hand-inside of the address bar, when clicked you are given the option to “Add Live Bookmark” for future reference.
Different Versions/Translations
To provide access to different versions of the site, e.g. a PDF booklet, or for any translations that have been produced. ‘Alternate’ used in conjunction with the ‘media’ attribute signifys a different type of media and when used with the ‘lang’ attribute signifys a translation into another language:
<link rel="alternate"
type="application/postscript"
media="print"
title="The Punkchip Catalogue"
href="http://www.punkchip.com/catalogue.ps" /><link rel="alternate"
type="text/html"
lang="fr"
hreflang="fr"
title="La version français"
href="http://someplace.com/manual/french.html" />User agents don’t currently offer any way of accessing this information, which is a shame, so this point is added for information purposes.
Assisted Navigation
There are a three link types for this purpose and are all self-explanatory: start, next and prev.
<link rel="start"
title="WCAG Checkpoint Home"
href="/index.php" /><link rel="next"
title="The Third Checkpoint"
href="/checkpoint_3.html" /><link rel="prev"
title="The first checkpoint"
href="/checkpoint_1.html" />Unfortunately, the most common user agents (IE and Firefox) do not make full use of these types to create a secondary navigation. Link Widget is a Firefox extention that enables you to navigate using the above links, if provided. (After installation add the icons for navigation through View > Toolbars > Customise…)
The text-based browser, Lynx, will show the navigation at the top of the page using the titles and href to produce links to each location (they begin with a ‘#’ is to show the user this is metadata).
Opera displays this navigation to the user through the menu options: View > Navigation Bar.
Other Types
There are other uses for the link element such as ‘contents’, ‘glossary’ and ‘help’, to name a few. I have shown a few of the most common that you might find useful. Go to the w3.org website to view a list of all types for this element.
What’s the Point?
Hopefully in future, the most common user agents will make better use of this semantic information. Until then it provides some users with accessible and usable information.
Posted in: Accessibility
July 22, 2006 : Bookmark this post: your way
Semantic is very important to secure more relevance to search robots, like Google, Yahoo…
You can use semantic id and class names, helping the accessibility of your Website too.
Carlos Eduardo
really interesting. Thanks for you “easy” explanation and for the Moz extension. Personally, in my daily work, treatment to implement to my code, all the possible semantics. This is really good, for example, for a good indexing on the part of the finders.
This is a “google” translation, I´m from Spain, and my english is very poor, sorry ;-)
Enrique
It’s funny how these snippets of code have been available to implement for such a long time but web developers forget to use them AND user agent developers have done pretty much nothing with them neither. They could improve the users experience so much but browser vendors overlook the important usability glitches and focus on the pretty nice-to-haves.
Let’s hope IE’s shift towards Standards-compliant browsers is a promising direction and that Microsoft (and Mozilla) focus more on accessibility and semantic use of existing technologies in their future developments.
Si Jobling