Direction links

Research and rationale

Arrow icon

This component comes directly from the DTA which states that arrow icons are used for direction links, rather than chevrons or triangles because they better articulate their purpose and separate the direction links from other elements that use chevron icons such as accordions or call to action links (Digital Transformation Agency, 2018).

One of the most popular direction cues comes directly from the physical world. Perhaps, there is no more obvious and universal way to show the direction than with an arrow.

Applying arrows as pseudo elements

If someone used a screen reader (a tool that speaks out what's on the screen for those who can't see well), it would announce something like, "[Link] skip to footer down arrow".

The arrow is more of a visual hint for those who can see it, and not something crucial for a screen reader to announce (Digital Transformation Agency, 2018).

So, we've updated how we insert the arrow, to separate the arrow (a supporting element) from the core content of the link, we've also started using a CSS ::before pseudo-element.

The benefit is that screen readers typically skip content in these pseudo-elements, focusing only on the important text. This method ensures that screen readers concentrate on the text which carries the primary action or information, rather than the visual hint (the arrow).

Classes

Accessible direction link requirements

Keep these considerations in mind if you are modifying the Design System or creating a custom component.

General best practice

Simplicity: The design of the arrows should be simple and clear. They should immediately convey their purpose to the user. Overly complex or stylised arrows can confuse users.

Consistency: The arrows should have a consistent design throughout the entire system. This includes consistent size, color, and style. Consistency helps users understand and predict how the system works.

Size and Spacing: The arrows should be large enough to be easily clickable, especially for users on touch devices. There should also be enough space around the arrows to prevent accidental clicks on nearby elements.

WCAG guidelines

1.4.3 Contrast (Minimum)

Ensure that the colour of the arrow and the background meet the contrast ratio of at least 4.5:1. You can use online tools to check the contrast ratio.

2.4.7 Focus visible

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. This ensures that users can see which arrow link they're interacting with when using a keyboard.

1.3.3 Sensory characteristics

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, colour, size, visual location, orientation, or sound.

While “top” and “bottom”, “back”, “next” and “previous” are allowed, other directions like “left” and “right” are not. Users who are blind or low vision need instructions that are not visual.

4.1.2 Name, Role, Value

The role of the link is inherently determined by the <a> tag. For the name, ensure that the link has accessible text.

<a href="#" class="qld__direction-link qld__direction-link--up">Go Up</a>

In this example, "Go Up" is the accessible name of the link.