WCAG 2.4.2 — Page Titled

What this requires

Every web page must have a title that describes its topic or purpose. The title appears in the browser tab, the back-button history, the search engine result, and the screen reader's page-open announcement. It's the first information a user receives about the page.

How AI coding tools fail this

When asked to scaffold a new Next.js or Vite project, AI tools generate default metadata that ships unchanged: "Create Next App", "Vite + React", "React App". The placeholder text reaches production because the team focuses on routing and styling first and gets to metadata last.

The second pattern: dynamic routes with no per-page title logic. A blog hosts hundreds of posts at /posts/[slug] and every one announces "Blog" as its title. The user can't distinguish posts in their history or tabs.

The third: title duplication across the site. Every page reads "My Company — Premier Solutions for Modern Businesses" with no page-specific differentiator.

Failing examples

Scaffolding default left in metadata:

export const metadata = {
  title: "Create Next App",
};

Dynamic routes with a static parent title and no per-page override:

// app/posts/[slug]/page.tsx
export default async function Post({ params }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

Passing examples

Per-page metadata via Next's generateMetadata:

// app/posts/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: `${post.title} — ACME blog`,
  };
}

export default async function Post({ params }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

A consistent title pattern across the site:

<Page topic> — <Site name>

Edge cases

Unique titles per page. Different content needs different titles; the same content can repeat the title.
Page-first, brand-second. Screen readers announce the title at page load. "Sign up — ACME" is more useful than "ACME — Sign up" because users hear the page topic first.
Single-page apps need to update document.title on route change. Next.js, Remix, and SvelteKit do this by default; bare React Router setups often don't.
Title length. Aim for under 70 characters. Search engines truncate beyond that; assistive tech can read longer.
Localised titles. A multilingual site needs titles in the active locale.

How Jeikin handles this

axe-core flags pages with no <title>, an empty <title>, or a title matching common scaffolding placeholders ("Create Next App", "Vite + React", "React App", "Document"). The dashboard records each finding and tracks resolution per page. SPA route changes that don't update the title are flagged in guided review.

References

W3C — Understanding 2.4.2 Page Titled (opens in new tab)