Diving into the Blog Accessibility: A Live Case Study, I began the process of making this blog more accessible by adding a “skip to main content” link, currently in the upper left corner.
This accessibility feature enables individuals using screen readers and those using only the keyboard to jump over the navigation bar right to the content. This feature saves these individuals much time when using blogs and websites.
Thanks to Headway Theme’s Easy Hooks – “a simple way to add content to your site that would otherwise be impossible” available via the WordPress admin panel, adding the “skip to main content” link was much easier than I expected.
In the “Wrapper Open” Hook, I inserted the code:
<div id="skiptocontent"><a href="#maincontent">skip to main content</a></div>
In the “Before Leaf Content” Hook, I added:
<a name="maincontent"></a>
That’s it! Less than two minutes.
Tweaking the appearance of the link took me longer only because I not yet overly familiar with the Headway Visual Editor.
With this kind of “skip” or “bypass” links, there are two common practices:
- Make the link “invisible” by making the link text the same colour as the background, and then change colour when the link receives focus, i.e., when someone tabs to. This way the link is not visible to those who do not need it, and hence, it does not interfere with the aesthetics of the blog design. Yet screen readers can still read it as text colour does not matter; and, by becoming visible when tabbed to, it is available to those who use only the keyboard.
- Make the link visible to everyone so more individuals may benefit.
Because the purpose of this blog is teach web accessibility to bloggers, I have chosen to leave the link visible. It does change colour when tabbed to with the keyboard or hovered over with a mouse. Go ahead and try it! Observe where it takes you.
By inserting these two bits of code, every blogger using the Headway Theme can easily add a “skip” link – a Level A (a must have) guideline under the Web Content Accessibility Guidelines 2.0. Adding the link in other WordPress themes may or may not be as easy. Check it out on your own blog.
Twitter: notagrouch
Glenda thanks for the article, great stuff. But I have a question. why is this good for accessibility? It seems that I would rather see the links to all parts of the site rather than one link that skips below the navigation. I always thought that it would be good to put all accessible locations easy to see and get to at the top… This seems to contradict that paradigm.
Twitter: GlendaWH
Oscar, great question!
This kind of skip link enables individuals using screen readers to skip over all of the navigation links to get to the main content. When reading several posts or pages on a site, the skip link saves these individuals from listening to and navigating through the navigation bar each time, which can be rather redundant and frustrating.
Similarly, for individuals who can only use the keyboard, the skip link saves tabbing through the navigation, which can be quite tiresome for those with limited mobility, to get to the main content.
Does that help?
Good article Glenda. The only thing I would recommend is to use id=maincontent rather than .
Sorry, I didn’t think the HTML would be rendered, here it is again.
ood article Glenda. The only thing I would recommend is to use id=maincontent rather than .
Hmm, didn’t work again.
ok, here goes again.
Good article Glenda. The only thing I would recommend is to use id=maincontent rather than [a name="maincontent"][/a].