選んだ条件も一覧の変化も伝わらない絞り込みリンク

あるショップのテーブルウェアのページでは、6点の商品の上に、「すべて」「マグ」「皿」「ボウル」の丸いリンクが横に並んでいます。どれも自分のアドレスを持つ本物のリンクなので、新しいタブで開いたり、人に送ったりできます。ところが、スクリプトがページの読み込みを止めています。「マグ」を押すと、マグの商品を取得して下の一覧を描き替え、アドレスを ?category=mugs に変え、「マグ」を黒く塗りつぶします。画面が見える人には、塗りつぶされたリンクと、マグ2点に減った一覧が見えます。スクリーンリーダーの利用者は「マグ、リンク」と聞いてEnterキーを押しますが、何も聞こえません。新しいページは読み込まれないので新しいタイトルは読まれず、スクリプトも何も伝えません。リンクへ戻っても、聞こえるのは前と同じ「マグ、リンク」で、ほかのリンクも同じように読まれます。商品を順にたどらない限り、一覧が変わったことも、どの絞り込みが効いているのかも分かりません。

それぞれのリンクは、絞り込みを選ぶためのコントロールです。塗りつぶされたリンクは「この条件が効いている」という状態を示しています。達成基準4.1.2「名前（name）・役割（role）及び値（value）」は、利用者が設定できる状態を支援技術が取得できること、そしてその変化が支援技術に通知されることを求めています。ここでは、その状態を表すのがスタイルシートだけが読む is-active クラスなので、押す前も押したあとも、支援技術に伝えられる状態がありません。さらにスクリプトは、本来はページの読み込みが担う、内容とアドレスの入れ替えを引き受けながら、読み込みなら何もしなくても起きる読み上げを省いています。リンクは「どこかへ移動する」と伝えているのに、実際にはその場でページを変え、今どこにいるのかを伝えるものが何も返ってきません。

こうした絞り込みの行は、商品の一覧、記事の一覧、検索結果の上に置かれます。スマートフォンでは横にスクロールする1行になり、変わる一覧は画面の外にあることが多いため、行だけを見ている人には、リンクが塗りつぶされたことしか分かりません。

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

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

• 視覚を使わない スクリーンリーダーは、押す前も押したあとも「マグ、リンク」と読むだけで、その間には何も読みません。一覧が変わったのか、どの絞り込みが効いているのかが分からず、商品を順にたどって確かめることになります。
• 視覚が限られる 絞り込みの行を拡大している人には、その下で一覧が変わったことが見えません。Windowsのコントラスト テーマでは、選んだことを示す唯一の手がかりである塗りつぶしが、ページの背景色に置き換わります。

スキャンは、名前とアドレスを持つ4つの正しいリンクと見なし、問題なしとします。リンクを押さないため、ページがその場で変わることに気づかず、is-active、selected、current といったクラス名にも意味を読み取りません。EaseWebの診断は、アドレスが表示中のページで、同じ行のほかのリンクと見た目が違うのに、コードには選択中の目印がないリンクを指摘します。そのうえで、絞り込みリンクの行を一つずつ目視確認に回します。何が読まれるかは、押してみないと分からないからです。AIアシスタントに絞り込みリンクの修正を頼むと、タブやリストボックスのための aria-selected や role="tab" を付けることがあります。リンクをボタンに変えてしまい、新しいタブで開いたり共有したりするためのアドレスがなくなることもあります。商品の一覧に aria-live を付ける例もありますが、押すたびに全商品が読み上げられるか、一覧ごと置き換わると何も読まれなくなります。