読んでいる最中に自動更新で書き換わってしまう新着一覧

地域のニュースサイト「Harbour Herald」には新着ページがあります。その日の記事を新しい順に並べた番号付きの一覧で、記事ごとに掲載時刻が付いています。古いニュースを表示し続けないよう、スクリプトが60秒ごとに一覧を取得し直し、ページ上の一覧に上書きします。一覧全体を眺める人にとっては、新しい記事が上に現れるだけです。

スクリーンリーダーの利用者が見出しをTabキーで順にたどり、3件目の「図書館、週末の開館時間を延長」で止まって、開くかどうか考えています。ページを読み込んでから1分たつと、一覧が上書きされます。利用者がいたリンクはページから取り除かれ、同じ内容の新しいリンクに置き換わるため、フォーカスはページそのものに戻り、何が起きたのかを伝えるものもありません。リンクが毎回新しい要素になるので、新しい記事が来ていなくても、同じことが1分ごとに起こります。10時43分にフェリーの記事が入ると、図書館の記事は1つ下にずれます。画面拡大ソフトでこの記事を拡大していた人の目の前で、記事は視界から外れ、代わりに橋の記事がその場所に来ます。ページには、更新を止める手段がありません。

達成基準3.2.5「要求による変化」（レベルAAA）は、コンテキストの変化が利用者の求めたときにだけ起こるか、利用者がそうした変化を止められることを求めています。WCAGは、ページ全体を一度に見られない人を混乱させかねない大きな変化をコンテキストの変化と呼び、フォーカスを別の場所へ移すことや、ページの内容を大きく並べ替えることもそこに含めています。一覧の上書きは、その両方を起こします。主要な内容が勝手に置き換わり、フォーカスのあるリンクも一緒に消えます。フォーカスを持つ要素が取り除かれると、ブラウザーはフォーカスをページそのものへ移し、document.activeElement はbodyを返します。W3Cはこれを失敗例F61として挙げています。メインのビューポートの内容が自動更新で変わり、利用者が止められないというもので、最初の例は、最新の見出しを出すために自動で更新し続けるニュースサイトです。自動更新に対する十分な達成方法G76は、自動で更新する代わりに、更新を利用者が求められるようにするものです。

ブラウザーの側に、この書き換えを止める理由はありません。タイマーは誰かが読んでいるかどうかに関係なく動き、innerHTML は、新しいマークアップが同じでも、置き換える要素をフォーカスのあるものも含めてすべて捨てます。

この一覧は、ページのほかの部分と並んで自動で更新されるため、レベルAの2.2.2「一時停止、停止、非表示」の対象にもなります。2.2.2は、こうした更新を一時停止、停止、非表示にするか、更新の頻度を変える手段を求めています。下の二つの修正は、この2.2.2も満たします。一部を書き換えるのではなく、タイマーでページ全体を再読み込みするページは、まず2.2.1に適合しません。こちらは時間がたつと自動で再読み込みや転送をするページで扱います。

この更新は、一覧全体を見て新しいものを拾う人のためのものです。一覧を1件ずつ読み進めるすべての人にとっては負担になり、ゆっくり読む人ほど何度も巻き込まれます。

10グループ中4グループに影響

• 全盲 （影響あり）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 筋力・可動域 （影響なし）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 視覚を使わない 見出しを順に読んでいるスクリーンリーダーの利用者がいるリンクは、更新のたびにページから取り除かれます。フォーカスはページそのものに戻り、どこから読み続けるかは、利用者ではなくスクリーンリーダーが決めることになります。
• 手の操作が限られる 記事までTabキーで進んできたキーボードやスイッチの利用者は、1分ごとにその記事を見失い、たどり直す途中で一覧がまた変わっていることもあります。
• 視覚が限られる 画面拡大ソフトでは一度に1、2件の記事しか見えないため、一覧が1つ下にずれると、読んでいた記事は視界から外れ、別の記事に置き換わります。画面には理由を示すものが何もありません。
• 言語・認知・学習の能力が限られる ゆっくり読む人や、記事を開いてから一覧に戻る人は、そのたびに違う並びを目にし、どこまで読んだかを追えなくなります。

マークアップに誤りはなく、スキャンはページを読み込んで数秒で離れるため、最初の更新よりずっと前に終わります。この診断では、利用者の操作なしに始まるタイマーを見張り、内容を取得してマークアップとしてページに書き込むものを ew:auto-refresh-manual-check として確認に回します。そのタイマーが主要な内容を置き換えるのか、その前に更新を止めるスイッチがあるのかは、人が見て確かめるしかないためです。ページを再読み込みするmeta refreshは、遅延が20時間未満ならaxeの meta-refresh が報告します。それより長いものは2.2.1を満たすため、この診断では axe:meta-refresh-no-exceptions として確認に回します。AIのコーディングツールに「一覧を最新に保って」と頼むと、修正前の例の setInterval を書くことがあります。