Accessibility
All values we measure need to pass in order to give a check on the accessibility on all our components.
Review
Review button, webcomponent 2023-12-11 - FAILED
- Contrast: Passed
- Aria-label: Passed
- Keyboard navigation: Failed
Enter key doesn’t trigger the visual pressed-state. - Darkmode: Passed
- Focus: Passed
- Screen reader: Passed
Important considerations
Maintain semantic consistency
Do not use links (a tag) instead of buttons (button tag). Buttons are intended for actions or operations (e.g. submitting forms, triggering actions), while links are intended for navigation to other pages or resources. Avoid using links for triggering actions, or buttons for navigation purposes.
Keyboard navigation
Uses default navigation: trigger on key-up with space, trigger on key-down with enter.
Labelling
- Ensure buttons have discernible label text. If the button has no visible text, the label attribute must be used to provide an accessible label.
- If there are multiple buttons with the same text, such as Apply, the label attribute can be used to give each button a distinct label, such as Apply for A, Apply for B, etc.
Code examples for labelling
<!-- gds-button with visible text. Visible text acts as label by default. -->
<gds-button>Label text</gds-button>
<!-- gds-button with unique label. Label attribute overrides visible text. -->
<gds-button label=”Apply for A”>Apply</gds-button>
<!-- gds-button with only visible icon. Label attribute must be provided,
since there is no visible text. -->
<gds-button label=”Close menu”> <gds-icon name=”x”></gds-icon></gds-button>