demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Using link rel to preload web content and aid accessibility

accessibility

Estimated reading time: 2 minutes, 6 seconds

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

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

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.