ドラッグでしかサイズを変えられない分割パネル

メモアプリの画面は2つのパネルに分かれていて、左のサイドバーにメモの一覧、右に開いたメモがあります。長いメモの題名はサイドバーに収まらずに途中で切れるため、サイドバーは広げられるようになっています。パネルの間には細い線があり、ポインターを重ねるとカーソルが左右の矢印に変わります。ドラッグすれば、サイドバーをウィンドウの5分の1から半分までの好きな幅にできます。ところがTabキーを押すと、フォーカスはサイドバーのメモを順にたどった後、開いたメモの「共有」ボタンへ移ります。線には一度も止まらず、ほかに幅を変える方法もページにはありません。

線を role="separator" と aria-orientation="vertical" で区切りとしてマークアップしているレイアウトもあります。それでもキーボードでは何も変わりません。Tabキーは同じように線を飛ばし、矢印キーも何もしません。スクリーンリーダーでページを読み進めても、見つかるのはせいぜい区切り線で、幅も、変える方法も伝わりません。

区切りは、スクリプトがポインターイベントで動かす空の div です。リンクでもボタンでも入力欄でもなく、tabindex もないため、Tabで止まらず、キー操作も受け付けません。サイドバーの幅を変えることはアプリの機能の一つですが、キーボードでは一切できないため、2.1.1を満たしません。

幅を変える方法はドラッグだけなので、2.5.7も満たしません。パネルの大きさを変えるのに、ドラッグは必要ありません。ポインターがどんな道筋をたどったかで結果は変わらないからです。キーボードで操作できるようにするだけでも足りません。2.5.7の解説書は、ドラッグ操作をキーボードで同じようにできても、それで自動的にこの達成基準を満たすわけではないとしています。タッチスクリーンやヘッドポインターを使う人、マウスのボタンを押したままにできない人は、矢印キーを使えないこともあり、クリックやタップで操作できるものが必要です。

区切りはスクリプトで動くコントロールなのに、ロールも名前も値もないため、4.1.2も満たしません。role="separator" を付けるだけでは解決しません。ARIAの区切りには2種類あります。hr のように見た目の境界を示す静的なものと、フォーカスでき、aria-valuenow で位置を示すウィジェットです。フォーカスできない区切りは静的なほうになるため、このロールは支援技術に「ここには操作するものがない」と伝えてしまい、サイドバーの幅を示す値もありません。区切りは指定しない限り横向きなので、aria-orientation="vertical" 自体は正しいのですが、この属性は線の向きを示すだけで、コントロールにはなりません。

サイドバーの幅を変えたくなるのは、本文のパネルが狭くて読み書きしにくいときや、サイドバーでメモの題名が切れるときです。どちらも、拡大表示を使う人に一番よく起きます。拡大すると、どのパネルにも収まる内容が減るからです。毎日使うアプリで幅を変えられないと、その不便が一日中続きます。

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

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

• 手の操作が限られる キーボードやスイッチの利用者は区切りに一度も止まれず、音声操作の利用者は声で指定する名前もないため、サイドバーは最初の幅のまま変えられません。
• 視覚が限られる 拡大するとどのパネルにも収まる内容が減るので、幅を変えたくなるのは拡大表示を使う人ほどです。それなのに、つかむ線は1〜2ピクセルの幅しかありません。
• 筋力や可動域が限られる 手のふるえがある人は、細い線をつかんだまま静止させるのが難しく、離す瞬間にも幅が変わってしまいます。
• 言語・認知・学習の能力が限られる 線をドラッグできると分かるのは、ポインターを重ねたときのカーソルの形だけです。タッチスクリーンにはホバーがないため、サイドバーの幅を変えられることに気付かない人が多くいます。
• 視覚を使わない スクリーンリーダーの利用者には、パネルの間に何もないか、操作できない区切り線があるだけなので、レイアウトを調整できること自体が伝わりません。

自動チェックに見えるのは、名前の要らない空の div か、フォーカスできない、つまり静的で何も要らない区切りです。どちらの修正前も、自動チェックのルールには反しません。axeの aria-required-attr は、フォーカスできるのに aria-valuenow のない区切りを報告するため、途中までの修正は見つかりますが、問題そのものは見つかりません。EaseWebの診断は、サイズ変更のカーソルが表示され、フォーカスを受け取らない細い帯があると、確認を促す項目を出します。ページのほかの場所で幅を変えられるかは、人が試さないと分からないからです。AIのコーディング支援に区切りのアクセシビリティ改善を頼むと、tabindex="0" と role="separator" を付けただけで終わることがあります。区切りはTabで止まるようになりますが、何もできず、値もなく、ドラッグせずに幅を変える方法もないままです。