WCAG 2.1 Accessibility Audit & Redesign

Objective

The objective of this project is to redesign the WebViewer SDK to ensure compliance with WCAG 2.1 AA accessibility standards. The focus will be on improving color contrast, providing text alternatives for non-text content, ensuring keyboard navigability, and enhancing overall readability. By meeting these guidelines, the goal is to create a more inclusive and user-friendly experience that accommodates individuals with visual, auditory, motor, and cognitive impairments.

Problem

According to the World Health Organization, approximately 16% of the global population lives with a disability. As digital accessibility becomes more important, many web applications and platforms still do not meet the Web Content Accessibility Guidelines (WCAG) 2.1 AA. This lack of compliance creates significant barriers for users with disabilities, making it harder for them to navigate and interact with content online. Common issues include difficulties with keyboard navigation, poor contrast ratios, and limited support for screen readers, affecting those with visual and mobility impairments.

With regulations like the European Accessibility Act (EAA) coming into effect in June 2025, it is crucial for businesses to ensure their digital products meet accessibility standards to remain compliant. While the EAA primarily applies to the EU, we also have customers in the region, which means we must ensure our platform is accessible to meet both legal requirements and the needs of our users.
‍
To address these challenges, there was a need to rebuild WebViewer’s SDK to comply with WCAG 2.1 standards, ensuring an inclusive and accessible experience for all users, and staying ahead of regulatory requirements.

Accessibility Audit

To understand the areas that required improvement, we hired an external accessibility expert, Deque, to conduct a comprehensive audit of the WebViewer product. The audit assessed the product's compliance with WCAG 2.1 standards and identified areas for improvement in usability, navigation, and compatibility with assistive technologies. Based on the findings, I worked closely with the product and development team to implement key design and interaction changes, focusing on refining color contrast and improving interactive elements. These improvements were made to ensure full compliance with accessibility guidelines and help us meet the upcoming EAA deadline.

Results

Process

In my area of focus, there were 3 key checkpoints:

To address the problem areas identified in the audit, I was responsible for improving the contrast of text, graphical elements, and user interface components to make reading easier for users with visual impairments. This not only supports users with low vision but also reduces eye strain for all users. I worked on adjusting text colors to meet WCAG 2.1 AA and some even meeting AAA standards, ensuring that text was dark enough for maximum readability. I also designed clearer hover states to make interactive elements more visible and easier to navigate.

Another area of focus was improving keyboard navigation across the entire user interface, including toolbars, modals, and panels, to ensure that users could fully navigate the interface without needing a mouse. This involved ensuring all interactive elements were visible when active, making it easier for users to track their location.

Before

After

Before

After

Before

After

Final UI

Outcome

Redesigning WebViewer to meet WCAG 2.1 AA standards was a rewarding challenge that taught me a lot about the importance of accessibility in design. I realized how essential it is to consider every user's needs, especially those with disabilities. Updating the text, color contrast, and interactive elements to meet accessibility standards made the app not only more usable but also more inclusive.

What stood out to me the most was how changes like ensuring clear contrast could have such a big impact on the user experience. This process deepened my understanding of accessibility and reinforced my belief that creating products for everyone is not just a technical requirement. Overall, this project will influence how I approach future projects, ensuring accessibility is a key consideration in creating inclusive experiences for all users.