(1 votes, average: 4.00 out of 5)Accessibility: Web Design for the Mobility-Impaired
Mobility impairment isn't always as obvious as you might think it is. You don't have to imagine extremes of disability like paralysis or missing limbs. Try imagining a simple fall or other accident that results in both hands in a cast and unable to use a mouse. Now, with that in mind, open your website in your browser, put an unsharpened pencil in your mouth, and try to use the eraser to push the TAB key till you get all the way to the main content of your page. With a properly placed "skipnav", one TAB key click gets you to the link, and a click on the ENTER key gets you to the main content. That's accessibility. It's the web equivalent of an entry ramp.
Hurt Hands Typing (Not mine)
A skipnav is a link placed at the very beginning of the page (before any other page content) that allows a user to skip all the top-bar and sidebar navigation links and go straight to the main content. It's generally a simple text link placed either in the beginning of the header or in a separate DIV prior to the header. It's one of the very few pieces of page content considered acceptable for cloaking (matching text color to the background color or using CSS to size it or slide it off-screen to make it invisible to the user.) Like most accessibility options, it exists primarily for disabled users and doesn't have to be visible to be useful. (On a side note, the PBS Station Prototype Website provides an already named DIV for such a link, but it was placed there for the CSS rather than as a navigation landing point.)
...Accessibility is about making the page useful to everyone...
Web design for limited mobility also includes checking your scripts to see if your behaviors are mouse-centric. Without touching your mouse, try to get around your site. There aren't perfect keyboard equivalents of all mouse events, but the major ones are pretty basic. If you have a CLICK event, add the same KEYPRESS event. If you have a MOUSEOVER event, add the same FOCUS event. If you have a MOUSEOUT event, add the same BLUR event. Accessibility is about making the page useful to everyone no matter how they get to it or have to get around it.
...anything that might make a user's hands uncooperative...
The ACCESSKEY value of the anchor tag is another good and far underused feature to add to your navigation system. Even though it's not currently supported in some browsers and browser versions, it's one of those things that doesn't hurt your page by being there. Browsers that don't support it just ignore it. Users hold the ALT key (the CONTROL key for Mac users) and press the specified, single alphanumeric character to either set focus on or activate a link depending on the browser. It allows you to set keyboard shortcuts for primary site navigation.
...it's about making it easier and more intuitive. That's usability...
Other aspects of mobility impairment related to computer usage may not occur to you initially. These include slowed reflexes, lack of coordination, tremors, ticks, palsy, arthritis, and anything else that might make a user's hands uncooperative. I, for one, have a hard time double-clicking fast enough (due to nerve damage) for the computer to register it as such. Therefore, avoid page design that relies on a site visitor's speed and eye/hand coordination--unless, of course, you want your page to feel like a video game. Avoid single character or single digit hyperlinks on a page or image maps with tiny hot spots. (I know, scripted image maps are a whole other issue.)
You would not believe the number of web pages I've been to that use words like "I" or the number "1" as important content links without throwing any padding around them. Try to hit that after six cups of coffee. Our goal isn't to make it harder for site visitors to use our sites; it's about making it easier and more intuitive. That's usability. It's the web equivalent of a well-ordered office directory posted clearly on the wall with neatly labeled signs on every door.
I know that these things will require a little extra time and effort, but they're worth it. It's just not that hard to imagine yourself in need of them.
If you enjoyed this post, then make sure you subscribe to the RSS feed!
Fan Me >>
Follow Me >>
Great article and examples on different types of mobile impairments. In addition to your points, ensure text is resizable, you use Header tags accordingly, and you enter ALT attributes…
Absolutely, Dennis. This is just one part of a series on web design accessibility. The next part will cover sight issues, and that’s where I’ll get into ALT tags, proper use of header tags, accessible tables, etc.
The problem with getting web designers to provide accessibility is the common misconception that it’s really hard and will require lots of work. It’s not and it doesn’t, and I’m hoping that by covering accessibility in smaller chunks and maybe humanizing or personalizing it a little, I can get more of them to give it a try.
I hope that you’ll check back for the rest of the series and continue to share your input as well. I am by no means the final authority on this subject.