I read in the top ten tips that my site should be accessible by a "keyboard-only" user. What does "keyboard-only" mean?
Good question! There are many people who cannot use a mouse because of either an injury or the inability to move their hand enough to control a mouse. These users will need to move systematically through websites by using keys on the keyboard. They can use the "Tab" key to move through the links or form controls on a webpage one at a time.
Overall, a keyboard-only test is one of the best ways to check your website for accessibility. By disconnecting your mouse and tabbing through your site, you can check to make sure the order of your page makes sense, and that you are able to move easily through your site and access its content. While you are tabbing through your site, make sure that you can always see where the focus is (there should be some sort of visual cue that indicates that a link or control is in focus).
My website has a lot of navigation items. Does that mean a keyboard-only user will have to tab through all of them, or is there a way for me to help them move more quickly through the navigation to get to the main content on the page?
The Web Accessibility team recommends that you look at the order of the pages on your site and make sure that the most frequently used ones are the easiest to get to.
Additionally, it can be very helpful to provide a way for keyboard-only users to skip to the main content. Specifically, you can provide an anchor link (a link with a local target just before the beginning of the main content) called "skip to main content" or "skip to quick links" (this type of link is also referred to as a jump link). This allows a keyboard-only user to jump over the repetitive parts of the website and reduce the number of times he or she must hit the "Tab" key in order to get to the main content of the page.
I'm worried that having an anchor link like this on my website will look bad. Is there a way to do something like this without affecting the appearance of my site?
You can use CSS to hide the links and make them visible only when they are in focus (when the keyboard-only user tabs to the link). This works best if the link is one of the first few links on a page.
How does a keyboard-only user interact with other things on my website, such as buttons or other form controls? Can a keyboard-only user select items from a pulldown menu?
Keyboard-only users can interact with many different types of web controls. They can interact with things like radio buttons and pulldowns by using the arrow keys on the keyboard.
If a keyboard-only user tabs to a radio button, he or she can arrow up and down or left and right through the choices and hit space on the desired option. Make sure that the items in a pulldown menu are not triggered when a keyboard-only user hits the arrow keys to move through the options.
I want to use flyout menus and other interactive widgets that change when you mouse over them. And what about drag and drop?
In order for this functionality to be accessible to keyboard-only users, the Web Accessibility team recommends writing your CSS or Javascript code to make sure that mouseover actions are also triggered by focus. As a result, when keyboard-only users tab to the widget, they will see the change.
If you're using a widget created by a third party, test it and check to see if they have any notes about its accessibility. Keep these questions in mind when you're choosing a widget.
Drag-and-drop can also be made keyboard-accessible. See the CSS Drag and Drop Module from whatsock.com for a demonstration.