Accessibility

Accessible link column requirements

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

WCAG guidelines

1.4.3 Contrast (Minimum)

Ensure colour contrast meets minimum requirements

The use of colour in the code snippet is minimal but it is important to ensure that any text and background colours meet minimum contrast requirements to ensure readability.

2.4.4 - Link purpose

Provide clear and concise link text

The text used for the links should be descriptive and accurately convey the purpose of the link. Avoid using phrases like "click here" or "read more" as link text.

2.4.4 Focus visible

Users who navigate with the keyboard rely on visible focus indicators to understand where they are on the page. Use a visible focus indicator that meets the contrast requirements.

4.1.2 Name, Role, Value

Use Aria attributes to enhance accessibility

Apply the aria-label attribute to enhance accessibility and provide additional context for screen readers.

Use the aria-label attribute on the <ul> element to provide a descriptive label for the list (e.g., "Related links").="qld__abstract">