キーボードで押せないアイコンが並ぶツールバー

あるフリマサイトでは、出品者が商品の写真を公開前に整えられます。写真の下には「左に回転」「右に回転」「反転」「拡大」「縮小」「元に戻す」の6つのアイコンが並んでいます。写真が横向きに写ってしまった出品者が「右に回転」をクリックすると、マグカップがまっすぐ立ちます。アイコンはどれもSVGを入れたspanで、spanにクリック処理を付けています。マウスを使わずにTabキーを押すと、フォーカスはページの上の部分から「写真を保存」へ移り、6つのツールはすべて飛ばされます。写真を回すキーはないため、キーボード利用者は横向きのまま保存するしかありません。スクリーンリーダーでツールバーを読むと、文字も役割も名前もないspanが6つあるだけです。ツールがあることも、押せることも、それぞれが何をするかも伝わりません。

達成基準2.1.1「キーボード」は、マウスでできることはすべてキーボードでもできることを求めています。どのツールも、フォーカスを受けないspanのクリックでしか動きません。ブラウザーがEnterキーとSpaceキーをクリックに変えるのはHTML標準のコントロールだけのため、spanに tabindex を付けても、どちらのキーにも反応しません。写真の回転、反転、拡大は、キーボードではまったくできません。

達成基準4.1.2「名前（name）・役割（role）及び値（value）」は、どのコントロールも名前と役割をソフトウェアが判別できることを求めています。ツールはどれも、クリックすると写真が変わるコントロールです。spanにはもともと役割がないため、押せるものだとは伝わりません。中のアイコンはスクリーンリーダーから隠したSVGのため、spanに名前を与えるものもありません。W3Cはこれを失敗例として挙げています。スクリプトでspanやdivをコントロールにしながら役割を与えないものが失敗例F59、より広く、アクセシビリティAPIを使わない独自のコントロールが失敗例F15です。

このようなツールバーは、何かをその場で編集する画面ならどこにでもあります。写真やアイコン画像の切り抜き、文書やPDFのビューアー、コメント欄、選んだファイルを操作するファイル一覧などです。アイコンのツールは小さく、間隔を詰めて描かれることが多いため、手の震えがある人にはクリックしにくく、だからこそキーボードを使う人もいます。

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

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

• 手の操作が限られる キーボードやスイッチの利用者はどのツールにも止まれないため、写真を回転することも、反転や拡大をすることもまったくできません。音声操作の利用者は、どのツールにも名前がないため「右に回転をクリック」と言っても押せず、グリッドでポインターを合わせるしかありません。
• 視覚を使わない スクリーンリーダー利用者には、文字も役割も名前もない空のspanが6つあるだけで、写真を回転できることも、どのアイコンで回転するかも分かりません。

このツールバーには、axeが確認することがありません。クリック処理を付けたspanには役割がないため、名前を求めるルールは当てはまらず、押すためのものであることはマークアップのどこにも書かれていません。AIが提案することのある修正どおりに role="button"、tabindex="0"、aria-label を足すと、spanはaxeに合格し、Tabキーでも届きますが、EnterキーとSpaceキーでは何も起きません。Tabキーで到達できないdivのボタンで説明しているとおりです。

この診断ツールは、ページをTabキーで進みます。クラス、id、ロールからツールバーと分かる要素の中で、アイコンや文字を含み、それ自体にポインターのカーソルが付いた要素をツールとみなします。そうしたツールが2つ以上並び、その列にフォーカスを受けるものが何もないとき、Tabキーが一度も届かなかったツールを報告します。Tabの移動先がツール1つだけの role="toolbar" では、そのツールにフォーカスを置いて矢印キー、Home、Endを押し、フォーカスがまったく動かなければ、ほかのツールに届かないとして報告します。こちらは、修正が途中で終わったもう1つの形です。ツールバーのパターンのマークアップ（最初以外のツールの tabindex="-1"）だけを写し、フォーカスを動かすスクリプトを書かなかった場合です。クリックできるアイコンが並んでいても、コンテナーのクラス名、id、ロールからツールバーと分からなければ、ツールバーとしては報告しません。名前がアイコンの働きを表しているかどうかも、どの確認でも判断できません。