Skip to main content

📝 Testing HTML With Modern CSS https://heydonworks.com/article/testing-html-with-modern-css/

(The last time I addressed this topic was circa 2016. It's amazing what you can write selectors for these days. Plus we have custom properties!)

#CSS #a11y

Testing HTML With Modern CSS

CSS can be a great HTML testing tool, especially in 2024
Heydon Pickering (heydonworks.com)
#css #a11y
This entry was edited (4 weeks ago)

Large Heydon Collider reshared this.

in reply to Large Heydon Collider

Nicolas Chevobbe
Nicolas Chevobbe
• •
super creative way of enhancing DevTools Rules view! This is something Devtools should show in an easier way to developers.
The accessibility panel would probably surface those issues, but it requires the user to actively select it and run an audit, which is not as discoverable as displaying those in the Inspector directly
in reply to Nicolas Chevobbe

Large Heydon Collider
Large Heydon Collider
• •
@nicolaschevobbe True! But these kinds of tests don't have to be about accessibility per se anyway. They could just be org-specific tests for enforcing consistency.
@Nicolas Chevobbe
in reply to Large Heydon Collider

Chris Brailsford
Chris Brailsford
• •
the little tidbit about the :not selector being able to reach up is definitely something I didn’t know!
in reply to Large Heydon Collider

Sami MÀÀttÀ
Sami MÀÀttÀ
• •

Interesting!

I was using CSS to find sections of Finnish in an English study book, since some of those sections had unmarked English in them.

I styled the Finnish (lang="fi") with a border, so I located them easily in the preview and then went to add English attributes (lang="en") for the relevant tags inside the Finnish sections. Then I also styled the English parts within Finnish sections, so I could check if I missed any.

#ebook

#ebook

Large Heydon Collider reshared this.

in reply to Large Heydon Collider

Egor Kloos
Egor Kloos
• •
I've been using custom properties to highlight issues or unwanted patterns.
https://codepen.io/dutchcelt/pen/PoLJLVw?editors=0110
in reply to Large Heydon Collider

Egor Kloos
Egor Kloos
• •
Style queries would be a bit better, no need to set containers or worry they're already being used. But this will do until they've landed in Firefox.
It's great to load something like this on test and toggle it via web tools. Or toggle it during visual regression tests. That'll teach em. 😅
in reply to Large Heydon Collider

Benjy Stanton
Benjy Stanton
• •
nice! Like your reasons as to why this technique fits into your workflow too.
in reply to Large Heydon Collider

Kilian Valkhof
Kilian Valkhof
• •

....have you ever considered a browser that has a panel with an actual overview of issues (a11y and more), that doesn't force you to dig around the DOM.

Cause I have one of those. 😇

⇧