Home > Web Services > Resources > Articles
Focus on keyboard users
- The problem
- How keyboard users browse websites
- Example
- The solution
- References
- Further reading and thoughts
A real problem with a simple solution.
Summary
Keyboard accessibility is an important consideration when designing a website. People may be using the keyboard to surf the web for a variety of reasons:
- Users with ULD (Upper Limb Disorder) may find using the keyboard easier and less painful than using the mouse
- Users may have a condition such as Parkinsons disease which makes mouse use very difficult or impossible. In the case of Parkinsons, tremors can make the action of hovering the mouse over a link before clicking it very difficult.
- Blind or severe vision impaired users may not be able to see the mouse cursor, and so navigate entirely using the keyboard
- They may be using a laptop in an environment where mouse use is difficult, such as a train with limited space, or simply prefer the keyboard to navigating using a touchpad.
Navigating a webpage using just the keyboard is typically straight forward. The Tab key will step through all interactive elements on the page (mainly links and form controls), whilst the Enter key will activate the link or control. Whilst a mouse user has the benefit of the mouse cursor to see where they are currently pointing to on a webpage, a keyboard user makes use of a ‘focus indicator’ which is a visual indicator showing the currently selected link. This is useful for two reasons:
- As the user tabs around the page, they can follow the focus indicator to track their progress and easily spot the currently selected link
- If the user turns away and then back to the computer, with a sufficiently visible focus indicator they can easily spot where they were on the screen
The problem
Sites can either remove the keyboard focus indicator completely, or simply use the plain dotted outline for keyboard users even though mouse users might have an enhanced indicator. A common reason for this is when a reset stylesheet is used as this often removes the default styling (such as the dotted outline) for links and other elements. It is advised when using these reset stylesheets that they are used in conjunction with a newly defined set of styles for links, colours and so on, however links are occasionally overlooked and so end up with no visible outline.
Success Criteria 2.4.7 (Focus visible) of the Web Content Accessibility Guidelines partially addresses the issue. This states:
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
However, as shown later on in this document, there are various degrees of visibility.
How keyboard users browse websites
Keyboard users can navigate around pages using just two keys virtually all controls (Arrow keys allow interaction with form controls). Pressing the Tab key repeatedly will step through all keyboard accessible content on the page, such as links and form fields. Pressing Enter with a link selected will activate this link. Tabbing to a form field will then allow you interact with it using the up and down arrows in the case of select elements (dropdown boxes), radio buttons, and pressing space to toggle checkboxes.
Example
The following example is taken from the online newspaper website, The Independent, on the 25th Jan 2012.
The main navigation menu for the site is shown, as is how it reacts to both mouse and keyboard use.
Mouseover example
The following 4 screenshots show the effect as a mouse user moves the mouse over the main menu items. Note the vivid change in colour, and inverted colour of the text, giving a very visual cue as to the current selected item.
"Opinion" selected
"Environment" selected
"Sport" selected
"Life & Style" selected
Keyboard access example
Now see the same menu being navigated by a keyboard user. Note the dotted outline around each menu item in turn as they are selected.
"Opinion" selected
"Environment" selected
"Sport" selected
"Life & Style" selected
Whilst the keyboard focus indicator is definitely visible in the second example as a dotted outline, the colour changing links in the mouse use example provide much greater visibility and would benefit keyboard users as much as, if not more than, mouse users.
The solution..
...is remarkably simple. The effect you get when you hover the mouse over an element like a link is typically controlled via the CSS pseudoclass :hover. As the name suggests, when you hover the mouse over an element, you get the effect described in the underlying CSS. Because you cannot hover the mouse cursor using the keyboard, an equivalent for keyboard use was created: :focus.
The simple solution is just to edit your CSS so that wherever you use the :hover pseudoclass, you also use the :focus pseudoclass as well e.g.
a:hover, a:focus {
color: #fff;
background-color: #000;
}
In this code example, whenever a link is hovered over, the text colour is changed to white (#fff) and the background colour is changed to black (#000). Because the :focus pseudoclass is used in conjunction with the :focus pseudoclass, this effect will be visible to both keyboard and mouse users.
In fact, as you browse the AbilityNet site, you will notice that links have both a solid underline added to them and a yellow background colour when you move the mouse over them, and also if you tab to them with the keyboard. Try this now!
References
2.4 million adults with a disability affecting physical co-ordination in the UK. Source: http://odi.dwp.gov.uk/docs/res/factsheets/disability-prevalence.pdf (PDF)
The most commonly reported impairments in the UK are those that affect mobility, lifting or carrying - these are typically issues that may affect use of the mouse or keyboard.
Further reading
Note that making the keyboard focus visible is just one aspect of ensuring greater accessibility for keyboard users. Generally speaking, all functionality and content should be accessible via the keyboard.
Back to the Articles home page.
For more information:
- Email accessibility@AbilityNet.org.uk
- Phone 0800 269545
Related links
Contribute
If you'd like to submit an item you have written for inclusion here please send it to accessibility@AbilityNet.org.uk.