マウスでしか切り替えも拡大もできない商品写真ギャラリー

あるショップがホーローマグを売っています。商品ページには大きな写真が1枚あり、その下に正面、側面、背面の3つのサムネイルが並びます。背面には「Dishwasher safe」「350 ml」という小さな印字があり、この大きさでは読めません。マウスなら問題なく使えます。最後のサムネイルをクリックすると背面の写真に変わり、写真の上でマウスを動かすと、ポインターの周りが拡大されて印字が読めます。

マウスから手を離してTabキーを押してみます。フォーカスはそのまま「カートに入れる」へ移ります。サムネイルはクリック処理を付けた画像で、フォーカスを受けないため、キーボード利用者が見られるのはマグの正面だけです。拡大は写真の上でマウスを動かすと始まる仕組みで、キーボードでは始められません。正しい写真を出せたとしても、小さな印字は読めないままです。

サムネイルを本物のボタンにしたギャラリーもあります。Tabで届き、Enterキーで写真も変わります。ところが画像のaltが空なので、どのボタンも「ボタン」としか読まれません。表示中の印はクラスで描いた枠線だけで、スクリーンリーダーには伝わらず、押して写真が変わっても何も読まれません。拡大にはやはりマウスが必要です。

達成基準2.1.1（キーボード）は、マウスでできることはすべてキーボードでもできるよう求めています。写真を切り替えるには画像をクリックしますが、画像はフォーカスを受けないので、Tabは止まらず、Enterキーで押す相手もありません。拡大は mousemove で始まりますが、このイベントはどのキーを押しても発生しません。W3Cの失敗例F54が挙げているのがまさにこの場合で、ポインティングデバイス専用のイベントハンドラーでしか機能を実行できない状態を指します。ここでの機能は、写真の細部を見ることです。

達成基準4.1.2（名前・役割・値）は、コントロールの名前、役割、状態を伝えるよう求めています。クリックできる画像にはボタンの役割がありません。alt="" の画像だけを入れたボタンには、役割はあっても名前がありません。さらにどちらも、表示中のサムネイルは枠線を描く is-current クラスでしか分からず、状態が伝わりません。画像をボタンにすればキーボードの問題は解決しますが、こちらは残ります。

サムネイルを押すと、フォーカスはサムネイルに残ったまま、ページの別の場所で写真が変わります。そのためスクリーンリーダー利用者には、何かが起きたことが伝わらない場合があります。どちらの基準も、この変化を読み上げることまでは求めていません。ただ、伝わるに越したことはないので、以下の修正では、カルーセルのガイドで新しいスライドを読み上げるのと同じように、控えめなライブリージョンで知らせます。

背面、ラベル、お手入れの説明など、1枚目にはない情報がほかの写真に写っていることはよくあります。マウスを使えない人には正面の写真しか見えず、ほかの写真があることに気づかない場合もあります。

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

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

• 手の操作が限られる サムネイルがフォーカスを受けず、拡大はマウスを動かしたときにしか始まらないため、キーボード、スイッチ、音声操作の利用者は、ほかの写真も写真の細部も見られません。
• 視覚を使わない 画像のサムネイルには届きません。altが空のボタンにしても「ボタン」としか読まれず、どの写真を表示中かも伝わらないため、スクリーンリーダー利用者には写真の区別がつかず、押して何が変わったのかも分かりません。

画像で作ったサムネイルにはボタンの役割がないので、axeには調べる対象がありません。この診断が報告するのは、クラス名からサムネイルと判断でき、カーソルがポインターになり、フォーカスを受けず、近くにずっと大きな写真があって、ほかに写真を変える手段がギャラリーにないものです。キーボードで押せる前後のボタンが並ぶサムネイルは対象外です。FlexSliderのサムネイルも対象外です。スライダーが1つだけのページなら、初期設定のままで、どこにいても左右の矢印キーでスライドが変わるためです。サムネイルが名前のないボタンなら、axeが button-name を報告します。role="button" を付けたdivなら aria-command-name です。

次の2つは人の判断が必要なため、確認の手がかりとして報告します。1つは、どのサムネイルにも状態がないボタンの列です。aria-current がないことはコードで分かっても、ページがほかの方法で伝えているかまでは分かりません。もう1つは、マウスでの拡大を設定した写真で（Drift、elevateZoom、jQuery Zoom、Magentoの拡大鏡、Dawnのホバー設定が残す目印で判断します）、写真がリンクの中になく、近くに拡大や写真を開くと分かるコントロールがない場合です。自前で実装した拡大にはこうした目印がなく、どのチェックでも見つかりません。

手早く直そうとして各画像に tabindex="0" を足すだけでは、Tabで止まっても、EnterキーもSpaceキーも効きません。フォーカスで拡大が始まるようにしても同じことで、見たい部分へ表示を動かす手段がキーボードにはありません。

チェックツールに出るメッセージ

axe DevTools

• ARIAコマンドにはアクセシブルな名前がなければなりません ARIA commands must have an accessible name
• ボタンには認識可能なテキストが存在しなければなりません Buttons must have discernible text

Lighthouse

• button、link、menuitem 要素にユーザー補助機能向けの名前が設定されていません。 button, link, and menuitem elements do not have accessible names.
• ボタンにユーザー補助機能名が指定されていません Buttons do not have an accessible name

WAVE

• Empty button