ドラッグでしか動かない範囲スライダー

ネットショップの商品一覧に価格の絞り込みがあります。$0から$200までのトラックに丸いつまみが2つあり、上に「$20 – $160」と表示されています。マウスでつまみを押して動かし、離すと商品が絞り込まれます。Tabキーを押すと、フォーカスはカテゴリーの一覧から「適用」ボタンへ飛びます。どちらのつまみもフォーカスを受けません。スクリーンリーダーは、たどり着けば「価格、$20 – $160」を文字として読みますが、変更できるものは何もありません。スマートフォンではつまみが小さく、押した指がつまみの横に当たって、ページがスクロールすることがよくあります。

つまみはポインターイベントで動かす span 要素なので、この絞り込みは3つの達成基準を同時に満たしません。キーボードでは何もできないため2.1.1を満たしません。つまみには役割も名前も値もなく、スクリーンリーダーは何の部品か、どこに設定されているかを伝えられないため4.1.2を満たしません。価格を設定する方法がドラッグしかないため2.5.7も満たしません。価格を選ぶのに、ドラッグは本質的ではありません。

同じ問題は、もっと目立たない形でも現れます。role="slider" と tabindex="0" があってもキーの処理がなく、フォーカスは受けるのに矢印キーを無視するもの。矢印キーで動くのに、aria-valuenow が読み込み時の値のままのもの。単位なしで「20」と読まれるものや、2つのつまみがどちらも「価格」という名前のものもあります。キーボードに対応しても2.5.7は満たせません。この達成基準が求めるのはシングルポインターで使える方法で、タッチスクリーンの利用者には矢印キーがありません。

価格や日付の絞り込みは、長い一覧を絞る唯一の方法であることが多く、ほかの方法で動かせないスライダーは、利用者にすべての商品をスクロールさせることになります。スマートフォンでは、つまみがほかの操作部品の24ピクセルより小さいことが多く、誰にとってもつかみにくくなります。

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

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

• 手の操作が限られる キーボード、スイッチ、音声操作の利用者は、押したまま動かすことができず、つまみもTabの順序にないため、価格の範囲は最初のまま変えられません。
• 視覚を使わない スクリーンリーダーの利用者には、操作できる部品も値も見つかりません。範囲は中身のない2つのspanと、たどり着くとも限らない1行の文字です。
• 届く範囲・力が限られる 手の震えや握力の弱い人は、途中でつまみを離してしまったり、狙った値から1〜2刻みずれた所で離してしまったりします。
• 視覚が限られる 画面拡大を使うと、つまみと価格の表示が画面の別の場所に分かれることがあり、値の設定が手探りになります。

自動チェックに見えるのは、中身のない2つのspanと1行の文字で、問題は見つかりません。spanに名前は不要で、操作部品であることを示すものもないからです。axeは、名前や aria-valuenow のない role="slider" は報告しますが、矢印キーが効かないものや、値が変わらないものは報告しません。それはキーを押して初めて分かります。コード生成AIにスライダーの修正を頼むと、role="slider" と tabindex="0" を付けて終わることがよくあります。これでは、何も読み上げず動きもしない部品がTabの順序に入るだけです。マークアップに手がかりがないため、ドラッグせずに値を設定する方法を加えることもまれです。