ホバーでしか現れないカードの操作ボタン

ショップの商品一覧は、すっきりとデザインされています。各カードには写真、商品名、価格だけがあります。カードにポインターを重ねると、価格の下に操作の行がふわりと現れます。「保存」と「カートに入れる」です。ポインターを離すと消えます。一覧は静かなまま、マウスを使う人には操作が届きます。

マウスを使わずにTabキーを押してみます。フォーカスは、あるカードの商品名から次のカードの商品名へ移ります。「保存」と「カートに入れる」には届きません。操作の行は、カードにホバーするまで visibility: hidden で隠されていて、隠れたボタンにはフォーカスが入らないからです。スマートフォンには、重ねておくポインターがありません。カードの写真や商品名をタップすると商品ページが開き、一覧で操作が表示されることはありません。

同じデザインには、もう一つの実装があります。行を opacity: 0 で隠し、カードの下端に、価格の上に重ねて滑り込ませるものです。こちらではTabで「保存」に届きますが、フォーカスがある間もボタンは完全に透明なので、キーボードの利用者には何も変わって見えず、Enterで何が起きるか分かりません。画面拡大鏡では、ポインターが着いた途端に行が価格を覆い、Escapeを押しても何も起きません。

操作は、止まったポインターに対してしか存在しません。WCAG 2.1.1（キーボード）は、すべての機能をキーボードで操作できることを求めています。失敗例F54は、同じことをスクリプトで行う場合を挙げています。ポインティングデバイスのイベントでしか届かない機能です。visibility: hidden や display: none で隠すと、ボタンはTabの順序から外れます。opacity: 0 では順序に残りますが、見えません。見えないボタンを押せても、助けにはなりません。タッチスクリーンはそもそもホバーできないため、スマートフォンの利用者にはどちらの実装も届きません。

表示された行がほかの内容を覆う場合は、1.4.13（ホバー又はフォーカスで表示されるコンテンツ）にも関わります。ホバーで現れて元の内容を覆うコンテンツは、ポインターやフォーカスを動かさずに消せる必要があります。通常はEscapeです。価格の上に滑り込む操作は、閉じる手段がないため、これを満たしません。

このパターンは、商品一覧、ファイルの一覧、写真のギャラリー、ダッシュボードなど、デザイナーが初期状態を静かに保ちたい場面でよく使われます。そのカードの「保存」や「削除」が、そこにしかないこともよくあります。

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

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

• 手の操作が限られる キーボードやスイッチの利用者には、カードに重ねるポインターがありません。操作は現れないか、見えないボタンにフォーカスが入ります。
• 視覚を使わない スクリーンリーダーの利用者もキーボードで移動します。visibility: hiddenはボタンをアクセシビリティツリーからも外すため、カードに「保存」があること自体が伝わりません。
• 届く範囲・力が限られる スマートフォンにはホバーがありません。カードをタップすると、操作が出る前にリンク先へ移動します。手をカードの上で止めておけない人は、パソコンでも操作を見られません。
• 視覚が限られる 画面拡大鏡の利用者は、カードの一部しか見えません。ポインターが着いた途端に操作が商品名や価格の上に滑り込み、下にあるものを読むために消す方法がありません。
• 言語・認知・学習の能力が限られる カードに重ねると操作が出ることは、カードのどこにも書かれていません。この仕組みを知らない人は、操作を見つけられません。

マークアップに問題はありません。カードの中に、名前のある本物のボタンがあります。静的なスキャンはそれを見て合格にします。問題はCSSのルールと、起きないことにあります。誰もホバーせず、ほかに行を表示するものがありません。ツールは、カードにホバーしてボタンが現れるのを確認し、次にそのボタンにフォーカスして、まだ見えているかを確かめる必要があります。修正をAIに頼むと、カードに tabindex="0" を付けることがあります。カードはTabの順序に入りますが、やはり何も表示されません。visibility を opacity に替えることもあり、問題の形が変わるだけです。