Search…
Search…
Accessibility
Live
Ensuring an inclusive experience for all users is a fundamental part of any design system. Accessibility goes beyond compliance, it’s about creating interfaces that are usable, understandable, and enjoyable for everyone, regardless of ability.
AA
WCAG 2.1 accessibility compliant
Accessibility
Ensuring an inclusive experience for all users is a fundamental part of any design system. Accessibility goes beyond compliance, it’s about creating interfaces that are usable, understandable, and enjoyable for everyone, regardless of ability.
Accessibility
Live
Ensuring an inclusive experience for all users is a fundamental part of any design system. Accessibility goes beyond compliance, it’s about creating interfaces that are usable, understandable, and enjoyable for everyone, regardless of ability.
AA
WCAG 2.1 accessibility compliant
An accessible design system benefits not only users with disabilities but also improves overall usability, making products easier to navigate for everyone. By considering factors like color contrast, keyboard navigation, readable typography, and assistive technology support, you create a more seamless experience across different devices and user needs. This design system is built with accessibility as a core principle, following WCAG 2.1 Level AA standards to ensure inclusive experiences for all users.
WCAG 2.1 Level AA Compliance
All components are designed and tested to meet the following success criteria
Perceivable
Criteria | Description |
|---|---|
1.4.3 Contrast (Minimum) | 4.5:1 contrast ratio for normal text |
1.4.6 Contrast (Enhanced) | 7:1 contrast ratio where possible |
1.4.11 Non-text Contrast | 3:1 contrast for UI components |
Operable
Criteria | Description |
|---|---|
2.1.1 Keyboard | All functionality available via keyboard |
2.4.6 Headings and Labels | Descriptive labels and headings |
2.4.7 Focus Visible | Clear focus indicators |
Understandable
Criteria | Description |
|---|---|
3.2.2 On Input | Predictable functionality |
3.3.2 Labels or Instructions | Clear form labeling |
Robust
Criteria | Description |
|---|---|
4.1.2 Name, Role, Value | Proper semantic markup and ARIA |
Implementation Guidelines
For Developers
Criteria | Description |
|---|---|
Use semantic HTML | start with the right elements |
Progressive enhancement | ensure basic functionality without JavaScript |
Test early and often | integrate accessibility into the workflow |
Provide alternatives | support audio, visual, and tactile needs |
For Designers
Criteria | Description |
|---|---|
Design for keyboard | ensure all interactions work without a mouse |
Consider focus states | design clear and consistent focus indicators |
Use sufficient contrast | check ratios in design tools |
Design error states | provide clear and consistent error patterns |
For Content Authors
Criteria | Description |
|---|---|
Write descriptive labels | make button and link text meaningful |
Provide context | help users understand their location and next steps |
Use headings properly | maintain logical hierarchies |
Alt text for images | describe meaningfully or mark as decorative |
Resources and Tools
Testing Tools
Criteria | Description |
|---|---|
browser extension for accessibility testing | |
web accessibility evaluation tool | |
web accessibility evaluation tool | |
NVDA (Windows), VoiceOver (macOS), Orca (Linux) | |
Figma plugin for contrast checking | |
desktop contrast testing tool | |
online contrast ratio tool |
Continuous Improvement
Accessibility is an ongoing process. We regularly:
Review and test components with real users
Update patterns in line with new WCAG guidelines
Gather feedback from the accessibility community
Improve documentation and implementation guides
This design system prioritises inclusive design, ensuring that all users can effectively interact with digital products regardless of ability or assistive technology.
An accessible design system benefits not only users with disabilities but also improves overall usability, making products easier to navigate for everyone. By considering factors like color contrast, keyboard navigation, readable typography, and assistive technology support, you create a more seamless experience across different devices and user needs. This design system is built with accessibility as a core principle, following WCAG 2.1 Level AA standards to ensure inclusive experiences for all users.
WCAG 2.1 Level AA Compliance
All components are designed and tested to meet the following success criteria
Perceivable
Criteria | Description |
|---|---|
1.4.3 Contrast (Minimum) | 4.5:1 contrast ratio for normal text |
1.4.6 Contrast (Enhanced) | 7:1 contrast ratio where possible |
1.4.11 Non-text Contrast | 3:1 contrast for UI components |
Operable
Criteria | Description |
|---|---|
2.1.1 Keyboard | All functionality available via keyboard |
2.4.6 Headings and Labels | Descriptive labels and headings |
2.4.7 Focus Visible | Clear focus indicators |
Understandable
Criteria | Description |
|---|---|
3.2.2 On Input | Predictable functionality |
3.3.2 Labels or Instructions | Clear form labeling |
Robust
Criteria | Description |
|---|---|
4.1.2 Name, Role, Value | Proper semantic markup and ARIA |
Implementation Guidelines
For Developers
Criteria | Description |
|---|---|
Use semantic HTML | start with the right elements |
Progressive enhancement | ensure basic functionality without JavaScript |
Test early and often | integrate accessibility into the workflow |
Provide alternatives | support audio, visual, and tactile needs |
For Designers
Criteria | Description |
|---|---|
Design for keyboard | ensure all interactions work without a mouse |
Consider focus states | design clear and consistent focus indicators |
Use sufficient contrast | check ratios in design tools |
Design error states | provide clear and consistent error patterns |
For Content Authors
Criteria | Description |
|---|---|
Write descriptive labels | make button and link text meaningful |
Provide context | help users understand their location and next steps |
Use headings properly | maintain logical hierarchies |
Alt text for images | describe meaningfully or mark as decorative |
Resources and Tools
Testing Tools
Criteria | Description |
|---|---|
browser extension for accessibility testing | |
web accessibility evaluation tool | |
web accessibility evaluation tool | |
NVDA (Windows), VoiceOver (macOS), Orca (Linux) | |
Figma plugin for contrast checking | |
desktop contrast testing tool | |
online contrast ratio tool |
Continuous Improvement
Accessibility is an ongoing process. We regularly:
Review and test components with real users
Update patterns in line with new WCAG guidelines
Gather feedback from the accessibility community
Improve documentation and implementation guides
This design system prioritises inclusive design, ensuring that all users can effectively interact with digital products regardless of ability or assistive technology.
An accessible design system benefits not only users with disabilities but also improves overall usability, making products easier to navigate for everyone. By considering factors like color contrast, keyboard navigation, readable typography, and assistive technology support, you create a more seamless experience across different devices and user needs. This design system is built with accessibility as a core principle, following WCAG 2.1 Level AA standards to ensure inclusive experiences for all users.
WCAG 2.1 Level AA Compliance
All components are designed and tested to meet the following success criteria
Perceivable
Criteria | Description |
|---|---|
1.4.3 Contrast (Minimum) | 4.5:1 contrast ratio for normal text |
1.4.6 Contrast (Enhanced) | 7:1 contrast ratio where possible |
1.4.11 Non-text Contrast | 3:1 contrast for UI components |
Operable
Criteria | Description |
|---|---|
2.1.1 Keyboard | All functionality available via keyboard |
2.4.6 Headings and Labels | Descriptive labels and headings |
2.4.7 Focus Visible | Clear focus indicators |
Understandable
Criteria | Description |
|---|---|
3.2.2 On Input | Predictable functionality |
3.3.2 Labels or Instructions | Clear form labeling |
Robust
Criteria | Description |
|---|---|
4.1.2 Name, Role, Value | Proper semantic markup and ARIA |
Implementation Guidelines
For Developers
Criteria | Description |
|---|---|
Use semantic HTML | start with the right elements |
Progressive enhancement | ensure basic functionality without JavaScript |
Test early and often | integrate accessibility into the workflow |
Provide alternatives | support audio, visual, and tactile needs |
For Designers
Criteria | Description |
|---|---|
Design for keyboard | ensure all interactions work without a mouse |
Consider focus states | design clear and consistent focus indicators |
Use sufficient contrast | check ratios in design tools |
Design error states | provide clear and consistent error patterns |
For Content Authors
Criteria | Description |
|---|---|
Write descriptive labels | make button and link text meaningful |
Provide context | help users understand their location and next steps |
Use headings properly | maintain logical hierarchies |
Alt text for images | describe meaningfully or mark as decorative |
Resources and Tools
Testing Tools
Criteria | Description |
|---|---|
browser extension for accessibility testing | |
web accessibility evaluation tool | |
web accessibility evaluation tool | |
NVDA (Windows), VoiceOver (macOS), Orca (Linux) | |
Figma plugin for contrast checking | |
desktop contrast testing tool | |
online contrast ratio tool |
Continuous Improvement
Accessibility is an ongoing process. We regularly:
Review and test components with real users
Update patterns in line with new WCAG guidelines
Gather feedback from the accessibility community
Improve documentation and implementation guides
This design system prioritises inclusive design, ensuring that all users can effectively interact with digital products regardless of ability or assistive technology.
Continue reading
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.