Oct 17 2010
Using link rel to preload web content and aid accessibility
0 commentsContinuing 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” type=”text/css” href=”styles.css” media=”all” />
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
homeandhelplinks will always remain the same, of course.
There is one other benefit to using the <link> tag in this manner: Firefox uses 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, Firefox is downloading the next page: if you decide to go there, the transition will be much smoother, with minimal or no loading time. Other browsers are likely to adopt this behavior.
You could also use this feature in Firefox 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” />
(While it is valid XHTML, other browsers will ignore the line above. More information about prefetching from the Mozilla Developer website.)
Hopefully this lesson, along with the previous one, shows that adding accessibile 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.
- Oct16
- ◀Creating Accesskey Shortcuts For Site Navigation
- How To Write JavaScript On An HTML Page ▶
- Oct18
You must be signed up and logged in to leave a comment. Doing so only takes a moment.
