diff --git a/packages/next/client/route-announcer.tsx b/packages/next/client/route-announcer.tsx
index a778fe5dac44..2c5a772b5fcb 100644
--- a/packages/next/client/route-announcer.tsx
+++ b/packages/next/client/route-announcer.tsx
@@ -5,12 +5,15 @@ export function RouteAnnouncer() {
const { asPath } = useRouter()
const [routeAnnouncement, setRouteAnnouncement] = React.useState('')
- // Only announce the path change, but not for the first load because screen reader will do that automatically.
+ // Only announce the path change, but not for the first load because screen
+ // reader will do that automatically.
const initialPathLoaded = React.useRef(false)
- // Every time the path changes, announce the route change. The announcement will be prioritized by h1, then title
- // (from metadata), and finally if those don't exist, then the pathName that is in the URL. This methodology is
- // inspired by Marcy Sutton's accessible client routing user testing. More information can be found here:
+ // Every time the path changes, announce the new page’s title following this
+ // priority: first the document title (from head), otherwise the first h1, or
+ // if none of these exist, then the pathname from the URL. This methodology is
+ // inspired by Marcy Sutton’s accessible client routing user testing. More
+ // information can be found here:
// https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/
React.useEffect(
() => {
@@ -19,21 +22,14 @@ export function RouteAnnouncer() {
return
}
- let newRouteAnnouncement
- const pageHeader = document.querySelector('h1')
+ if (document.title) {
+ setRouteAnnouncement(document.title)
+ } else {
+ const pageHeader = document.querySelector('h1')
+ const content = pageHeader?.innerText ?? pageHeader?.textContent
- if (pageHeader) {
- newRouteAnnouncement = pageHeader.innerText || pageHeader.textContent
+ setRouteAnnouncement(content || asPath)
}
- if (!newRouteAnnouncement) {
- if (document.title) {
- newRouteAnnouncement = document.title
- } else {
- newRouteAnnouncement = asPath
- }
- }
-
- setRouteAnnouncement(newRouteAnnouncement)
},
// TODO: switch to pathname + query object of dynamic route requirements
[asPath]
diff --git a/test/integration/client-navigation-a11y/pages/index.js b/test/integration/client-navigation-a11y/pages/index.js
index b616bbe516a5..04ed7407e7d2 100644
--- a/test/integration/client-navigation-a11y/pages/index.js
+++ b/test/integration/client-navigation-a11y/pages/index.js
@@ -2,14 +2,22 @@ import Link from 'next/link'
export default () => (