2.4.2: Page Titled

Primary Use Cases and Requirements Under Guideline 2.4.2: Page Titled

• Descriptive Titles: Each web page must have a title that accurately describes its content or purpose. The title should be concise yet descriptive enough to convey the essence of the page to the user at a glance.
• Uniqueness: Titles should be unique across a website, helping users to distinguish between different pages and understand their specific purposes within the broader context of the site.
• Consistency: The title of a page should be consistent with its headings and content, reinforcing the user's understanding of the page's topic or purpose.
• Accessibility Tools Compatibility: Page titles must be implemented in a way that is compatible with assistive technologies. This often means using standard HTML tags like <title> in the head of the document, ensuring it is programmatically determined so that software can easily access and relay this information to the user.
• Dynamic Content: For web applications or pages that change content dynamically, the page title should be updated to reflect significant changes in the content that alter the purpose of the page.

Implementation of Page Titles in Single Page Applications (SPAs)

Implementing page titles in Single Page Applications (SPAs) involves dynamically updating the browser's title tag as the user navigates through the app. Since SPAs load all content dynamically and do not perform full page refreshes, the page title set during the initial page load doesn't change automatically with navigation events. To address this, developers must manually manage the page title. Here's a detailed approach:

1. Use of Routing Events

Most SPAs use client-side routing libraries (like React Router for React, Vue Router for Vue.js, or Angular's Router). These routers emit events or provide hooks that can be used to detect navigation changes. You can listen to these routing events and update the document title accordingly.

// For a React application using React Router
                import { useEffect } from 'react';
                import { useLocation } from 'react-router-dom';

                function useDocumentTitle(title) {
                    useEffect(() => {
                        document.title = title;
                    });
                }

                function App() {
                    const location = useLocation();

                    useEffect(() => {
                        const pageTitle = location.pathname === '/' ? 'Home Page' : location.pathname.substr(1);
                        useDocumentTitle(`${pageTitle} - My SPA`);
                    }, [location]);

                    return (
                        <div>
                            {/* Your SPA content */}
                        </div>
                    );
                }
                

2. Dynamic Title Based on Content

Sometimes, you might want the page title to reflect the content currently viewed, especially in cases where the content is fetched asynchronously. In such cases, the title should be updated once the content is fully loaded.

// Assuming this is a blog application where the title changes based on the blog post
                    useEffect(() => {
                        fetch(`https://example.com/posts/${postId}`)
                            .then(response => response.json())
                            .then(data => {
                                useDocumentTitle(`${data.title} - My SPA Blog`);
                            });
                    }, [postId]);

In conclusion, effectively managing page titles in SPAs enhances user navigation experience and aids in SEO. By leveraging routing events, dynamically setting titles based on content, handling loading and error states, and considering SEO, developers can ensure that their SPA maintains accurate and meaningful page titles throughout the user journey.