SC Shortname:

Clear Controls

SC Text

Clear controls: Visual interactive controls are clear or clear controls are easily available though personalization that conforms to all of the following:

• Interactive controls are visually discriminable and have a border around the interactive area of the element with a contrast ratio of at least 4.5:1 with its background, or has fill that provides a contrast ratio of at least 3:1 from the background. It is sufficient for links to be consistently underlined.
• Interactive controls are available in a standard style that indicates how they can be used and what action it will trigger or have clearly labeled instructions that explains their use. 

An exception is available if the style is an essential part of the main function of the site, such as for a game.

Suggestion for Priority Level (A/AA/AAA)

Level AA

Related Glossary additions or changes

easily available (or easily available mode or setting)

• Can be set one time with as wide a scope as possible (such as using the standards of the OS, ETSI or GPII when available) and
• with the option to save or change the setting, were available interoperability but also for a scope of the set of web pages and
• is reachable from each screen where it may be needed, and the path and control conforms to all of the document.

What Principle and Guideline the SC falls within.

Principle 3, The COGA task force suggests that updates to this principle apply to content other than text content only.

Description

The intent of this success criterion is to help a person understand which elements in the content are interactive. The success criterion would be met by ensuring there are sufficient visual affordances to indicate an element is interactive and the boundaries of the element. This will not only set it apart from plain text content that is not interactive, but also indicate the clickable area for easier selection. We want to avoid people accidentally triggering events as well as not knowing how to trigger the events they need.

Note that visual affordances can take different forms. One common visual affordance is to display an underline under a link. Another is to provide borders around interactive elements that have sufficient contrast to show the active clickable area for the element.

Benefits

Many people cannot easily learn design metaphors that cause interactive controls to have subtle visual differences from the rest of the content such as techniques found in flat design. When interactive controls have understandable visual affordances, users can more easily locate desired items to interact with and know what that interaction might do. In addition, when users can easily see the active boundaries for controls it improves the ability to select that control via a pointing device or by touch. This is discussed fully in the COGA Flat Design Issue Paper

Many people cannot easily learn new design metaphors or remember things that they have learned for example, people with Mild Cognitive Impairment (MCI) or dementia. Without these skills it can be much harder or impossible to know what the interaction may do and to learn new controls. As one user with mild dementia stated "I have great difficulty remembering things, working things out, and interpreting things."

As long as interfaces are familiar and clear the user can continue to use the Web.

Related Resources

Resources are for information purposes only. No endorsement is intended or implied.

• Gap analysis section 2.3.1 Issues with Flat Design
• User needs Table (Table 5: Simple and Clear Interface)
• See also : User needs Table:6, 7,8 and 9
• Background research document
• Semantics for adaptive interfaces
• COGA Techniques Techniques for the Cognitive and Learning Disabilities Accessibility Task Force (COGA) Section 2.6.1 Use clear visual affordances

Testability

1. Confirm that links are underlined or can be underlined via personalization
2. Other Interactive controls - Confirm one of the following:
   1. A border is present around the interactive area of the element with a contrast ratio of at least 4.5:1 with its background,
   2. or has a fill that provides a contrast ratio of at least 3:1 from the background.
   3. The sufficient background or border is available via personalization (not more then one click or interaction away)
3. Confirm one of the following:
   1. Controls are available in a standard style and function such as HTML controls or standard controls for the native platform
   2. Controls are available as standard controls as described in a WCAG technique
   3. Detailed instructions on how to trigger each event are easily available (not more then one click or interaction away)
   4. One of the above is available via personalization
4. For non-link elements, ensure there is either a border, or a fill that:
• Outlines the active area (e.g. clickable, touchable part) of the element. Note: if an element has multiple actions or active areas, each has an ` border or fill.

Techniques

1. Existing technique: G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them">
2. New technique: Providing a border around the interactive area of the element with a contrast ratio of 4.5:1 with its background, or has fill that provides a contrast ratio of at least 3:1 from the background

Some examples of interactive elements where the border would be most helpful:

• Icons
• Buttons
• Text input fields
• Switches
• Sliders
3. New technique: Providing an underline to identify links
4. New technique: Using personalization to enhance visual affordances on interactive elements
5. New technique: Using standard controls
6. Adding semantics to enable personalized controls
7. Adding instructions
8. Adding semantics to enable instructions

Working groups notes

Could be merged with the Low Vision and Mobile TF SC such as “Metadata On Hover” and is “Content that appears on hover should not obscure the triggering element or other content.”

Alternative wording

Interactive controls use a visual style that makes it understandable that the controls are interactive and indicate the active area for the control with the following exception:

• Customizable: The visual affordances for interactive controls are available through personalization.

Original wording: Interactive controls are clear or clear controls are easily available though personalization Boundaries on a interactive controls and icons should have a sufficient color contrast of 1.5 (visual only) or can be emphasized in the modality of the user. Auditory emphasis can include slightly louder content, a change in the pitch or a change in the voice.