Services
Visual Design
UI & UX Design
Role
Sole Designer
Tools
Figma
Level Access
MDN web docs
WCAG 2.2
00.01
Overview
This case study dives into the journey of remediating our company’s first Voluntary Product Accessibility Template (VPAT). A VPAT is essentially a transparency document, detailing how well a product meets accessibility standards, like the U.S. Section 508 requirements. As the Sole Designer, I tackled 590 accessibility findings flagged during six separate audits (iOS & Android). The mission wasn’t just about fixing issues but creating a sustainable workflow to make accessibility a cornerstone of future projects.
00.02
Problem Statement
The VPAT audit conducted by Level Access revealed over 500 accessibility issues spanning UX design, tech writing and development. The real challenge? Coordinating across teams to address these issues without derailing project timelines, all while ensuring compliance with accessibility standards and improving usability for everyone.
An overview of the audit, divided into six units.
00.03
Goals
(A) Achieve Accessibility Compliance
Resolve all identified issues to meet WCAG 2.2 standards and Section 508 requirements.
(B) Streamline Collaboration
Develop a clear, repeatable workflow to efficiently address both current and future accessibility needs.
(C) Improve User Experience
Design solutions that make our product inclusive and intuitive for all users, especially those with disabilities.
(D) Support Development Teams
Provide comprehensive guidance and resources to make the implementation of accessibility fixes as smooth as possible.
Clear notations and guidance ensured development success.
00.04
Process and Methodology
(A) Audit Analysis
We started by breaking down the findings from the VPAT audits, identifying recurring issues, and prioritizing fixes for maximum impact.
(B) Building the Workflow
Accessibility remediation requires teamwork. I collaborated with stakeholders from product, development, QA, and testing to create a step-by-step workflow.
(C) The Workflow:
Annotate accessibility findings in Figma for easy reference.
Separate design and development tasks for clarity.
Review proposed solutions with stakeholders.
Hand off final designs to developers with detailed guidance.
Conduct pre-testing to ensure fixes meet expectations before formal retesting.
(D) Design Adjustments
Tackling UX-specific issues meant addressing things like:
Color contrast updates to improve readability.
Improving focus order for users navigating via keyboard.
Adding accessible labels to form fields and icons.
Redesigning components for better reflow on magnified views.
(E) Development Support
To ensure the fixes were implemented correctly, I provided detailed handoff files, including best practices for HTML, CSS, and JavaScript.
We used spreadsheets to communicate findings and organize them effectively.
00.05
Results and Impact
(A) Early Completion
We wrapped up remediation a full month ahead of schedule, giving the development team extra time for polish.
(B) Accessibility Compliance
The product now meets WCAG 2.2 standards and Section 508 requirements, making it far more inclusive.
(C) User Experience Boost
Users, especially those with disabilities, now experience a product that’s easier and more enjoyable to navigate.
(D) Repeatable Workflow
The remediation process we developed is now a playbook for future projects, ensuring accessibility stays front and center.
Visual guides for findings in Figma helped estimate development time and effort.
00.06
Conclusion
This project underscored the importance of accessibility in product design and demonstrated the effectiveness of collaborative workflows in achieving compliance and enhancing user experience. For more information on VPAT and accessibility standards, you can refer to the Information Technology Industry Council's resources on VPAT.
Other projects
AI music theraphy mobile app