At Witty Works, we believe that accessibility is more than just a feature—it’s a necessity. In our previous blog post about accessibility, we discussed how our Microsoft Word Add-in is designed to ensure inclusivity for all users, especially those who rely on assistive technologies. However, creating a truly accessible product involves overcoming significant technical hurdles.
In this follow-up post, we’ll dive into the technical challenges we faced (and continue to face) in making our add-in accessible within the Microsoft Word environment. We’ll also share what’s coming next as we continue to improve the user experience for everyone.
Here's a short recap why accessibility matters:
- 1 in 5 people in the EU have some form of disability, be it visual, motor, or cognitive - that's over 87 million affected individuals. Meanwhile only 10% of websites and digital services are accessible. (Source: European Commission)
- The European Accessibility Act (EAA) seeks to bridge the gap by 2025, mandating that digital products and services become accessible to all. The EAA sets clear guidelines for companies to follow, ensuring that their websites, apps, and digital tools meet the needs of individuals with disabilities.
Understanding the users and the technical environment
The initial challenge we faced was comprehending how users with disabilities would interact with Witty and, more broadly, Microsoft Word. This necessitated a deep dive into assistive technologies (AT) such as screen readers, keyboard navigation and shortcuts, and exploring the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) specifications to ensure proper labeling and structure of UI elements.
Unfortunately, some of the most commonly used tools to assess accessibility were not really compatible with the Microsoft Word Add-in. Additionally, the guidelines regarding accessibility for Add-ins from Microsoft were unclear and missed important details, so it took us some trial and error to find out how the interaction between the two products would work.
Despite these challenges, we were able to find a partner in Zenyth Group who was able to audit the current status of Witty and provide hands-on recommendations on how to improve accessibility.
Navigating Keyboard Shortcuts: A Balancing Act
One of the key elements of accessibility is enabling users to navigate our add-in entirely through keyboard shortcuts. This is critical for users with motor impairments, who may not be able to use a mouse. However, creating a seamless keyboard navigation experience presented several challenges:
- Conflict with Existing Shortcuts: Microsoft Word already uses a wide array of keyboard shortcuts, which means we needed to find ways to implement our own without overlapping or causing confusion.
- Custom Shortcut Development: While creating our custom keyboard shortcuts, we needed to ensure that they were both intuitive and easy to remember for users. Striking the balance between offering functionality and ensuring simplicity required testing and iteration.
- Cross-Platform Consistency: Since users work across different platforms (Windows, macOS, etc.), we had to ensure that our keyboard shortcuts function consistently, no matter the operating system.
Despite all the obstacles, we’re proud of the progress we’ve made in making keyboard navigation fully functional and intuitive. However, we continue to optimize this area, and are very happy to receive feedback from our users.
Voiceover functionality
Implementing voiceover functionality was another crucial aspect of our accessibility efforts. Screen readers are essential for users with visual impairments, and ensuring our add-in works seamlessly with these tools was a top priority.
We faced challenges in properly labeling all interactive elements within our add-in, ensuring that screen readers could accurately describe each component's function. This required a meticulous review of our UI, making sure that every button, and menu item had clear, concise, and meaningful descriptions.
Additionally, we had to consider the live regions where the UI would update after user interaction (e.g. accepting and exchanging the text to one of the Witty alternatives) and figure out how to announce to users the adequate information in the right order.
Focus management
Proper focus management is critical for users navigating with keyboards or assistive technologies. We needed to ensure that focus moved predictably through our add-in's interface and that users could easily understand where they were at any given moment especially after interacting with the listed results.
This involved carefully managing focus when accepting or ignoring alternatives, ensuring that focus returned to the appropriate element after an action was completed.
Conquering the Triple Toggle Challenge
One of our most complex UI elements, the dashboard with its PHP-driven triple toggle, presented unique accessibility challenges. We needed to ensure that this feature was not only visually appealing but also fully functional for users relying on screen readers or keyboard navigation.
We implemented custom ARIA attributes to clearly convey the state and function of each toggle to screen readers. For keyboard users, we created an intuitive navigation system that allowed them to move between toggles and activate them easily.
The PHP backend had to be optimized to ensure that state changes were communicated quickly and accurately to assistive technologies, maintaining a responsive experience for all users.
Conclusion: A Commitment to Continuous Improvement
At Witty Works, we are committed to pushing the boundaries of accessibility and creating tools that are truly inclusive. While we've overcome many technical difficulties, we remain dedicated to solving the challenges that arise as we continue to innovate. Our journey doesn't end here—there is always more we can do to make our product better. We're excited to extend the accessibility capabilities from our Word Add-in to our browser extension and to review and enhance the visual experience by improving color contrast across our corporate identity.
If you’re interested in following our journey or learning more about how we’re making digital tools more inclusive, stay tuned for updates.
