DEV Community

Discussion on: Testing accessibility with Cypress

Collapse
 
kodikos profile image
Jodi Winters

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?

Collapse
 
stereobooster profile image
stereobooster

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

Collapse
 
kodikos profile image
Jodi Winters

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.