React3 min read
Building React forms that are accessible, validated and hard to break
Forms are where most web products earn their money and where most accessibility audits fail. The details are small and the impact is not.
The highest-impact accessibility work in React is using semantic HTML instead of divs, keeping every interactive element keyboard reachable with a visible focus indicator, managing focus when content changes, labelling controls properly, and meeting colour contrast minimums. These cover the majority of real-world WCAG failures.
Beyond the legal exposure that now applies in many jurisdictions, accessible markup is machine-readable markup. Semantic headings, labelled controls and meaningful link text improve how search engines and AI answer engines parse your page — the same work serves both audiences.
Practically: roughly one in six people has a disability of some kind. Keyboard-only navigation also covers power users, and captioned media covers everyone watching on mute in public.
// Announce async results without stealing focus
<div role="status" aria-live="polite" className="sr-only">
{isPending ? "Searching" : `${results.length} results found`}
</div>No. Overlay widgets have been widely criticised by disability advocates and have not prevented legal action. They cannot fix semantics that are not in the markup. Fix the code.
WCAG 2.2 Level AA is the standard referenced by most regulations, including the European Accessibility Act. Level AAA is not expected for general-purpose sites.
Only when native HTML cannot express the pattern. Incorrect ARIA is worse than none — the first rule of ARIA is to use a native element instead wherever possible.
Indirectly but genuinely. Headings, alt text, link text, semantic landmarks and captions all improve how search engines and AI systems understand a page.
ROVQIX Engineering
Engineering team, ROVQIX
The ROVQIX engineering team builds and maintains web platforms, APIs and infrastructure for clients across SaaS, ecommerce and enterprise. These notes come out of real production work — deploys, incidents, migrations and audits.
ROVQIXdesigns and builds production web platforms — Next.js front ends, Node.js APIs and the infrastructure behind them. Tell us what you're building and we'll scope it with you.
Forms are where most web products earn their money and where most accessibility audits fail. The details are small and the impact is not.
A div can be styled to look like anything. It cannot be understood as anything, which is the whole problem.
Three numbers, each measuring a different way a page can feel bad: slow to appear, slow to respond, and unstable while you use it.
No spam. Just the occasional case study and craft breakdown.