Accessibility and the skip to content link
Having recently developed pain in my right wrist from carpal tunnel, I have given new thoughts and considerations to the topic of web accessibility. Most often, when people talk about accessibility they are talking about users that are blind. While this is an important demographic there is a whole other group of people with physical disabilities just like myself. I fully understand that I am in a minority group and that more people are perfectly capable of accessing website though traditional tactics. However it made me think about one very important point. There are many more people affected similarly or worse than I. With an average of 7% of the population having been affected by carpal tunnel by age 42, and I am sure that number will rise as more and more people turn to computers for their jobs.
So when we stop to consider accessibility, we as web practitioners need to also consider the use of our websites by those whom have common disabilities like carpal tunnel and arthritis. These are probably the two most common physical disabilities affecting persons that would otherwise be a healthy demographic.
Since I have not been using my mouse as much I find that my keyboard is fast becoming my new favorite tool for navigating websites. Probably the single most common task I perform is to tab or shift+tab through the links on a given page. What I found is that this process can be way too time consuming when site developers bury their navigation in columns or sidebars that fit the content flow of their websites and not the top down flow that a browser would see.
So this got me testing a few sites by some top accessibility evangelists. I studied their content, their document flow and I also ran a few of them through JAWS to see how they performed. Just to clarify I do not use a screen reader on a daily basis so my use of the JAWS screen reader here are only for possible points of discussion.
So here is little feedback on what I found in my testing and a few possible ideas help make improvements should designers find it in their hearts to help those not fully capable of wielding a mouse or pen tablet.
First up. javascript and DHTML drop down menus. These antiquated pieces of technology are fast becoming one of my least favorite menu systems. There are many reasons to avoid using them, and this is just another reason. Many of which I will not get into here. I will save that topic for a whole other discussion.
Let me pick on for a moment UDM4 (http://www.udm4.com/) The website states that it is the ultimate accessible menu system. Their menu system is one that I have purchased and used on several sites requiring a drop down menu. I know… we can spin off on a whole other topic on whether or not any one needs a drop down menu or if they really just need better content organization. Then I digress.
One problem I discovered with a drop down menu system is that often times while tabbing through the links on a page, the entire main navigation will be completely skipped over and not even accessed. In the defense of UDM4 they do have a keyboard navigation module that does allow for keyboard navigation through the use of the arrow keys, however I found that tabing through the links produced sporadic submenu items to open in no particular order. I believe this is due in part to the tab indexing of the menu. Using the arrow keys did work to navigate the menu system. But this requires a user to know that they can access the menu in this manor. This is not something that is immediately obvious to some users, certainly not to me at first. I only discovered it by exploration. Something many non technical users will never check for. Furthermore I think it's more probable that the menu would never be configured for keyboard use by the developer as these sort of things often get overlooked quite easily.
Assuming a site utilized a simple menu system or a drop down menu, the next thing that I found cumbersome is accessing links within the content of the page. In some cases accessing the main menu was an exercise in my tabbing ability. I often just gave up and used the mouse. This is because some links were buried deep within content or in a complicated layout structure. It's Murphy's law that dictates the link you want to get to is always going to be the hardest one to get to…
This issue is easily corrected but often times hidden from view. It's as simple as a utility menu right at the top of the page that allows a user to skip to the menu, skip to the content or skip to a local navigation. I can see many designers cringing right now and some probably getting ready to flame me for it. But let me explain first before you get upset. Okay hold this thought a moment.
Okay, now let me turn my attention to the programmers that are snickering and thinking, well I have already added a list of items to the top of the page and hid them from view of sighted users. Let me point out a few simple facts. Yes you can see the menu when you disable css or javascript in your browser, yes it validates, but no it is NOT accessible to users OR screen readers.
It's been a long standing practice to either hide the menu from sighted users using css or javascript under the assumption that the menu would be read by screen readers. Unfortunately this practice was either never fully tested and assumptions were made without research, or browser/screen reader technology has changed in the way it operates. It's simply not accessible. Therefore, useless to everyone.
Okay, I do have a point here, and it's about to come full circle. As a designer I feel that it is our job to design around technology until technology has proven it's self to have improved. I believe that as designers we can design a nice looking utility menu that can take a user directly to the content on a page that we want. Frequently we designers do place a utility menu near the top of a page. We place the stuff that doesn't fit in the main navigation, or the stuff we don't know what to do with because it takes up too much room in our main navigation. I am referring to items like contact us, site-map, and my account. These items are relocated to this seemingly subservient position out of the way. This is perfect location for accessibility links, so why not create a solution that is good for everyone? Abled bodied visitors will not be put off by them and will probably think… wow these guys really care that their website works well: and feel safe.
For the developers that have to work around the shortsightedness of those designers that could care less that not everyone is perfect and abled bodied the solution is pretty simple. If you must hide the content from the screen, please do not use the traditional method of setting the css for the menu to display:none or display:hidden. the best solution is to use the following code in your style sheet.
#accessibility, #skip or #???
{position:absolute;
top:-500px;
width:1px;
height:1px;
overflow:hidden;}
This will allow you to move the content off the screen and out of view from sighted users, but will remain completely visible to screen readers or tab users. The solution is a simple one, it does not have to impede on the visual design of a site and in some way's may improve upon it. In the end all users of a site benefit from an accessible useful and organized site.
Tags: Design · CSS · Accessibility
5 comments so far ↓
It's great to read about your practical experience, since that's what accessibility is supposed to be about.
If you move something offscreen with position:absolute I don't think you need to apply other styles like height:1px, because it's already out of the document flow with position:absolute (although overflow:hidden is a good idea).
Don't you find it disconcerting when the focus is on something you can't see when you tab to it (e.g. "skip to main navigation")? If you can't fit these links into your design, I'd at least show them when they're focused on:
<code>
a.skip { position: absolute; left: -5000px; }
a.skip:focus, a.skip:active { position: static; left: 0; }
</code>
Your creativity is appreciated - thanks.
That being said, WebAIM is also making a similar recommendation to it's users. You can read more about it here. http://webaim.org/blog/hiding-content-for-screen-readers/
Leave a Comment