More on the topic...
Generating detailed summary...
Failed to generate summary. Please try again.
My client was a regulated utility facing fines if customer satisfaction dipped below 96%. Their legacy options for service applications were an old ASP form and a manual, costly process. Two previous attempts—including a React-based form—failed spectacularly. The React app lived for three days before being rolled back: it relied on loading spinners, global JavaScript state, wasn’t accessible, and tried to stash images in localStorage, which has a 5 MB cap.
I rebuilt the site using Astro with an HTML-first approach. JavaScript lived only in web components for progressive enhancement. Every step in the form wizard became its own HTML page. When users clicked “Next,” the form posted to the API and redirected on success. That kept things simple: no massive bundles, no client-side routing, just fast, reliable pages that work on old phones and flaky networks. Inspiration came from a story about someone using a PlayStation Portable to browse GOV.UK’s plain-HTML pages on shabby Wi-Fi.
Form validation got its own tiny web component called validation-enhancer. It wraps any HTML form, captures built-in browser validation, and puts error messages into aria-described elements. At 1 KB, it prevents obnoxious pop-ups, clears errors while users type, and always falls back to native HTML or server-side checks. Here’s how easy it is to use:
<validation-enhancer>
<form>
<label for="my-email">Email</label>
<input type="email" name="my-email" aria-errormessage="my-email-error" required />
<div id="my-email-error"></div>
<button type="submit">Submit</button>
</form>
</validation-enhancer>
Once live, form completions doubled overnight. The analytics team couldn’t track those new users because their JavaScript-based tools had been dropping anyone whose browser or connection failed on massive JS bundles. We also stored each step’s data on the backend so no one ever lost progress—even someone who finished their application a month later. My replacement complained this setup was extra work. I disagreed: public services can’t afford to bounce users on old browsers, bad networks, or assistive devices. Support the widest audience from day one.
Questions about this article
No questions yet.