Accessibility

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.