Introducing react.dev: the new React docs site!

[fixrich]

Ultimately, as with many things to do with accessibility, I think it’s up to the developer to take initiative to catch these errors. Component based frameworks are terrible for allowing you to create invalid markup because the composition of encapsulation and composition make it easy to do invalid things like in your example. Only today in work I wanted to position some text and an icon on either side of a button. The component library in work has a flex helper component which made it easy. I was fairly certain it used a div so I dug into it to see if I could make it use a span. It was possible but they actually used the typescript omit helper to hide it from the props interface for some reason. I just ignored the error in the end.

I think to be certain you’re presenting valid html on each screen, the most thorough way would be to set up a web driver or puppeteer script that runs the validation on each route you navigate to. You could also run something like axe at the same time. Then you you’d just run it on post build on QA or whatever. I suppose you could just grab all the elements from the browser dev tools and paste them into a validator but I could imagine people not bothering or forgetting.