Skills for Access

Why this is important

A mouse is often assumed as being essential to control and interact with a web resource. Yet some people may have difficulty using a mouse, or may be unable to use a mouse and thus use an alternative input device such as a switching device, joystick or gesture-recognition device. Others may be using a device that does not have a mouse, or are using a mouse that doesn't work very well. So to be optimally accessible, HTML documents need to be operable without relying on the use of a mouse as an input device.

General Principles

HTML content by its very nature is keyboard accessible. This includes hyperlinks and form components such as buttons, checkboxes, drop-down menus and radio buttons, all of which are keyboard operable. General principles for HTML keyboard accessibility revolve around ensuring that a logical and efficient order is provided through every object on the page that can receive tab focus. Only when additional non-HTML content or functionality are introduced - such as JavaScript-generated content, Java applets, or multimedia content - does the designer need to take a more hands-on approach to ensuring basic keyboard accessibility.

Before you continue

The advice on this page helps you avoid introducing a specific accessibility barrier, but it's not a magic formula. To avoid attempting to follow a technical solution that is not appropriate to the resource and its intended purpose, you need to know the context in which the multimedia resource is being used:

1. The purpose or aim of the multimedia resource in question, and whether it is being used to supplement another resource in the learning environment, or whether its use is required by students.
2. The target audience, their knowledge and expectations, and the type of browsing and assistive technology that they may be using.
3. Whether the information and experiences provided by the multimedia technology are already available in an equivalent, alternative form.

For more background on this approach, see our Guide to the use of multimedia in accessible e-learning.

Technique Details

The 'tab order' through all tabbable objects on a web page is defined by the order in which they were added when the page was authored. So, if for example a link is added at a later date to a page, it may appear at the end of a tab order even though it's not at the bottom of the page. For example, when designing a page using an authoring tool, you decide at the last moment to add a search form at the top of the page - despite its position on the page, it may become the last feature of the page to receive tab focus. Additionally, complex table layout and the use of frames can also adversely affect the logic of a page's tab order.

To explicitly ensure a logical tab order, the HTML 'tabindex' attribute can be used to force a specific order through page objects such as links and form controls. However, this feature needs to be used with care. In particular, using this attribute may require you to explicitly specify tabindex for every link and form control on the page, to ensure that the tab order is as you would expect. Confusion may also arise for screen reader users, for whom the tab order of page may be different from the reading order.

It's also a good idea to use CSS to style links and other tabbable objects so that the current tab focus is clearly visible. Most graphical browsers will indicate which page object currently has tab focus using a faint grey dotted line, but this can be hard to detect, particularly for people with low vision. Use the hover and active properties, and choose a bright colour to highlight the link in focus by changing the colour of the link text and/or text background.

To ensure efficient keyboard navigation through a page, providing a way to jump directly to important areas of the page is extremely worthwhile. The most common implementation of this is the 'skip to main content' link, which ensures that keyboard users (in particular those who are also using a screen reader) can have the option of bypassing navigation bar lists and access directly the main page content. Internal page links such as 'Back to Top' links, and links allowing direct access to categories of long lists (for example lists sorted in A-Z order) can also significantly aid keyboard usability, particularly in content-heavy pages.

"Access keys" can be used to provide keyboard shortcuts to important web pages and also to features on a web page such as a Search form. They can be provided for links and form controls, and are added using the HTML accesskey attribute. However, access keys have many shortcomings, including a lack of a common standard of access key mappings (in other words the key combination that links to a specific destination), a lack in a common way in which browsers activate access keys, and perhaps most significantly, the likelihood that access key shortcuts may unexpectedly interfere with shortcuts provided by the browser and by any assistive technology being used. This makes their use extremely limited.

If you do provide access-keys, be aware that currently, no assistive technology or browser can automatically detect or report access key combinations. So the key 'mappings' must be provided as text in a web page - this page should be easily accessible and indicate the extent of these access keys. Example 1 shows the Access Keys page for the University of Sheffield. (taken from http://www.shef.ac.uk/accessibility)

Example 1: Access-key mapping page for the University of Sheffield web site.

Testing

To assess the keyboard accessibility of an HTML document, use the TAB key to step forward (or SHIFT + TAB to step backwards) through each tabbable object on the web page. Watch the focus progress through the page (unless this has been styled using CSS, it is likely to be identified only by a small dotted line surrounding the text of the link or form control) - is the order logical? Can you operate forms and drop-down navigation menus using the keyboard? Does any feature require drag-and-drop or double-clicking? If so, how can this functionality be activated using the keyboard? And if it can't, how else might a keyboard user be able to access the functionality?