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