Links: Keyboard, mouse and touch accessibility

A link must be accessible to people using a keyboard, mouse or touch.

Keyboard accessibility

To learn why it’s important to make content keyboard accessible, see the Knowledge Area: Keyboard accessibility.

Keyboard focusability

A link must be keyboard focusable via the Tab key.

A link created using the <a> or <area> element with an href attribute is keyboard focusable by default using the Tab key.

If the element used to create the custom link is not natively focusable, it needs tabindex="0" added. This puts the link into the keyboard focus order based on its position in the HTML markup.

Meeting the Web Accessibility Standard

When a link is keyboard focusable via the Tab key, and keyboard focus can move to and from the link, this helps meet WCAG 2:

Visible focus indicators

A link must always show a visible focus indicator when it has keyboard focus.

For more information, see Visible focus indicators — Knowledge Area: Keyboard accessibility.

Meeting the Web Accessibility Standard

When a link with keyboard focus always shows a visible focus indicator, this meets WCAG 2 Success Criterion 2.4.7 Focus Visible (Level A).

Note: In WCAG 2.1, Success Criterion 2.4.7 Focus Visible is a Level AA requirement. In WCAG 2.2, it is a Level A requirement.

Logical focus order

The order in which a link receives keyboard focus must make sense to the user. That is, a link’s position in the focus order must be logical in the way that it relates to surrounding content.

For more information, see Logical focus order — Knowledge Area: Keyboard accessibility.

Meeting the Web Accessibility Standard

When a link is part of a logical keyboard focus order, this meets WCAG 2 Success Criterion 2.4.3 Focus Order (Level A).

Keyboard operability

A link must be able to be activated using the Enter key.

Meeting the Web Accessibility Standard

When a link is operable using the Enter key, this helps meet WCAG 2 Success Criterion 2.1.1 Keyboard (Level A).

A link created using the <a> or <area> element with an href attribute is keyboard operable by default using the Enter key.

To ensure that keyboard users can activate a custom link using the Enter key, a keydown event handler is needed so that when the link has focus and the Enter key is pressed, the link is triggered to send the browser to another location or resource.

For more information, see:

Mouse and touch accessibility

Links also need to work for people who use a mouse or a touchscreen interface.

A link created using the <a> or <area> element with an href attribute already responds to mouse clicks and touch.

If the element used to create the link does not already respond to mouse clicks, a click event handler is required to make the custom link activate on mouse click or touch.

For more information, see: