WCAG Accessibility
- Category: UI Design
- Client: Wellness Checkpoint
- Project date: 2019-2021
- Project: Wellness Checkpoint
The Product:
Wellness Checkpoint is a Health & Wellness product with a suite of features surrounding the health risk assessment.
The Challenge:
Identify, document, update mockups, and implement user interface changes to meet WCAG 2.0 AA level accessibility standard to the entire app to make it accessible.
The Process:
- Identifying the issues
- Document each issue and the WCAG item that it corresponds with
- Collaborate with management and developers to identify the best accessible solution
- Keep clients informed as to the changes coming in the product that will be affected by accessibility standard updates
- Update mockups and wireframes
- Review and testing
- Management & Client review and signoff
- Push to production servers
The Work:
Some small visual insights of how the project moved through the stages of the process.
- Process Stage: Identifying the issues.
- It was decided that a new navigation bar was needed to guide accessible users through the website more efficiently.
- Process Stage: Update mockups and wireframes.
- Having to redevelop the grid question type meant having to completely disassemble it and re-design it with accessibility in mind. The scalability was key, we needed to accommodate multiple questions with anywhere from 3 to 8 possible answers.
The Solution:
Accessibility is a massive undertaking for a product that had never been held to that standard in the past. ARIA tags, focus states, tab order, type sizing/spacing, colour contrast, error handling, image alt text, navigation menus, were just some of the issues identified with the product. But after many months of collaboration internally and with clients the AA level of accessibility was achieved. The biggest takeaway for me was how massive an undertaking being compliant with accessibility standards was. It was an organizational effort from top to bottom.