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.
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.
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.
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.
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.