Keyboard and User Controls - Optimal Content Examples

Table Of Contents

Introduction

The keyboard is typically the exclusive interface that assistive technologies use to interact with user controls on a web page. Pointer-specific functionality performed with a mouse such as pointing, clicking, and dragging is often not available to assistive technologies and cannot be relied upon.

User controls are elements that can perform an action (or "do something") such as links and form elements. They are common in many technologies including HTML, PDF, Flash, and Sliverlight.

HTML User Control Examples

The following are the most common user controls in HTML.

Link

Coding Requirements

The following summarizes selected techniques from the Web Content Accessibility Guidelines (WCAG) 2.0 for satisfying the most common applicable success criterion related to this topic. Additional WCAG 2.0 success criterions, techniques, and failures not listed here may also be applicable depending on the content.

1. Focus and Input

Related to Success Criteria:

Focus is given to a user control when it is being interacted with. Only one user control has focus at all times. Focus is moved to the next user control in the focus order when a user presses the TAB key.

Input is when the user changes the value of a user control by either typing or interacting with the user control.

These requirements apply to the focus and input of user controls:

  • The focus indicator (which visually indicates the current user control which has focus) must always be visible only on the user control that has focus.

  • The focus order (which determines the order user controls receive focus) must flow in a sequence which does not affect the meaning or operation of the page.

  • All user controls must be able to receive focus.

  • A user control must not trap focus (i.e. prevent the user from changing which user control has focus).

  • A user control must not change the context of the page when it receives focus or input.

Source: WCAG 2.0, Technique G21, WCAG 2.0, Technique G59, WCAG 2.0, Technique G107, WCAG 2.0, Technique G149, WCAG 2.0, Technique G202

Note: By default, HTML user controls which have not been modified with JavaScript meet this requirement.

2. Client Side Scripting (JavaScript)

Related to Success Criteria:

JavaScript can be used to change the behaviours of HTML elements by adding and modifying actions through event handlers. Event handlers are special methods executed in JavaScript when an event occurs (e.g. clicking, changing focus, interacting with user controls).

Independent Event Handlers

When event handlers are used in JavaScript, only independent event handlers may be used. Non-independent event handlers may be provided only as a supplement.

  • Independent: onFocus, onBlur, onSelect, onChange, and onClick (links and form elements only).

  • Non Independent (Keyboard or Mouse Only): onKeyDown, onKeyUp, onKeyPress, onMouseOver, onMouseOut, and onDblClick.

3. Other Technologies

When using technologies other than HTML as the primary format (such as PDF, Flash and Sliverlight), ensure that the WCAG 2.0 sufficient techniques applicable to those technologies are being used to ensure keyboard accessibility.

Web Accessibility Considerations

Visual Impairments

  • Screen readers typically work exclusively with the keyboard. While most screen readers are compatible with a mouse, users with visual impairments are unable to use the pointing functionality of a mouse.

Mobility, Dexterity and Coordination Impairments

  • Most assistive technologies that are used by users with mobility, dexterity and coordination impairments interface work exclusively with the keyboard.