Elements

✎ Technique: Identify input purpose

Make it easier for people to complete input fields requesting personal information. People with mobility issues have difficulty entering data into the fields. People with cognitive disabilities may have difficulty remembering details. It may be hard for them to enter personal information due to memory loss, dyslexia, or other impairments.

Developers should use autocomplete on fields that collect personal data to explicitly identify the data type. Use the list of  Input Purposes for User Interface Components to select the correct value. Turn off autocomplete for sensitive information.

(Source: Knowbility article on input purpose)

... Read more about ✎ Technique: Identify input purpose

✎ Technique: Reflow

Use responsive design to allow your content to zoom and respond to various screen sizes.

Present content without loss of information or functionality, and without requiring scrolling in two dimensions, except for parts of the content which require two-dimensional layout for usage or meaning.

Examples of content which require two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.

(Source: Knowbility article on Reflow)... Read more about ✎ Technique: Reflow

✎ Technique: Text spacing

Anyone who needs to change the font or text display properties to read the content will benefit from this guideline. This includes people with low vision who use a bigger font, and people with dyslexia, reading, or other cognitive disabilities, who may have specific spacing requirements.

✎ Technique: Content on hover or focus

Make it easier for users to interact with added content. Tooltips, drop-down menus, and popups are examples of added content. This new content is usually made visible when you put your mouse pointer over a "trigger" item such as a button or link. It can also display when an item receives focus. Some people have difficulty keeping the mouse pointer over the trigger item. Also, the new content will sometimes obscure existing content. The three requirements of this success criterion, as outlined below, help make the added content more operable.

... Read more about ✎ Technique: Content on hover or focus

✎ Technique: Character key shortcuts

If keyboard shortcuts are implemented using only a letter (including upper- and lower-case letters), punctuation, number, or symbol characters, provide a way to turn off or remap character key shortcuts:

  • Turn off: A mechanism is available to turn the shortcut off;
  • Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc);
  • Active only on focus: The keyboard shortcut for a user interface component is only active when...
Read more about ✎ Technique: Character key shortcuts

✎ Technique: Pointer gestures

All operations must use simple gestures that need only a single touch. Gestures that need two fingers or complicated movements can be hard to operate for people with hand tremors or limited movement.  Users with alternative input devices such as a mouth stick, sip-and-puff, or head mouse also benefit. Simple gestures are easier for someone with cognitive impairments to remember and use. If the site or application does use multi-touch gestures, be sure to also provide simple interfaces. 

✎ Technique: Pointer cancellation

Make it easier for users to operate functionality through various inputs beyond keyboard; however, it is essential that functions emulate a keyboard and that a mechanism to undo or abort an action is provided.

This guideline helps people with tremors or mobility impairments who may touch or click on the wrong location by mistake. This mistake can cause an unintended action. This success criterion also benefits people with cognitive disabilities, who can become confused when something unexpected happens because they activated a control by accident.

✎ Technique: Label in name

People with disabilities rely on interface controls that are used programmatically. These controls have a visual label, as well as a programmatic label, known as its Accessible Name. Users have a much better experience if the visible text labels of controls match their accessible names.

Speech input users can navigate by speaking the visible text labels of menus, links and buttons that appear on the screen. It’s confusing to speech input users when they say a visible text label they see, but the speech input does not work because the accessible name that is enabled as a speech input command does not match the visible label.

✎ Technique: Motion actuation

Ensure that functions that are triggered by moving a device (for example, shaking or tilting) or by gesturing towards the device (so that sensors like a camera can pick up and interpret the gesturing), can also be operated by more conventional user interface components, unless the motion is essential for the function or not using motions or gestures would invalidate the activity. 

Users who may be unable to perform particular motions (such as tilting, shaking, or gesturing) because the device may be mounted or users may be physically unable to perform the necessary movement, should still be able to operate all functionality by other means (e.g., touch or voice input).

Some users may accidentally activate sensors due to tremors or other motor impairments. The user must have the ability to turn off motion actuation to prevent accidental triggering of functions.

✎ Technique: Status messages

Assistive technology users should be able to detect when important changes occur on a web page, With the use of a status message, information can be provided to the user without changing focus or unnecessarily interrupting their work. The following are the kinds of status messages to provide:

  • success or results of an action
  • waiting state of an application
  • progress of a process
  • existence of errors

... Read more about ✎ Technique: Status messages

✎ Technique: Differentiating controls

Placement of controls affects their ease of use. For example, for a search feature, the “submit” button should be positioned right after the input field. Appearance and positioning are particularly important when providing a control that supports “destructive” actions, such as a “delete” or “clear” button. In these cases, ensure that these controls are clearly differentiated .... Read more about ✎ Technique: Differentiating controls

Pages