Assistive Technology Focus: Keyboard
Imagine not being able to use a mouse or touch-pad to use your computer. Folks with motor disabilities, vision issues–including blindness– or even a broken hand are not able to use a mouse to point to items on the screen, click on check-boxes or “right click.” This is where the trusty keyboard comes in–and considering that early computers did not have mice–it makes sense that a keyboard has the same functionality as a mouse. The keyboard is commonly referred to as the (almost) universal input device because of the wide range of users able to use it, regardless of ability.
But just because this functionality exists, doesn’t mean that all websites, software, apps and games are automatically compatible with a keyboard. And that’s where web development has users with disabilities behind–by not ensuring websites are fully functional with a keyboard.
The main keys used are: Tab, Enter, the four arrow keys and the space bar, but there are MANY key commands that allow keyboard users a similar experience to that of mouse users. The tab key allows users to navigate through interactive elements, the enter key is the way to submit a form or open a link, the arrows help users go up and down through drop down lists, grids or forms, and the space bar is another way to activate buttons.
Here’s a video of a keyboard user browsing a web page. It’s fascinating to see all the ways the keyboard replaces a mouse:
Start by positioning the cursor in the top left corner of the page or within the location bar of your browser.
Press tab to move into the page. Look for a bypass link such as,”Skip to main content.”
You’ll see down in the status bar at the bottom there’s a URL with an anchor attached to the end of it.
From the bypass link press tab again to move across the page to the accessibility link. Each site should have an accessibility statement.
Tab again to move back over to the left and the menu. Move through the menu using the arrow keys, left and right up and down. Make sure each element can receive focus.
From the menu press tab to move into the rotating banner. Within the banner you should be able to press the arrows keys to move through each of the panels with the banner.
You’ll also want to test this with a screen reader to make sure there’s alt text associated with each of the panels, and that they get read by the screen reader.
From there press tab to move down into the Home area then tab again to move down into the tab panel.
Within the tab panel you should be able to move between the tabs using the arrows keys, back and forth. And, you should be able to move down into the panels by pressing the tab key
And, then move from the panels back up into the tabs using the shift-tab keys. Tab down to the link at the bottom. Tab up to the accordion on the right
Enter to open the accordion. Tab again to move through each of the elements within the first accordion panel. Enter to close. Enter to open the second one.
Tab through each of the elements again to make sure they are keyboard accessible. Shift-tab to close.
And then finally tab down to the logo on the bottom left. That’s it for tab key testing.
Open up a website, put your cursor in the address bar and start hitting the Tab key to navigate through the page’s UI components. In general the “tab order” of a website is determined by the order the code is presented in the Document Object Model (DOM). But if alterations need to be made the “tabindex” tag can be used to add it to a list of elements that a user can tab to. For a more technical overview on tab order, visit the Web Accessibility Initiative’s site.
By far, my favorite keyboard command is CTRL Z, otherwise known as “undo.” The ability to reverse an accidental delete truly is my safety net. I find it is much easier to hit those two keys simultaneously than to drag my mouse up to the top of my screen and click on the curvy “undo” arrow. I am able to choose how I use my keyboard and my mouse, but for those who do not have the option, ensuring that our websites and other technology are usable with a keyboard is vital for inclusion.
