This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.

Clearly identify controls and their use

Some content here could be removed as it repeats advice in referenced guidelines.

Description

Ensure controls can be readily identified and their use is easily understood.

User Story

As someone who easily forgets things I can quickly and easily identify which elements I can interact with and am confident about what will happen when I do.

What To Do

Use standard HTML controls where possible and minimize changes to styling or behavior. Otherwise:

If you are designing new controls, make them easy to identify (I know they are there), understand (I know what they do), and use (I know how to use them).

How It Helps

Some users, for example those with memory difficulties, have trouble locating and using controls if they are unfamiliar or do no obviously appear to be interactive. For example, when links do not have underlines and blue or purple text or these only appear with focus or hover.

Controls that behave slightly differently to others that look similar or look different to others that behave the same can cause the user to become confused, or anxious and have to relearn to how use them each time.

More details

Ensure all controls have clear Affordances (the properties that indicate how users might interact with them). For example, a button looks like it may be “pressed” or an Assistive Technology gets a list of possible actions. Use clear and consistent visual design and interaction patterns, along with well tested accessibility design.

Use standard HTML controls which have carefully designed visuals and behavior to ensure easy identification and use. Users are likely to be familiar with these and know how to use them. Avoid large changes to styling or behavior in ways that may be confusing to users.

Ensure custom controls have rigorous design and testing. Avoid completely novel controls unless there is a good justification. Do not assume custom controls are obvious to see or use and provide easy to find and understand instructions on their use.

Regardless of how a user chooses to interact (pointer, keyboard, touch, vision, auditory, voice input or a combination) it should be easy to identify, understand and use controls.

Examples

Sufficient

Links with an underline and/or blue text color (or purple for already visited links), or both clearly identify links. Once a color is selected to be the primary link text color, other text on the page does not use this.

Insufficient

Links without an underline or usual blue text color (or purple for already visited links), even those that become clear when they receive focus are more difficult to use. Some users may not know they are there.

Key Terms

? Coga is developing a list of terms so should we repeat here or simple link to it ?

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.