Continuing from the theme of the last entry, another good example of accessibility benefitting everyone, not just those with special needs, is using the <link> tag in the <head> section.
Most web pages only use the <link> tag to do one thing: draw CSS information into a document, via a linked style sheet:
<link rel="stylesheet" href="styles.css">That rel attribute stands for “relationship”, i.e. the relationship between the HTML document and the CSS. This means that the <link> tag can also be used for navigation, while continuing to be written in the <head> section. Let’s say you were on the “Contact” page of a website. In the head section, you would add:
<link rel="home" title="Home" href="index.html">
<link rel="next" title="Next" href="services.html">
<link rel="prev" title="Previous" href="products.html">
<link rel="help" title="Get Help" href="about.html">There are arguments in response to this from anyone familiar with HTML code:
- “These links will never be seen on the page, because they are written in the
<head>section” - True only in a browser under normal conditions. Those using assistive technology, such as the Firefox Site Navigation Bar, will be able to see it.
- “My website can’t be navigated in a linear fashion”
- True only to a certain extent. While this is a natural navigation method for blogs, websites with less structure can still have an implied linear navigational pattern: just think of which page would be logical to go to next, and which page might be before the one you’re on now. The home and help links will always remain the same in the case of most websites.
There is one other benefit to using the <link> tag in this manner: some browsers will use the “next” link to “prefetch” web page content, on the assumption that the page is likely to be the next page you visit.
This means that while you are looking at the current page, the browser is downloading the next one: if you decide to go there, the transition will be much smoother, with minimal or no loading time.
You could also use this feature to download a large image behind the scenes that you know will be used later in your site:
<link rel="prefetch" href="images/bigbobobanner.jpg">Hopefully this lesson, along with the previous one, shows that adding accessible features is not a chore, or a benefit to only a small minority of users, but an integral part of a website that yields advantages for everyone.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
