These days almost everyone has their own website in one form or another: whether you have your own personal Blog or a Mum / Dad with an online eShop for that extra side income or perhaps you maintain a fully-fledged website for work or for your own business.
How many of you had considered accessibility as part of your website design and implementation? If you were one of the few who did then kudos to you for considering accessibility as part of the website design – you are one of the few. However, for most websites this is what often gets overlooked. Not surprisingly as building websites is hard work and let’s face it – we have so many things on our mind from the content to the general style and feel of the website that best represents the branding and the ease of use. Not only we have to contend with multiple browsers and with multiple device platforms (desktops, mobiles and tablets etc). It can be a costly experience in both time and learning. No doubt where possible shortcuts are taken or the importance of accessibility has been forgotten.
I’ve been asked to share some of the accessibility knowledge with a focus on a single concept in each article. The goal is to show how easy it is and how it is the little things that we do to our website that makes it more accessible. You don’t have to be a “web guru expert” and for the most part it is just copying-and-pasting the appropriate HTML code tags to make it happen.
So what is Skip-to-Content???
Skip-to-Content and sometimes known as just “skip to main content” or “skip nav” is generally the first link that appears on your website in the tab-order that allows the user to skip over everything and jump straight into the main content part of your website.
With this explanation I often get asked with a confused look: “Why would you want that?” or sometimes with just an exasperated “Huh??!!!” I then further explain that not everyone uses the mouse to interact with your website directly which is often the case with those who are blind or have severe case of dexterity.
Most websites have a banner at the top with navigational menus, searchable fields and login links. Imagine for those users who don’t use the mouse has to press that tab key 20 times to skip over all the uninteresting content simply to reach the main content of your website? If that sounds bad then consider that that they have to repeat this for each page navigation on your website. This is the reality for some users that visit your website.
Thankfully we can make websites more accessible simply by including the link at the top of the page “Skip-to-Content” in the first tab-order.
“I think a Skip-to-Content Link on top of the Page is Confusing”!!!
I wholeheartedly agree with this statement. For visually-abled users seeing the link at the top of the page “Skip-to-Content” is confusing and may leave the user bewildered especially when the content appears directly under the narrow banner.
Luckily with a little CSS trick you can make the “Skip-to-Content” link only appear when it has the tab focus and otherwise it remains completely hidden. We have adapted this implementation for both the
www.hueyify.com and the
hueyify.blogspot.com.au and illustrated as follows:
The Hueyify website page:
On the first tab item on the website page the “Skip-to-Navigation” appears:
The Hueyify blogger page:
On the first tab item on the website page the “Skip-to-Navigation” appears:
Adding “Skip-to-Content” to my Website – The Steps…
These few steps will show you how you can add the “Skip-to-Content” to your own website and hopefully you can see it isn’t that hard.
1. Back up your Website
Before you make any changes please back up your website so you can always back-out and revert any changes you make.
2. Add the Link
You need to add the link to appear right after the <body> tag. Depending on how your website was created you may need to modify every page or simply modifying your template so that the link appears throughout the entire website.
<a class="skip-to-main" href="#main-content">Skip to Main Content</a>
3. Add the CSS
You will need to add the styles to either a CSS file or directly embed the CSS into your page. If you are unsure what this means then this is covered in detail at:
http://www.w3schools.com/css/css_howto.asp
For Hueyify we used the following CSS styles and you are encouraged to change the colours and styling to suit your website:
a.skip-to-main
{
position:absolute;
left:-999px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
z-index:-999;
}
a.skip-to-main:focus, a.skip-to-main:active
{
color: #333333;
background-color: rgb(254,243,146);
left: auto;
top: auto;
width: 30%;
height: auto;
padding:5px;
margin: 10px 35%;
border:4px solid rgb(253, 231, 38);
text-align:center;
font-size:16px;
font-weight: bold;
overflow:auto;
z-index:1031;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(200, 200, 200, 0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(200, 200, 200, 0.75);
box-shadow: 3px 3px 5px 0px rgba(200, 200, 200, 0.75);
}
The key point to making all this work is the “left:-999px;” which will push your link off screen when it is initially rendered. In effect hiding the link. However, when the link has the focus or becomes active the “left: auto” ensures that the link becomes visible on your website appearing over all the other controls on your page through “z-index: 1031;”. This is what makes the magic work.
4. Setting the Anchor Point to the Main-Content
The last part to making all this happen is setting the anchor to where the link should jump to when clicked.
You do this by inserting id="main-content" and tabindex="-1" in a tag that appears at the anchor position point you wish to skip over.
On the Hueyify website we had a tag that looked like:
<div class="container-general">
and we changed it to become:
<div id="main-content" class="container-general" tabindex="-1">
5. Testing it
All is required is to test your website and fix any issues as they arise. Ensure that the link doesn’t appear on the page when it gets rendered and if it does then it probably means your CSS wasn’t set correctly or is being cached.
Ensure that you can tab through from the browser you are using and the link appears when it has the focus. Selecting it should jump over the content to the anchor point you have set.
Other Concerns / Issues…
Tabbing quickly
There may be a potential issue with the above if the user is “tabbing” very quickly in that the “Skip-to-Content” link only appears for a fraction of a second and may be overlooked.
However, it is in my experience this isn’t generally the case when the user arrives at your website for the very first time as they would be generally testing out and assessing whether the “Skip-to-Content” accessibility feature exists.
Main Content is Already on Top
For some websites the navigation actually already appears after the main content or at the bottom of the page then this may cause some confusion for the visually blind as they will be wondering if there is any navigational menus for the website.
Perhaps in this situation you could consider having a “Skip-to-Navigation” link in place instead. At least in this way it would shed some light on those blind and provide means to jump directly to the navigational links for the website.
Multiple Skip-to Links
If your website has multiple sections then it may be useful to have multiple “Skip-to” links particular if it is likely that the user would want to jump right into the different sections. However, these should be used sparing otherwise it defeats the whole purpose of the “Skip-to” links (i.e. if there were many “Skip-to” links then it may mean the user will want another “Skip-to” link to skip over all the “Skip-to” links you had provided).
What are “Skip-to” Link Alternatives?
If you do not like the concept of the “Skip-to” links then perhaps consider the use of Headings. Whilst those who are blind may be able to skip content by jumping to headings through their screen reader is still doesn’t assist those who are sighted but have dexterity issues and still need to tab through all the unnecessary links to reach the main content.
