Testing accessibility with Cypress

stereobooster on June 01, 2019

In the previous post, we created an accessible React accordion component. Let's test it. I don't see much sense of writing unit tests for this kind... [Read Full]
markdown guide

We're just writing tests for a really popular accessible page on the Internet. We have found an interesting one, checking for "accessible" content. If we have an element that's hidden by the zero'd dimensions trick so that it's still visible by a screen reader, cypress still think it's hidden, so a :visible or should('be.visible',...) isn't really a sufficient test. I'm wondering if you've determined a good practice for testing something like this?


I thought hidden (html5 attribute) means hidden to everyone. I need to double check, because I'm not sure


I went looking myself, found webaim.org/techniques/css/invisibl.... However, I was wrong about which trick we were using, they're 1px blocks with overflow and the content is pushed away into the overflow. I'm not near my cypress at the mo, so I'll check and if there's still an issue, put up some proper detail on it :)
I think some custom should rules could really help with a11y.


Very nice. We do something similar at my company. I wrote a Cypress command to run the aXe engine against our components as a sanity check as the final step. Here's a gist if you're interested.


Thanks for this. I started to recently use Cypress and I never thought about accessibility testing with it :)

code of conduct - report abuse