WCAG accessibility audit for Next.js applications

During the Next.js hydration phase, static HTML is displayed but event handlers are not yet attached. Buttons, links, and forms appear on screen but do not respond to clicks or keyboard. Assistive technologies announce these elements as interactive when they are not yet. This delay is particularly problematic on slow connections.

The next/image component requires an alt attribute, but many developers fill it with an empty string or generic text ('image', 'photo') on informative images. Decorative images are rarely properly marked with empty alt. The component generates complex HTML (with wrappers) that can cause issues if alt is not correctly propagated to the final img tag.

The next/link component performs client-side navigation that changes content without page reload. Keyboard focus is not moved to the new content or to the top of the page. Screen readers do not announce the page change. The keyboard user remains focused on the link they just clicked, in content that has changed around them.

Next.js's nested layout architecture (App Router) means that during navigation, only the relevant page segment is re-rendered. The parent layout stays in place but child content changes. Focus is not managed between these segments, and assistive technology users do not perceive which part of the page changed, especially in applications with sidebar + main content.