React3 min read
Accessibility in React: the twelve things that catch 80% of issues
Most accessibility failures in React apps come from a handful of repeated patterns. Fix these twelve and the audit gets short.
Semantic HTML uses elements for their meaning — headings for structure, nav and main for landmarks, lists for lists, tables for tabular data — so that machines can determine what each part of a page is. It improves accessibility and gives search engines and AI systems reliable structural signals rather than requiring them to infer from styling.
Search engines parse the DOM to determine structure: what the page is about, how it is organised, what the sub-topics are, and which parts are navigation versus content. CSS classes carry no meaning. A page built entirely from divs forces every consumer to guess.
This matters more now than five years ago, because AI answer engines extract passages rather than whole pages. A well-structured section under a clear heading is extractable; the same text inside nested unlabelled containers is much less so.
<h1>Next.js caching explained</h1>
<h2>What are the four caching layers?</h2>
<h2>How do I stop a page from caching?</h2>
<h3>Route segment configuration</h3>
<h3>Per-fetch options</h3>
<h2>Frequently asked questions</h2>| Use | Instead of | Because |
|---|---|---|
| <nav> | <div class="nav"> | Identifies navigation for parsers and assistive tech |
| <main> | <div id="content"> | Marks the primary content region |
| <article> | <div class="post"> | A self-contained, syndicatable unit |
| <button> | <div onClick> | Keyboard and screen reader support built in |
| <a href> | <span onClick> | Only real links are crawlable |
| <table> | Divs with grid CSS | Tabular data is extractable as data |
| <time datetime> | Plain text date | Unambiguous machine-readable date |
| <ul>/<ol> | Divs with bullets | Lists are extracted as lists |
HTML5 permits it and search engines handle it, but a single h1 gives the clearest signal about the page's topic and is simpler to reason about.
Headings describe section topics, which helps relevance and passage extraction. Stuffing keywords into every heading does not help and reads badly to humans.
Yes. Clear headings, lists and tables make content easier to extract as discrete, self-contained answers, which is exactly what AI answer systems select.
No. Native elements come with behaviour and semantics; ARIA only adds semantics. Use ARIA when no native element expresses the pattern, not instead of one that does.
ROVQIX Growth
SEO & growth team, ROVQIX
The ROVQIX growth team handles technical SEO, Core Web Vitals and AI-search visibility for the sites we build. Recommendations here are the ones we apply to client projects and to rovqix.in itself.
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.
Most accessibility failures in React apps come from a handful of repeated patterns. Fix these twelve and the audit gets short.
AI systems do not read your page. They retrieve chunks of it. Write so that any single chunk still makes sense alone.
Internal linking is the one ranking factor you fully control. Most sites still link almost entirely from the navigation.
No spam. Just the occasional case study and craft breakdown.