押し間違えやすい操作から確認する
商品を開くことと比較に追加することは別の目的です。しかしスマートフォンでは、その二つのボタンがほぼ接している場合があります。デザインを変更する前に、検索と閉じる、前後の画像、プラスとマイナスなど、間違えやすい組み合わせを書き出しましょう。個々のアイコンの見た目だけでなく、隣同士の関係を確認します。普通に押すだけなのに慎重に狙う必要があるなら、配置を見直す余地があります。
小さな記号にも十分な操作領域を
コンパクトなアイコンを、余裕のあるボタンの中に置くことはできます。ただし、周囲に加えた余白も実際に押せる必要があります。見た目だけの間隔では不十分です。隣の操作領域と重ならないことも確認します。WCAG 2.2の達成基準2.5.8（AA）は、規定の例外を除き24×24 CSSピクセルを最小サイズとしています。この下限だけで、使いやすいメニューが完成するわけではありません。
大きくする前に整理する
すべての操作が収まらないからといって、ボタンを縮め続けるのは避けましょう。主な操作を見える位置に残し、使用頻度の低い操作をわかりやすい補助メニューにまとめます。現在のセクション名と戻る経路は維持します。翻訳後の実際のラベルも確認してください。モックアップの短い仮テキストでは、別の言語で発生する問題を見落とす可能性があります。
操作の流れの中で検証する
通常表示と拡大表示、狭い画面、検索用キーボードを開いた状態を確認します。ボタンの端、隣の操作との間、ラベル部分を押し、意図しないページ移動が起きないか見ます。操作後の結果も明確に伝える必要があります。Tabキーでの移動は別途確認しましょう。タッチ領域が広いだけでは、キーボードで使えるとは限りません。検証した画面と入力方法を記録し、数個のボタンを確認しただけでサイト全体のアクセシビリティ監査が完了したとは扱わないことが大切です。
続いて、見えるフォーカスとキーボード操作について確認しましょう。
実機で確認するときは、指を置く位置だけでなく、その後の流れも観察します。たとえば比較ボタンを押したつもりで商品詳細が開いた場合、ボタンの大きさだけを変更して完了にしないでください。周囲のリンクとの境界と、どの場所が反応したのかを確認します。修正後は同じ手順をもう一度試し、別の言語でもラベルが隠れないかを見ます。記録には対象ページ、画面幅、操作内容と実際の結果を残します。これにより、後の更新で同じ問題が戻っていないかを具体的に比較できます。