City of Larkfield: Fixing an Inaccessible Assistance Form
The City of Larkfield's utility billing portal includes an online form for residents applying to the water-bill assistance program. The form has nine fields, marks errors by turning the field border red, and uses a CAPTCHA with distorted letters and no audio alternative. The session expires after five minutes with no warning, and the only instructions are a scanned PDF linked from the page. The city is legally required to meet WCAG 2.1 AA. Twenty-two percent of residents are over 65 and 8% report a disability; the support line receives about 400 calls a month about this form alone. The vendor says the form passed accessibility because an automated checker reported only three errors. The city has budget for a targeted fix, not a full rebuild.
1. Identify the accessibility failures in the form and rank them by user impact.
Read the worked answer
Failures present:
- Errors indicated by red border alone, with no text message. This fails the use-of-color requirement and the error-identification requirement.
- A visual CAPTCHA with no audio or other alternative, which excludes screen reader users and many people with low vision outright.
- A five-minute session timeout with no warning, no ability to extend, and no preservation of entered data.
- Instructions available only as a scanned PDF, which has no text layer and is not accessible on a phone.
- Likely absent or improper form labels, though this needs checking rather than assuming.
Ranking by impact: the two that block submission entirely come first - the CAPTCHA and the color-only errors. A user who cannot solve the CAPTCHA cannot apply at all, and a user who cannot see why a field was rejected will loop until the timeout. Third is the timeout, because it destroys work that was nearly complete. Fourth is the PDF, which is a barrier to understanding but not always to submitting.
On the vendor's claim: automated tools reliably detect only a minority of accessibility problems - typically colour contrast, missing alt text, and some label issues. They cannot judge whether an error message makes sense, whether focus order is logical, or whether a CAPTCHA is solvable without sight. A count of three automated errors is not evidence of conformance; it is evidence that nobody tested manually. The 400 monthly calls are the real signal.
2. Describe the redesign of the form flow you would implement within a targeted-fix budget, and explain what each change accomplishes.
Read the worked answer
Errors and feedback: keep the red border but add a persistent text message next to each field explaining what is wrong and how to fix it, plus an error summary at the top of the page with links to each failing field. Add an icon so the state is not conveyed by colour alone. This turns a dead end into an instruction.
CAPTCHA: replace it with a mechanism that does not depend on distorted text - a honeypot field plus rate limiting on the server, or an accessible challenge with an audio option if a challenge is genuinely required. This is the single biggest unlock in the project.
Timeouts: warn at least 20 seconds before expiry with a button to extend, and preserve entered values if the session does end. Better still, lengthen the window for this form - five minutes is arbitrary for a nine-field application that people may need to pause.
Instructions: move them into HTML on the page, short and plain, with the PDF as an optional download. Remove the scan entirely.
Labels and structure: label every field above the input rather than using placeholder text, group related fields, and add autocomplete attributes so browsers can fill known values. Keep nine fields only if all nine are genuinely required.
Layout: a single column, generous spacing, and a clear review step before submission. None of this requires a new platform.
3. How would you validate conformance and measure whether the fix worked, given a limited budget and a vendor claiming the form already passes?
Read the worked answer
Treat the vendor's claim as unverified and ask for evidence: which tool, what scope, and whether a manual test was performed. Request an accessibility conformance report if one exists. An automated scan is a starting point, not a verdict.
Validation plan, cheap and repeatable:
- Run axe or WAVE to catch the mechanical failures - contrast, labels, landmarks - and clear them.
- Complete the form using only a keyboard: tab order, visible focus, no traps, and error summary links that actually move focus.
- Test with a screen reader at no cost - NVDA on Windows or VoiceOver on macOS and iOS - and attempt a full submission with errors and with the timeout running.
- Zoom to 200% and check for content loss or horizontal scrolling.
- Test in high-contrast mode.
- Sit with five residents, at least two over 65, and watch them apply. This is the step that finds the problems tools cannot.
Measuring success: track form completion rate, abandonment by step, session timeouts, and the monthly volume of support calls about this form. A drop from 400 calls toward the baseline is the clearest business evidence. Publish a short conformance statement and log remaining known issues with an owner and a date, so the fix is documented rather than declared.