Links and other actionable elements must be clearly distinguishable

Color, font, size attributes, and mouse pointer shape are used to indicate the interactive status of an element. For example, links are typically underlined, appear in a different color, or have other certain characteristics set which serve to distinguish them from static, read-only content on the page. This information tells users that the link can be interacted with to perform some action or navigation. When no visual changes or very subtle visual changes occur, some users--especially those with low vision--may not readily recognize that an element is interactive

Users must be able to determine visually, by convention and by information provided by assistive technologies if an element is actionable or if it is static content. This applies to links, buttons and other navigational elements. On touch this also applies to swipe areas that might be less obvious.

Hover states should only act as confirmation that an element is an active link. Equally, users should be able to control interfaces naturally and intuitively. Where realistic controls are used such as toggle switches and sliders, users expect to interact with them in a literal way. It can be confusing and frustrating to be forced to use a button when a more intuitive gesture is supported.

For speech output users this can be done by adding a clear label to the link or via coding the element as a link, button, slider etc. (link to alternatives section, roles section)

Tip

When styling links or actionable elements consider using:

• Underlines
• Color highlights and weight variants to make inline text clear by default
• Subtle state changes to indicate focus
• Arrows to indicate direction of swipe areas

HTML

For all actionable elements, the CSS cursor property should not be overwritten to something that doesn't appear actionable such as the value of "text".

For simulated controls, the appropriate CSS cursor property must be set, for example, pointer, or some other action for drag and drop, etc.

Links could have an underline however multiple underlined links on mobile can sometimes be hard to read. Font weight changes, borders or other visual attributes indicating action can also be used.

HTML Example

<!-- link with pale blue background to stand out from surrounding content -->
<style>
	body {
		background: #fff;
	}
 
	a {
		background: #def;
	}
</style>
 
<a href="/">Home</a>
 
<!-- Add a pointer cursor style to button elements -->
<style>
button {
	cursor: pointer;
}
</style>
 
<button type="submit">Search</button>  

HTML Failure

<!-- link with no underline and no pointer -->
<style>
a {
	cursor: text;
	text-decoration: none;
}
</style>
 
<a href="/">Home</a> 

Remediating

Ensure that the mouse pointer shape is allowed to change when the pointer is hovered over an interactive item. Ensure that a combination of attributes, color, style, or font changes are declared for each interactive element, or occur when the element is either focused via the keyboard or via the mouse. In the case of text links, they should be left to default except in cases where there is a compelling reason (such as clashing with the color scheme) to change them.

Testing

Recommended tool/method: Manual / Keyboard / Screen Reader

Ensure interactive elements can be visually distinguished from non-actionable ones 

1. Activate a screen reader
2. Use the keyboard to navigate to all actionable items
3. Verify that the actionable items can be visually distinguished from non-actionable ones
4. Verify that the actionable status is indicated by a screen reader
5. Verify that each actionable element can be navigated to using the keyboard