Tools
Figma • Level Access • WCAG 2.2 • MDN web docs • Spreadsheet • Asana
A Voluntary Product Accessibility Template (VPAT) is a document that outlines how a product or service complies with accessibility standards, particularly the Section 508 requirements in the United States.
As the lead UX designer tasked with remediating the first VPAT in our company, I am dedicated to ensuring that our digital products meet the highest accessibility standards.
Unveiling the Accessibility Journey
We received our VPAT from our vendor, Level Access. We thoroughly understood the 535 findings broken down into 4 audits. The findings included UX work and development work. The goal is to create a workflow and provide guidance and best practices for accessibility to our product and development team.
An overview of our VPAT, which was broken into four units.
Our team had several sessions to decide which workflow was best for this remediation. We gather product, development, UX, testing, and QA. I took the lead and decided the first step into this remediation would be understanding the flows and the repeating findings in the VPAT.
Although level access provides several features in their platform, to collaborate faster across teams, I created a spreadsheet to view all findings in one place and be able to sort by screen; in this spreadsheet, we included effort from development.
I conducted several sessions with our teams to understand their needs, listen to their timelines, and develop the best way to provide workflow and remediation guidance when UX is needed.
Screenshot of the spreadsheet we use to communicate our teams the findings and how to group them together.
Enhancing Development Workflow with UX Expertise
After several sessions, listening to all the teams, and discussing, we provided a proposed workflow for this work. Our workflow included the following steps:
1. Note the findings in Figma
2. Define UX work and Development work in the file. I will create designs in the file for UX work and note all the development needs to fix the findings correctly.
3. Review the feasibility of the solutions with development and product.
4. Handoff file to development.
5. Review implementation before retesting with Level access.
Having a visual guide for all the findings in each audited screen helped us to better estimate timeframes and efforts for development in Figma.
UX Strategies for Remediation Success
As part of our commitment to ensuring user accessibility, we conducted meticulous UX work to remediate identified UX issues. This involved addressing color contrast, focus order, modifying labels and icons, and creating new fixes for components that required modification. We paid close attention to detail to ensure that every aspect of the user experience was optimized for inclusivity and ease of use.
Our notations and guidance were thoroughly explained to ensure development success.
One of the challenges we took on was reflow, which we addressed by designing screens at 200% and 400% magnification levels. This ensured that the interface remained responsive and user-friendly across varying display sizes.
To bolster the development team, we prepared comprehensive handoff files. These files included clear explanations of the reflow process and its implementation and offered best practices in HTML, CSS, and JS. We aimed to empower the development team to integrate accessibility features seamlessly, rectify existing issues, and uphold accessibility standards effectively in future development projects.
Reflow was one of the biggest challenges to surpass in this remediation.
The Impact of Accessibility Remediation Efforts
We approached accessibility remediation with a clear goal in mind, and through iterative workflow enhancements, we achieved our objective a month ahead of schedule. This early completion gave the development team ample time to meticulously assess and refine the UI-UX elements required for the remediation. It demonstrated our commitment to efficiency and excellence.
Additionally, the impact of our work went beyond just meeting deadlines; we successfully shipped the first build with accessibility enhancements for the company, which marked a significant milestone in our journey toward inclusivity.
This achievement represents a monumental leap forward in accessibility standards within the organization, setting a precedent for future initiatives. The valuable lessons learned throughout this process will undoubtedly inform and elevate our approach to upcoming VPATs, ensuring continued progress and success in accessibility initiatives.