I am so fucking sick of modern web design where standard HTML form elements are reimplemented using <div> and Javascript.
For example: my mortgage provider just unleashed a new web design on the world. Functionally it’s identical to the old website, but it looks slightly shinier. It’s also completely non-functional for me.
When I try to log in, it gives me my wish-it-were-two-factor “secret question.” I enter my answer. I press Enter, and nothing happens. So I click the submit button – which is, as it turns out, a <div> with attached JavaScript. That JavaScript changes the <div> text to “please wait…” and then it sends off an asynchronous API request. When it gets the response from the server, it then changes the location URL in my browser.
Congratulations on reimplementing <form> the long way around!
Oh, and this process took way longer than it needed to, and I thought maybe it wasn’t working at all. So I opened up their contact form – which, as it turns out, only replaced the page content with that because of course everything’s a “single page application” now. I started filling it out, and when the first form submission finally came back, oops, suddenly I’m logged in! (Meaning I’ve now lost the contact form I was already halfway done filling out.)
So I opened up the contact form again in another tab, and found that I couldn’t tab into the requisite “state” drop down box (because of course I need to give my city and state to provide website feedback, for some reason). So I clicked on it, and tried typing “wa” – and nothing worked. It didn’t jump down to “Washington.” It didn’t even jump to “Washington” then back to “Alaska.” Oh, and of course cursor keys didn’t work either – I had to use my mouse to scroll and click and this hurts my wrist and is slow and error-prone. (Oh and I should add that there was no scroll bar on the selection box either, the expectation was that I’d know to use my scroll wheel and be able to! This is not something you can rely on!)
Because it turns out that the dropdown box, rather than being a <select>, was a fucking <div> with JavaScript to set the value. And doesn’t have any keyboard access. For bonus points, they invented some HTML tags like <dropdown> to contain it. Why?! Standards exist for a reason! What happens in some future HTML verson where the <dropdown> tag becomes a thing? Except it wouldn’t because fucking <select> already exists and has since HTML fucking 1 point 0.
Because, of course, they reimplemented <form> and <select> the long way around.
Why the fuck do people make their lives harder like this? Peering into the page source, everything was obviously built using Angular, which is just… bad. Really bad. I see so many Angular sites that do this. And there’s absolutely no reason for most Angular sites to be based on Angular.
It’s so maddening. You have to do more to get less functionality, that would already be handled by the browser in a cross-platform, humane, accessible manner!
So I sent them this message on their contact form:
Hi, your new website doesn’t function correctly in a number of web browsers, including Safari on macOS. After receiving the challenge question it simply hangs for several minutes. Also, your contact form no longer follows accessibility guidelines and doesn’t support keyboard entry for people with e.g. mobility impairments, and I suspect it won’t work correctly with many screen readers either.
Please don’t reimplement basic browser functionality; for example, there’s no reason for the <div class="dropdown"> with added JavaScript when browsers already have <select> widgets which work perfectly fine.
I bet they get back to me with something like “We apologize, but we only support the Chrome browser. Please download it at google.com/chrome” or something. Because we learned nothing after the whole debacle that was MSIE 6, apparently.
Anyway. Fuck modern web design. Make your shit out of plain old HTML. Seriously. Please. You can build asynchronous, self-updating sites using standard JavaScript and basic DOM methods without a lot of work, and that’s only in the case that you need to – and you probably don’t.
Not everything needs to be a fucking single-page “app,” for fuck’s sake. It buys you nothing except for a bad user experience when things don’t go perfectly.
