NO ESCAPE
I’ve often pondered the curious manner in which we use the sun as our last resort for thinking positively or seeing the bright side. It would explain why on that dark and stormy day, I found no solace looking out my window after realizing I was trapped. An online form wouldn’t let me escape no matter how many times I tabbed and shift-tabbed to get out using only keyboard for navigation. Not even the ESCAPE key could wrench me from the inner sanctum of such an evil contraption. There was but one hope, stare out the window and wait for the parting of the clouds.
Too dramatic? Maybe. There are millions of keyboard-only users on the internet. Most of these users are navigating this way because they are unable to efficiently use a mouse due to a physical disability or lack of dexterity. Another large portion of this population are the visually impaired that surf the web using the combination of the keyboard and a screen reader. I suppose I should also include in this group the “power users” out there that use keyboard shortcuts for everything to limit the “inefficiencies” of switching between a mouse and keyboard all day long. In order to avoid someone having as dark a day as described above, it is important that we keep accessibility in mind when developing our websites. Not only is it an awesome way to support brothers and sisters who are only able to use the keyboard, but it also helps our websites comply to the Americans with Disabilities Act.
THE USUAL SUSPECTS
Let’s look as some of the design flaw culprits for these keyboard traps. There are many ways it can happen and developers should test all components of a website with a keyboard to ensure it is accessible.
A detail of HUGE importance is the “focus” indicator. With a mouse, we have our “mouse indicator” on the screen and we see where the mouse is “running” on the screen. A visually-enabled, keyboard-only user relies solely on what is called the keyboard “focus.” While tabbing through options on a page, there should be something that outlines, or highlights or makes clear to the users exactly where they are on the page. All of the major internet browsers assign a default focus indicator on all websites; however, it is important to test and make sure you have not chosen to override this default setting. Or, if you disable the browser default, ensure that you have coded some form of custom focus indicator. Don’t leave your users in the dark! The easiest way to test this is simply navigate to a page and start hitting the “tab button” and see if the indicators appears.
The next are of difficulty is flash applications. Flash is out-dated and there are a dozen or more drawbacks to using it. The biggest and baddest cons would be that sites using flash are normally not equally accessible to those with disabilities, flash is not readable by search engines (thus, hurting SEO), and there are numerous hindrances to navigation. Trust me and ditch it if at all possible. The world will thank you.
Another crucial element to consider is keyboard shortcuts. You are able to create shortcuts for your users on your website. However, there are some keys that you should avoid assigning custom commands to:
- Tab
- Shift + Tab
- Enter
- Space
- Arrow Keys
These are absolutely essential to the keyboard-only user. Overriding the default function of these keys could render keyboard navigation impossible or cause the user to be trapped on your pages. At minimum, it will force a user to cope with the fact that the inputs they use every day on every other site have been changed and will have to learn the new key input (somehow).
Lastly, user forms on your website could be traps if you aren’t using input field validation correctly. Input validation is almost mandatory for positive user experience (and to receive real information from your clients!); however, it should never hinder navigation. How does it happen? When you require a field to be properly filled out before the user can move on and not simply notifying or warning about an error, you create a trap for a keyboard-only user. A mouse-enabled user can simply scroll the page to see all that is needed for a form before entering any information. A keyboard-only user, just like the mouse user, may wish to see (or hear) the entire form before filling it out and is unable to do this if all of the input fields must be filled before tabbing out of them. Warn users but don’t hinder them!
SILVER LININGS
Great news! You can test your website for free! Simply try to navigate to and from every section of your website without using a mouse. You will likely find that there are plenty of other ways to make the site more accessible and keyboard-friendly in doing so. There are also free tools that can assist in the process. Don’t forget that Coughlin offers Accessibility services for websites and can make sure your website is fully navigable by keyboard and so much more!
⇓ These links open in the same window.
