Accessibility in Next.js

Inaccessible pages exclude users and create legal and brand risk. Common gaps: missing alt text, unlabeled inputs, skipped heading levels, and no landmarks.

Accessibility expands audience reach and often improves SEO and AI extractability through clearer structure.

Next.js components should preserve semantics — prefer native elements over div soups, and ensure routing libraries expose real links.

1. Audit key templates for landmarks (main, nav).
2. Fix images and inputs missing alt/labels.
3. Normalize heading hierarchy.
4. Keyboard-test primary CTAs and dialogs.

<label for="email">Work email</label>
<input id="email" name="email" type="email" autocomplete="email" />
<img src="/chart.png" width="800" height="450" alt="Revenue trend over 12 months" />

• Icon-only buttons without accessible names
• Decorative images marked as content (or vice versa)
• Skipping heading levels for visual style
• Custom widgets without keyboard support

• [ ] Images have meaningful alt (or empty alt if decorative)
• [ ] Form controls associated with labels
• [ ] One logical H1; no skipped levels
• [ ] Main and nav landmarks present
• [ ] Keyboard operable primary flows

Semantic structure helps assistants segment roles of page regions. Treat a11y as part of machine readability, not only compliance.

• [ ] Automated a11y checks in CI when available
• [ ] Manual keyboard pass on signup and pricing
• [ ] moneygap scan a11y findings reviewed

Capture a Fix Path™ share for accessibility items assigned to design/engineering.