Accessibility
Accessibility
Section titled “Accessibility”Pill Buttons are interactive components that combine text and optional icons to trigger an action. Because they are often used in dynamic contexts such as filters, tag selections, or overlays, it’s essential that they remain fully perceivable, operable, and understandable across all devices and assistive technologies.
For Design
Section titled “For Design”To ensure Pill Buttons meet accessibility standards across platforms, please follow this implementation checklist. These recommendations align with WCAG 2.2 AA and EN 301 549 standards, supporting keyboard navigation, screen readers, and assistive technologies.
Screen reader support
Section titled “Screen reader support”- Use semantic
<button>elements for all Pill Buttons. - Each button must include a descriptive text label that indicates its action or purpose.
- When used as filters or toggles, use
aria-pressed="true/false"to communicate state to assistive technologies. - Decorative icons must be hidden from screen readers (
aria-hidden="true"). - Do not use
<div>or<span>styled as buttons — these break keyboard navigation and ARIA semantics.
Keyboard navigation
Section titled “Keyboard navigation”- Buttons must be focusable via Tab and activatable with Enter or Space.
- Maintain a visible focus state at all times, following the visual reading order.
- Avoid intercepting default keyboard behaviour (e.g. arrow keys for lists or filters).
Motion sensitivity and feedback
Section titled “Motion sensitivity and feedback”- Avoid animations that trigger on hover or focus without user interaction.
- Respect the user’s
prefers-reduced-motionsystem setting to prevent motion sickness or discomfort. - Transitions should be subtle and non-essential to understanding the state change.
For Dev
Section titled “For Dev”ARIA and markup
Section titled “ARIA and markup”- Ensure the button text is always exposed to assistive technology — don’t replace it entirely with an icon.
- Provide clear ARIA roles and states for interactive variants (e.g. filters, tags, toggles).
- For asynchronous actions (spinners or loaders), add
aria-busy="true"until the action completes. - Use
aria-live="polite"regions for dynamic status updates if the button triggers content changes.
Testing and validation
Section titled “Testing and validation”- All Pill Buttons must be tested using automated accessibility tools such as Axe, Lighthouse, or Accessibility Insights before release.
- Verify focus visibility under both light and dark modes.
- Manually test with keyboard and screen readers to ensure expected behaviour.
Minimum touch area
Section titled “Minimum touch area”To ensure accessibility and ease of interaction across devices, all interactive elements — including Pill Buttons — must respect a minimum touch target size.
Absolute minimum: 24 × 24 px — This is the lowest technical requirement referenced in accessibility documentation. It ensures that the component can still be reached, but does not guarantee an optimal experience for all users.
Recommended best practice: 44 × 44 px — This follows WCAG 2.5.5 Target Size (Level AA) and EN 301 549 guidance. Provides a more comfortable interaction area for users with motor difficulties, touch devices, or when using a device outdoors. Should be considered the default requirement in our design system.
The minimum target size applies regardless of the visual size of the Pill Button. If the visible area is smaller, add invisible padding to meet the accessibility requirement. Maintain consistent spacing between pills to prevent overlapping touch areas. Consistency is key: apply the same rule across all sizes (LG, MD, SM).
- Add invisible padding around Pills when needed to expand the touch target (without altering the visual appearance).
- Ensure Pills remain easily tappable in responsive layouts and on mobile contexts.
- Keep sufficient spacing between adjacent Pills (≥ 8 px horizontally / 4 px vertically).
- Do not rely solely on the visible shape to define the touch area.
- Do not define touch areas smaller than 24 × 24 px (even for compact Pills).
- Avoid placing multiple Pills so close that their touch areas overlap, as this may hinder accessibility.
Content / Copy Guidelines
Section titled “Content / Copy Guidelines”Pill Buttons can trigger an action or represent a selectable state — for example, when used as filters or tags. Their text must clearly describe what they do or what they represent, keeping phrasing short, accessible, and easy to translate.
Keep labels concise
Section titled “Keep labels concise”- Use 1–2 words for filters, 1–3 words for actions.
- Keep copy short and scannable to support responsive behaviour.
Descriptive text
Section titled “Descriptive text”- Use clear, specific text that communicates either an action (e.g. Apply, Show all) or a state (e.g. Electric, In stock).
Avoid vague labels
Section titled “Avoid vague labels”- Do not use generic or meaningless labels such as OK, Click, Select, or Filter.
Logical label
Section titled “Logical label”- The label should make sense on its own — users shouldn’t need to read nearby text to understand it.
Character limit
Section titled “Character limit”- Keep text under 24–30 characters to maintain consistency across translations and responsive layouts.
- Allow flexibility for longer words in languages such as German or Finnish.
- Do not truncate button text: use text wrapping when necessary to preserve meaning and accessibility.
Language and tone
Section titled “Language and tone”- Use clear, neutral phrasing that can be easily localised.
- Avoid idioms, humour, or culture-specific references that might not translate well.
Sentence case
Section titled “Sentence case”- Always use sentence case (e.g. Apply filter, not APPLY FILTER).
Punctuation
Section titled “Punctuation”- Avoid punctuation unless strictly necessary (e.g. no full stops).
Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
buttons-pill-button-neutral-rested-border-color | Border color | Pill Button |
buttons-pill-button-neutral-rested-border-color | Border color | Pill Button |
buttons-pill-button-neutral-rested-foreground-color | Text color | Button label |
buttons-pill-button-neutral-rested-foreground-color | Text color | Button label |
buttons-pill-button-neutral-hover-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-hover-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-hover-foreground-color | Text color | Button label |
buttons-pill-button-neutral-hover-foreground-color | Text color | Button label |
buttons-pill-button-neutral-selected-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-selected-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-selected-foreground-color | Text color | Button label |
buttons-pill-button-neutral-selected-foreground-color | Text color | Button label |
buttons-pill-button-neutral-disabled-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-disabled-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-disabled-foreground-color | Text color | Button Label |
buttons-pill-button-neutral-disabled-foreground-color | Text color | Button Label |
color-border-focus-neutral-default | Border color | Pill Button |
color-border-focus-neutral-default | Border color | Pill Button |
Text Styles
Section titled “Text Styles”| Name | Applied as | Applied to |
|---|---|---|
Lorem Ipsum
buttons-sm-font-size | Text style | Button Label |
Lorem Ipsum
buttons-sm-font-size | Text style | Button Label |
Lorem Ipsum
buttons-md-font-size | Text style | Button Label |
Lorem Ipsum
buttons-md-font-size | Text style | Button Label |
Lorem Ipsum
buttons-lg-font-size | Text style | Button Label |
Lorem Ipsum
buttons-lg-font-size | Text style | Button Label |