Accessibility Improvement: Unique Page Titles Across the Dashboard

Release: v1.0.448
Accessibility control: A11Y-12
Category: Screen Reader

---

Background

Making Tax Digital compliance work happens across several distinct areas of the dashboard — reviewing transactions, submitting quarterly summaries, managing properties, configuring settings, and more. While each page has always displayed a clear visual heading, the browser document title remained the same generic string (agentOS Making Tax Digital) on every single page.

For most users this is a minor inconvenience — a tab that doesn't describe its contents. For screen reader users, it is a meaningful accessibility barrier.

The Problem

When a screen reader user navigates between pages in a single-page application, the assistive technology relies on the document <title> to announce the new page context. If the title never changes, the user receives no audible confirmation that navigation has occurred or any information about where they now are in the application.

In the agentOS MTD dashboard, the root layout at src/app/dashboard/layout.tsx set the default title but individual dashboard pages did not override it. The DashboardHeader component rendered a visible <h1> with the correct page name, but this is not the same as the document title — and it is not automatically announced on route change by all screen readers.

The result: every client-side navigation between dashboard pages was silent and contextless for screen reader users.

The Fix

Each dashboard page now exports a page-specific metadata object using the Next.js Metadata API. Titles follow a consistent format:

{Page Name} — agentOS Making Tax Digital

For example, the Transactions page now exports:

// src/app/dashboard/transactions/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Transactions — agentOS Making Tax Digital',
}

This pattern is applied to all pages under /dashboard, including:

Page	Title
Transactions	Transactions — agentOS Making Tax Digital
Quarterly Summaries	Quarterly Summaries — agentOS Making Tax Digital
Properties	Properties — agentOS Making Tax Digital
Settings	Settings — agentOS Making Tax Digital

Why Static Metadata Exports?

Two approaches were considered:

1. Static metadata exports per page — Each page.tsx exports a metadata constant. Next.js resolves this server-side and injects the correct <title> into the HTML before it reaches the browser.
2. Dynamic document.title via useEffect — A PAGE_TITLES map keyed by pathname, read inside DashboardShell on every route change.

The static metadata export approach was chosen because it is the idiomatic Next.js App Router pattern, works correctly with server-side rendering, does not require client-side JavaScript to execute before the title is set, and aligns with how the rest of the application handles metadata.

Impact

• Screen reader users now receive an accurate page announcement on every navigation event, enabling them to orient themselves within the application without needing to locate and read the <h1>.
• All users benefit from descriptive browser tab titles, making it easier to distinguish MTD dashboard tabs when multiple are open.
• Bookmarks and browser history now display meaningful page names instead of the generic application name.

This change is part of the platform's ongoing commitment to WCAG 2.1 compliance and inclusive design.