Accessibility

Core Idea

Next.js's built-in accessibility features: automatic route announcements for client-side transitions, and integrated ESLint accessibility linting via eslint-plugin-jsx-a11y.

Key Concepts

• Route Announcer: for client-side transitions (next/link), Next.js announces the new page to screen readers by checking, in order: document.title, then the <h1> element, then the URL pathname.
• eslint-plugin-jsx-a11y: included by default, warns on aria-props, aria-proptypes, aria-unsupported-elements, role-has-required-aria-props, role-supports-aria-props (e.g. missing alt on img, wrong aria-*/role usage).

Key Takeaways

1. Garanta título único e descritivo em cada página para que o route announcer funcione bem (é a fonte primária de anúncio pro screen reader).
2. A11y linting já vem ativo por padrão via eslint-config-next, sem setup extra.
3. Recursos recomendados: WebAIM WCAG checklist, WCAG 2.2, The A11y Project, contraste de cor, prefers-reduced-motion em animações.

Connects To

• ESLint (ch429): eslint-plugin-jsx-a11y faz parte do eslint-config-next recomendado.