` > `URL pathname` の順番で要素を探してその名前を ARIA ライブリージョンにより通知します。
https://github.com/vercel/next.js/blob/canary/packages/next/src/client/route-announcer.tsx
React Router で同様の実装をしてみましょう。まずはページ遷移をフックする必要があります。これは [useLocation](https://reactrouter.com/en/main/hooks/use-location) が返却する [location](https://reactrouter.com/en/main/utils/location) オブジェクトを監視することで実現できます。
```tsx:app.tsx
import { useEffect } from "react";
import {useLocation } from "react-router-dom";
export const App = () => {
const location = useLocation();
useEffect(() => {
console.log(location);
}, [location]);
return (
// ...
);
};
```
まずは Next.js の実装と同じように `` 要素を作成します。この要素は視覚的には表示されないようにしつつ、アクセシビリティツリーからは削除されないようにする必要があります。`display:none` のようなスタイルは視覚的に表示されくなるものの、アクセシビリティツリーからも削除されてしまうので、結果的にスクリーンリーダーからも読み上げられなくなってしまいます。また要素が変化したときに読み上げてほしいので前述した ARIA ライブリージョン要素として `aria-live="assertive"` を指定しています。
```tsx:RouteAnnouncer.tsx
const RouteAnnouncer = () => {
return (
);
};
```
後は画面遷移があるたびに `` 要素内のテキストを更新してスクリーンリーダーに読み上げられるようにします。簡単のため、`
` 要素のみを探して取得し、その内部のテキストを設定しています。
```tsx:RouteAnnouncer.tsx
const RouteAnnouncer = () => {
const [routeAnnouncement, setRouteAnnouncement] = useState("");
const location = useLocation();
useEffect(() => {
const title = document.title;
setRouteAnnouncement(title);
}, [location]);
return (
<div
aria-live="assertive"
style={{
border: 0,
clip: "rect(0 0 0 0)",
height: "1px",
margin: "-1px",
overflow: "hidden",
padding: 0,
position: "absolute",
width: "1px",
whiteSpace: "nowrap",
wordWrap: "normal",
}}
>
{routeAnnouncement}
</div>
);
};
```
この要素は `<App>` コンポーネントなどに配置しておくと、画面遷移があるたびに `<title>` のテキストが読み上げられることがわかります。またこのような実装を利用する際には個々のページでユニークな `<title>` を設定することが大切です。タイトルを読み上げたとしても前の画面と変わらない値であるならば画面遷移したことが伝わりにくいです。
最後にフォーカス管理も実装しましょう。これは画面遷移が行われた際に、従来の MAP のように `body` 要素に JavaScript を用いてフォーカスを移動させてあげればよいでしょう。
```tsx:App.tsx
export const Root = () => {
const location = useLocation();
useEffect(() => {
const body = document.querySelector("body");
if (body) {
body.focus();
}
}, [location]);
return (
// ...
);
};
```
## 参考
- [ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い - シフトブレイン／スタンダードデザインユニット](https://standard.shiftbrain.com/blog/default-action-for-click-event-of-a-element)
- [Recommendations for Single Page Applications - Orange digital accessibility guidelines](https://a11y-guidelines.orange.com/en/articles/single-page-app/)
- [SPA(Next.js)のスクリーンリーダーによる画面遷移で工夫したこと](https://zenn.dev/ubie_dev/articles/499d3ecff708c0)
- [Accessibility • Docs • SvelteKit](https://kit.svelte.jp/docs/accessibility#route-announcements)
- [What we learned from user testing of accessible client-side routing techniques with Fable Tech Labs | Gatsby](https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/)