Design for diverse experiences
A well-designed product should offer the same quality experience to everyone, regardless of their abilities. Soul components meet or exceed WCAG 2.1 AA standards to ensure an accessible foundation.
Accessibility is the responsibility of everyone. Consider accessibility early in the team's planning to avoid costly reworks.
What we design for
We design for people, prioritizing equity and inclusion at every step. We consider various disabilities:
- For visual disabilities, we use good alternative text, semantic HTML, and accessible color contrast; for hearing disabilities, we provide non-auditory information;
- For limited mobility, we support keyboard navigation, large selectable targets, and correct semantic HTML;
- For cognitive disabilities, we use clear, easy-to-navigate wording and design.
We address multiple disabilities together and use inclusive language that is localizable and respectful of gender, race, age, and ethnicity.
To ensure our design system is accessible to all users, we have outlined the following suggestions. These guidelines will help us create a more inclusive and user-friendly experience.
Color contrast and readability
Ensure all text and background color combinations meet the WCAG (Web Content Accessibility Guidelines) standards for contrast.
Be sure the Inter font family is used as a primary font to provide users with content blocks that are easily distinguishable and comfortable to read.
Tip: Aim to contrast ratio
Use tools like WebAIM or the recommended Figma plugin contrast checker to verify that text has a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Keyboard navigation
Ensure all interactive elements (buttons, links, forms) are accessible via keyboard. This includes logical tab order and visible focus indicators.
Tip: Use clear tab order and focus indicators
Ensure all buttons, links, and form fields can be accessed and operated using the Tab key.
Provide visible focus indicators (such as a border or background change) for interactive elements focused via the keyboard.
Screen reader compatibility
Provide text alternatives for all images, icons, and non-text elements. Use ARIA (Accessible Rich Internet Applications) landmarks and roles to improve screen reader navigation.
Tip: Use “alt“ attributes and follow ARIA roles
- Add alt attributes to all images. For instance, use alt="Emplif logo" for an Emplifi logo image
- Use ARIA roles to enhance HTML elements, such as role="navigation" for a navigation menu, role="button" for clickable components and aria-live="polite" for areas where dynamic content updates (like a notification).
User testing
Involve users with disabilities in your testing process. Their feedback can help identify and address accessibility issues you might not catch otherwise.
Tip: Test accessibility during usability testing
- Recruit users with various disabilities (visual, auditory, motor, cognitive) to test your design system through local organizations, online communities, or accessibility consultants.
- Conduct usability testing sessions where these users perform common tasks using your design system. Gather feedback on any challenges they encounter and use it to make improvements.
Conclusion
Following the recommendations above can create a more accessible and inclusive product. This will not only help users with disabilities but also enhance everyone's overall user experience.