While I agree with your message of "make things accessible" I think you're pointing the finger the wrong way.
> This is a fantastic article, it does miss one very key point about bog-standard HTML which is worth mentioning though.
> The standard widgets are all accessible, people with screen readers, limited mobility, poor vision, etc, all rely on pages being written so the devices they use to read the web can function properly. People who choose to eschew these standard components very frequently end up with a site which is unusable for disabled people.
> Very few people have the skill to turn a div into an effective button, yet over and over I see web sites with rows of buttons which are in fact just divs with javascript behind them.
Using a div as a button is not "bog-standard" HTML or a "standard component". Use a button and be done with it.
Using React or whatever does not prevent you from doing this, and in fact makes it less obvious to anyone doing a cursory review. I've not seen any difference overall in the amount of people knowingly using divs as buttons with plain HTML vs whatever framework, but I have seen an increase in unknowingly doing so by importing a calendar widget or similar without reviewing it.
FWIW, using React or whatever makes it more obvious that you're making these mistakes because your event handlers are attached right on the "HTML" element. It makes it easy to spot because you see
<div className="button" onClick={handler}>
and it immedaitely sticks out as a mistake. Because its easier to statically understand these mistakes, theres even tooling to automate detecting some of them as you type https://www.npmjs.com/package/eslint-plugin-jsx-a11y
> FWIW, using React or whatever makes it more obvious that you're making these mistakes because your event handlers are attached right on the "HTML" element. It makes it easy to spot because you see
> <div className="button" onClick={handler}>
> and it immedaitely sticks out as a mistake. Because its easier to statically understand these mistakes, theres even tooling to automate detecting some of them as you type https://www.npmjs.com/package/eslint-plugin-jsx-a11y
I'm not sure how you got that out of
> I have seen an increase in unknowingly doing so by importing a calendar widget or similar without reviewing it.
The point of using components is so that you don't have to look under the covers to understand them at a high level, but that also means if you don't look you don't see how they're breaking accessibility.
> Using React or whatever does not prevent you from doing this, and in fact makes it less obvious to anyone doing a cursory review
Sure. From that level it might not be apparent, but within that component the mistake would be immediately obvious, on a cursory glance. Again, I don’t think React or whatever makes this less obvious.
But really, this just isn’t a problem I’ve seen in practice. Because of good tooling, and the ease of doing things the right way, I think the majority do it well. Those that don’t were going to fuck it up regardless of the framework or paradigm.
> This is a fantastic article, it does miss one very key point about bog-standard HTML which is worth mentioning though.
> The standard widgets are all accessible, people with screen readers, limited mobility, poor vision, etc, all rely on pages being written so the devices they use to read the web can function properly. People who choose to eschew these standard components very frequently end up with a site which is unusable for disabled people.
> Very few people have the skill to turn a div into an effective button, yet over and over I see web sites with rows of buttons which are in fact just divs with javascript behind them.
Using a div as a button is not "bog-standard" HTML or a "standard component". Use a button and be done with it.
Using React or whatever does not prevent you from doing this, and in fact makes it less obvious to anyone doing a cursory review. I've not seen any difference overall in the amount of people knowingly using divs as buttons with plain HTML vs whatever framework, but I have seen an increase in unknowingly doing so by importing a calendar widget or similar without reviewing it.