Automated accessibility testing gets you on the way, but doesn’t find all the problems

The problem is that we’re not used to interacting with our products in others ways than our own. There is a high chance that we’re doing things wrong when we emulate how a certain group of users would interact with our product.

Demo page with some accessibility issues
Accessibility reports in the Developer Tools Issues Panel
Lighthouse accessibility audit
Accessibility insights report next to page with flagged up problems highlighted in the document
Forms in the demo page highlighted
HTML page source shown in the developer tools with the accessibility tree showing up that the role of a DIV is generic and that it has no name, regardless of its text content
Inspect tool overlay showing the information of the broken button
Issues panel of developer tools detecting 2 contrast issues in dark mode
Issues panel of developer tools detecting more contrast issues in light mode

This proves one thing: the earlier in the process of your product you take accessibility into consideration, the better the result will be. Any interaction is a possible accessibility barrier and needs to be flagged up for testing.

Lighthouse asking you in a very timid way to also do some manual testin

The main thing to remember is that automated tests are a great way to get started and find the most obvious flaws. But they are not the end of the process if you really want to create accessible products.

Screenshot of the Skillshare class on accessibility testing

--

--

--

Maker of web things. Ponderer of new technology. Lover of simplicity. Portfolio: http://christianheilmann.com — http://developer-evangelism.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

‘s How a $25 penny board made me a better designer

Alena in a wheelchair viewing artwork in the Snite Museum

Boosting Visual Accessibility by Auto Flipping Text Color

My Fat Body is Not Rushing Back to Campus

What is web accessibility?

flat-ping webpage with lighthouse tool from chrome tools, has a score of current acessibility

Enabling Remote: Accessibility Issues in the Office-Optional Workplace

Accessibility-first Design

Trauma-informed design: understanding trauma and healing

A11y: Visually Hidden Elements

Main image of article.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Christian Heilmann

Christian Heilmann

Maker of web things. Ponderer of new technology. Lover of simplicity. Portfolio: http://christianheilmann.comhttp://developer-evangelism.com

More from Medium

A Contrast of Errors

How to use the accessibility tree for a11y testing

Anime drawing of a man standing below a tree

A Note About Refactoring and Migrating a Project to Webpack 5

My Tests are Broken Again, Part 1: Understanding the Problem