Accessibility

Accessibility is a huge and important topic nowadays. Keep in mind that in some sectors (e.g. government, public service etc.) accessibility is a requirement by law (in Europe the European Standards EN 301 549).

If you want to learn more about accessibility in general this might be handy: MDN Web Docs: What is accessibility?

Tooling support

In my day to day job for OneOffixx I was looking for a good tool to spot accessibility issues in our Windows and Web App. I knew that there must be some good tools for web development, but was not sure about Windows app support.

Accessibility itself has many aspects, but these were some non obvious key aspects in our application that we needed to address:

• Good contrasts: This one is easy to understand, but sometimes some colors or hints in the software didn’t match the required contrast ratios. High contrast modes are even harder.
• Keyboard navigation: This one is also easy to understand, but can be really hard. Some elements are nice to look at, but hard to focus with pure keyboard commands.
• Screen reader: After your application can be navigated with the keyboard you can checkout screen reader support.

Accessibility Insights

Then I found this app from Microsoft: Accessibility Insights

The tool scans active applications for any accessibility issues. Side node: The UX is a bit strange, but OK - you get used to it.

Live inspect:

The starting point is to select a window or a visible element on the screen and Accessibility Insights will highlight it:

Then you can click on “Test”, which gives you detailed test result:

(I’m not 100% if each error is really problematic, because a lot of Microsofts very own applications have many issues here.)

Tab Stops:

As already written: Keyboard navigation is a key aspect. This tool has a nice way to visualize “Tab” navigation and might help you to better understand the navigation with a keyboard:

Contrasts:

The third nice helper in Accessibility Insights is the contrast checker. It highlights contrast issues and has an easy to use color picker integrated.

Behind the scenes this tool uses the Windows Automation API / Windows UI Automation API.

Accessibility Insights for Chrome

Accessibility Insights can be used in Chrome (or Edge) as well to check web apps. The extension is similar to the Windows counter part, but has a much better “assessment” story:

Summary

This tool was really a time saver. The UX might not be the best on Windows, but it gives you some good hints. After we discovered this app for our Windows Application we used the Chrome version for our Web Application as well.

If you use or used other tools in the past: Please let me know. I’m pretty sure there are some good apps out there to help build better applications.

Hope this helps!