Testing links

What to check when testing the accessibility of a link.

Test that the link is keyboard accessible

Notice what happens when you use keyboard commands to move between elements on the web page.

Check the following:

• The link is keyboard focusable using the Tab key.
• The Tab key can be used to move focus from the link to the next item in the focus order.
• Shift + Tab can be used to move focus from the link to the previous item in the focus order.
• The link’s position in the keyboard focus order does not change or confuse the link’s meaning or function.
• The link shows a visible focus indicator when it receives keyboard focus.
• The Enter key can be used to activate the link.

Test that the link’s name, role, and states are programmatically determinable.

Use tools — for example, browser developer tools — that show a component’s programmatically exposed accessibility details.

• Check that the link has a meaningful accessible name.
• Check that the link has a programmatic role of link.
• Check that any custom states that the link has (other than hovered, focused, visited, active, disabled) are programmatically exposed.

Test that the link has sufficient contrast

Use a tool that can test colour contrast.

Check the following:

• Any text or image of text in the link has a minimum contrast ratio of 4.5:1 against surrounding colours.
• Any visual information or graphical objects that are needed to identify and understand the link and its current state (for example, focused or visited) have a minimum contrast ratio of 3:1 — except if the link is disabled or if it contains graphical objects whose particular visual display is essential to understanding what they mean.