画面遷移のアクセシビリティ課題を

解決しうるNavigation APIへの期待

JSConfJP 2023 | 2023-11-19

1

CrowdWorks Inc.｜

自己紹介

やまのく@yamanoku

株式会社クラウドワークス�プロダクト本部 プロダクト開発部 プラットフォーム開発3グループ

主な業務�UI設計、アクセシビリティ啓蒙、フロントエンドの技術的負債解消

発表・登壇

• JSConfJP 2021
• GAAD Japan 2022
• Vue Fes Japan Online 2022
• Vue Fes Japan 2023

2

CrowdWorks Inc.｜

画面遷移と

アクセシビリティについて

3

3

CrowdWorks Inc.｜

CrowdWorks Inc.｜

Webにおける画面遷移の歴史

• サーバーサイドからHTMLを取得して描画する（MPA）
• Ajaxの発明（2005）
• Pjax（pushState + Ajax）
• MPAのような画面遷移がクライアントサイドのみで実現
• History API を扱ったあくまでも「擬似的な見せ方」
• 遷移をクライアントサイドで完結させるSPAというアーキテクチャの誕生

4

CrowdWorks Inc.｜

スムーズな画面遷移の実現

• クライアントサイドルーティング
• 効果付きのページ遷移アニメーションが可能に
• View Transitions API

5

CrowdWorks Inc.｜

Smooth and simple transitions with the View Transitions API - Chrome for Developers

6

CrowdWorks Inc.｜

アクセシビリティについて

• アクセシビリティ＝アクセスのしやすさ
• （製品やサービスを）利用できること、またはその到達度
• ウェブにおけるアクセシビリティが「ウェブアクセシビリティ」
• HTMLを正しく扱うことが大一原則
• CSS、JavaScript はもとの機能を損ねないように気を付ける

7

CrowdWorks Inc.｜

SPAの画面遷移におけるアクセシビリティ課題

見た目上は変わっているように見えても支援技術でわからない問題

• 画面遷移しているように見える変化をしているだけ
• 変わったという情報が支援技術に伝わらない

例：リンクを押下したが画面が変化して切り替わったことが通知されない

8

CrowdWorks Inc.｜

Route Announcerという手法

WAI-ARIAとJavaScriptを併せて支援技術へ通知する手段

• ライブリージョンを活用する
• 読み上げる内容を挿入する

変化させるタイミングで発火させることで支援技術に伝わる

例：ページの移動が完了した時点でライブリージョンへタイトルを挿入

9

CrowdWorks Inc.｜

各種フレームワークでの対応

• Next.js
• SvelteKit
• Angular（Angular UI）
• Astro

WIP（2023-11時点）

• Nuxt

10

CrowdWorks Inc.｜

通知以外で足りていない部分

• クライアントサイドだけの操作における弊害
• フォーカスマネジメント
• スクロール位置の再現

11

CrowdWorks Inc.｜

クライアントサイドだけの操作における弊害

• 「遷移完了」がJavaScript、開発者側の関心になっている
• ブラウザ側で「遷移完了」というシグナルが出てほしい
• スクリーンリーダーによっては通知の検知タイミングが異なる
• 場合によっては setTimeout でタイミングを調整する必要がある

12

CrowdWorks Inc.｜

フォーカスマネジメント

• キーボード操作でのタブキー移動（フォーカス移動）
• アクティブな要素にフォーカス移動できる

画面遷移した場合にフォーカス位置が切り替わってないとき問題がある

例：ナビゲーションリンクから遷移したがリンクからフォーカスが変わっておらず次の操作でナビゲーションリンク位置からになってしまう

13

CrowdWorks Inc.｜

スクロール位置が正しくない問題点

• 移動した際に予期せぬ位置になっていたりする
• スクロール位置が同じ位置のまま
• 元に戻った際にスクロール位置がリセットされてしまう
• 読み込みタイミングによっては位置がズレてしまう

MPAのようなサイトの習慣に慣れている人は�SPAの場合に学習が必要になってしまう

14

CrowdWorks Inc.｜

Navigation API

15

15

CrowdWorks Inc.｜

CrowdWorks Inc.｜

Navigation API とは

• location API, history API の後継 Web API
• ナビゲーションと履歴を管理する
• 開始・終了の状態を Promise にて受け取れる
• intercept による処理の介入と変更
• フォーカスやスクロール位置の復元
• Living Standard に仕様が載っている
• Blink のみの実装（2023/11時点）
• Gecko, WebKit は positive ステータス

16

CrowdWorks Inc.｜

Interop における Navigation API

Navigation API · Issue #435 · web-platform-tests/interop

17

CrowdWorks Inc.｜

18

CrowdWorks Inc.｜

開始・終了のタイミングを受け取る

• navigate() による戻り値にcommitted、finished
• committed とfinished はそれぞれPromiseで返す
• committed はナビゲーションを開始した段階
• finished はナビゲーションが完了した段階

ナビゲーションの開始・終了を検知できるようになったので�その判定を元にRoute Announcementの通知タイミングも合わせられる

19

CrowdWorks Inc.｜

フォーカスマネジメント問題の解消

1. ナビゲートされた段階で現在のフォーカス位置を保存する
2. インターセプト内でフォーカスの操作モードを切り替える
3. 先に保存しておいた状態を取り出し
4. 対象要素にフォーカスさせる

20

CrowdWorks Inc.｜

21

CrowdWorks Inc.｜

22

CrowdWorks Inc.｜

スクロール位置の復元

1. ナビゲーションイベントを判定する（戻る・リロード時）
2. インターセプト内の scroll 引数を切り替える
3. DOM構築など事前に画面に必要な情報を準備しておく
4. 対象位置にスクロールさせる

23

CrowdWorks Inc.｜

24

CrowdWorks Inc.｜

今後のNavigation APIへの期待

• 注力APIとして開発が進んでいってほしい
• 各種フレームワークでのルーターライブラリへの搭載
• クライアントサイドルーティング開発での活用・発展

25

CrowdWorks Inc.｜

Thanks you for Listening !

JSConfJP 2023 | 2023-11-19

26

CrowdWorks Inc.｜

参考記事

• WICG/navigation-api
• Modern client-side routing: the Navigation API - Chrome for Developers
• Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
• View Transitions API と Navigation API でページ遷移アニメーションを実装してみる
• Next.jsはどうやってスクロール位置を復元するのか

27

CrowdWorks Inc.｜