The Keyboard as an Assistive Technology
When we think of assistive technology, there are a few pieces of software and settings that immediately come to mind. Screen readers, screen magnification, high contrast mode, and speech to text are some examples. Equally important is hardware support. One of the most commonly used pieces of hardware in the accessibility realm is something you probably already use — your keyboard.
Not everyone likes (or is able to use) a mouse for various reasons. Some of them include:
- Abilities: Some users may not be able to use a standard mouse due to physical limitations, such as dexterity (unable to effectively move or click the mouse) or vision loss (unable to see the mouse cursor)
- Comfort: Keyboards may be more pleasant to use for some people, especially those with chronic wrist pain caused by arthritis or Carpal Tunnel Syndrome
- Efficiency: Power users can move more quickly and with greater accuracy using a keyboard
- Alternative devices: Users with motor disabilities may prefer to map keyboard keys to other devices like switches or buttons, or may use tools like a mouth stick to interact with their touch screen or keyboard
Keyboards and Focus
It can help to think of focus as a keyboard equivalent of the mouse hover state. When navigating with a mouse, actionable HTML elements may receive some slightly different styles when the cursor moves over them. This indicates to the user user that they can perform some action on or within the element. For example, a when a user hovers over a button, the button's background color might change from gray to blue to indicate to the user that they can click on the button to submit a form.
There is a similar, although more subtle feature for keyboards to indicate an actionable item, much like hover, but for keyboards. This is called focus.
Much like hover, you can tell when an element is receiving focus based on its appearance (CSS style). The default focus state varies between browsers.
For a button in Chrome and Safari, the focus indicator is a light blue glowing outline. In IE, it's a dashed gray outline. In Firefox, it's a bit of a combination of the two, with a blue border on the outside of the button and a dashed outline inset within the button.
A Note on Safari
At the time of writing, you must manually turn on the focus indicator in Safari. Coming from a Windows background, this tripped me up the first time I began testing keyboard accessibility on my Mac. To enable the focus indicator, open the Safari menu, then Preferences, and click on the Advanced tab, then check the option "Press tab to highlight each item on a webpage."
Only one element may receive focus at one time. When the focus leaves an element, it is said to be "blurred."
How does an element receive focus? There are several ways, although there are some exceptions for certain elements receiving focus depending on the browser:
- By hitting the tab key (move forward) or shift + tab (move backward)
- By being clicked
Not all elements can (or should) receive focus. Generally, only elements that can be used to trigger an action or navigate the page should be focusable. Disabled elements and elements that are hidden do not receive focus.
Focusable elements can fall into two categories — semantic HTML elements and non-semantic HTML elements, which I will refer to as custom controls.
- Input fields
- Text areas
- Radio buttons
- Areas (within image maps)
Aside from the semantic elements, other elements like
spans can receive focus by assigning the
tabindex attribute. A
tabindex with a value of 0 will allow an element to appear normally in the tab order (more about this later).
tabindex attribute can have positive values, you should avoid using positive values to manually manage your tab order, as it can be confusing.
Much like the hover state, the focus state provides users with a clear visual indicator of where they are on the page and what action they are about to take, whether that's clicking a link or submitting a form. Although its appearance may vary between browsers and websites, it is a necessity for those who do not use a mouse. Be sure to keep focus in mind while you design and develop websites.
This post is the first of two parts. Continue reading in part two, Four "Keys" to Better Keyboard Accessibility.