Accessibility

Accessible tag requirements

Keep these considerations in mind if you're modifying the Design System or creating custom tag components.

WCAG guidelines

1.4.3 Contrast (Minimum)

Ensure that text in the tags has a contrast ratio of at least 4.5:1 against its background to comply with WCAG 2.1 AA.

2.1 Keyboard Accessible

Ensure that tags, especially action tags and applied filter tags, are operable by providing keyboard accessibility. Users should be able to navigate and interact with tags using only a keyboard, without requiring a mouse or other pointing device. This includes ensuring that all interactive elements within the tags are keyboard accessible.

2.4.7 Focus Visible

When a tag is in focus, it must have a visible focus outline. This ensures that keyboard-only users can perceive which element has the keyboard focus.

4.1.2 Name, Role, Value

When necessary, use ARIA attributes to provide an accessible name, convey the correct role, and ensure the component can be operated by assistive technologies. However, if a native HTML element or attribute already has the required semantics and behaviour, use it instead of repurposing an element with added ARIA roles, states, or properties to make it accessible (W3C, n.d.)

For action tags no aria label is necessary

Action tags should use native html elements and do not require ARIA attributes.

Example:

<a class="qld__tag qld__tag--link">Topic</a>

A close (remove) button within an applied filter tags

When using a button to remove an applied filter (e.g., using an icon like the letter 'x'), the aria-label attribute should clearly indicate the button's purpose. This ensures that screen readers convey the correct information to users.

Example:

<span class="qld__tag qld__tag--large qld__tag--filter">Filter: Price<button aria-label="Remove filter: Price" class="close-button">x</button></span>

Supplementary information tags

Supplementary information tags should have a role="note". This helps assistive technologies identify these tags as providing additional context or information.

Example:

<span role="note" class="qld__tag qld__tag--info">4 min read</span>

The role="note" is an ARIA landmark role that indicates non-essential content that provides additional context.