Mindbody Accessibility Audit
In today's digital landscape, creating a website that's visually appealing and user-friendly is no longer enough. Websites also need to be accessible to everyone, regardless of their abilities. This means ensuring users with visual impairments,motor limitations, or other disabilities can navigate and interact with the website effectively.
This case study dives into the accessibility audit and redesign project undertaken for the Mindbody marketing website. We'll explore the challenges faced due to the brand's signature orange color scheme, the audit process itself, the impressive results achieved, and the valuable lessons learned.
Senior Designer
Team:
Sara Allen - Development
Van Doan - Development
The Challenge: Striking a Balance with OrangeThe Mindbody marketing website proudly featured a vibrant orange color scheme. While undeniably eye-catching, orange can be tricky to use for optimal accessibility. The initial accessibility score reflected this challenge, coming in at a respectable but improvable 74/100. Our goal? To significantly improve the website's accessibility while maintaining the brand identity.
Auditing
To achieve this, I conducted a comprehensive accessibility audit. This involved meticulously reviewing all pages and website components in the Mindbody marketing universe. The most frequent culprits we identified were color contrast violations, text size inconsistencies, and missing alt text for images. I employed Wave by WebAIM as a valuable tool for on-page screening, highlighting potential accessibility issues. I used Sketch to perform manual tests, to find problematic colors and text combinations. And then designed solutions so that the designs met WCAG visual accessibility guideliness.
Implementing a Fix
Luckily, we had built our new design system following Atomic Design priciples, and by utilizing a library of styles and components. This made updating changes to the system easy. But a few new rules had to be written. Documentation was necessary to inform current and future designers. This built awareness about the rules and standards of accessibility, and of the pitfalls possible within our branding.
Results
The results were a resounding success! Our efforts translated into a dramatic improvement in user experience and accessibility. The website's score soared to an impressive 90/100, placing it within the top 3% of all websites for accessibility – a remarkable achievement! Furthermore, Mindbody secured the coveted title of accessibility leader within the industry, surpassing all competitors.
Key Takeaways: Prioritizing Accessibility