「ターゲットのサイズ (最低限)」に抵触しやすい箇所
WCAG (Web Content Accessibility Guidelines) 2.2 で新たに追加された達成基準 2.5.8「ターゲットのサイズ (最低限)」は、ポインタ入力のターゲットのサイズが基本的に 24 × 24 CSS ピクセル以上であることを求めています。また (「間隔」の例外として) ターゲットのサイズが 24 x 24 CSS ピクセル未満でも、そのターゲットの中心から直径 24 CSS ピクセルの円があるとして、その円が別のターゲット (または円) と重ならなければ許容されます。(参考記事 : WCAG 2.2 の新達成基準「ターゲットのサイズ (最低限)」)
上述の「間隔」の例外も含めて考えると、この達成基準に抵触するケースはあまりないのでは？という印象を受けるかもしれません。たしかに、クリック / タップが可能なオブジェクト (リンクやボタンなど) がよほど小さく、かつ近接しすぎているということがなければ問題ないのですが、私自身、実際にウェブアクセシビリティ診断をさせていただく中で、この達成基準に抵触しやすい箇所はパターンとしていくつかあると感じています。大別すると「小さなターゲットが密集しているところ」と「小さなターゲットが重なっているところ」になりますが、それぞれについて、この達成基準に抵触しそうな「あるある」の箇所を挙げてみたいと思います。
小さなターゲットが密集しているところ
極小のリンクまたはボタンが密集している箇所は、この達成基準に抵触しやすいと言えます。よくある例として、以下が挙げられます。
サイト共通フッターのナビゲーション
「ご利用規約」「個人情報保護方針」「ウェブアクセシビリティ方針」「ソーシャルメディア運用方針」「お問い合わせ」 ... といったリンクが、サイト共通フッターのナビゲーション機能として、小さな文字で並んでいることがあります。これらのリンクの並びが複数行にわたると、行間が狭い場合に、この達成基準に抵触する恐れがあります。
レスポンシブデザインを採用しているサイトの場合、PC の表示幅ではリンクの並びが一行に収まるものの、タブレットやスマートフォンの表示幅では折り返しが発生してリンクの並びが複数行になることがあります。ページレイアウトが変わるブレークポイント (あるいは代表的なデバイス種別の画面サイズ) ごとに検証するようにしましょう。
カルーセルのドット群
カルーセルに、(何枚目中) 何枚目のパネルが表示されているかを視覚的に示すドット群があって、それらをクリック / タップすることでパネルの切り替えができる場合、個々のドットが小さく、かつ近接しすぎていると、この達成基準に抵触する恐れがあります。
ページネーションの数字のリンク
メインコンテンツの下などにページネーション (ページ送り) のリンクがあって、個々のリンク (数字) が小さく、かつ近接しすぎていると、この達成基準に抵触する恐れがあります。
小さなターゲットが重なっているところ
クリック / タップが可能な領域と重なる形で、極小のリンクまたはボタンが配置されている箇所も、この達成基準に抵触しやすいと言えます。このようなケースでは「間隔」の例外が適用されないので、ターゲットのサイズが 24 × 24 CSS ピクセル未満だと即「NG」となります。よくある例として、以下が挙げられます。
カルーセルの左右の矢じり
カルーセルに、パネルを切り替えるための左右の矢じりボタンがあって、それらのボタンが小さく、かつクリック / タップが可能なパネルと重なって配置されている場合、この達成基準に抵触する恐れがあります。
カード型 UI のサブ機能
クリック / タップが可能なカード型 UI があって、かつ、そのカード領域の中に小さいサブ機能 (たとえば「いいね」ボタンなど) が重ねて配置されている場合、この達成基準に抵触する恐れがあります。昨今では、いかにも「カード」然とした外観の UI を見ることが少なくなった気がしますが、たとえばソーシャルメディアのタイムラインなども、これに類すると言えるかと思います (各投稿を1枚の「カード」として見たときに、それ自体、全体的にクリック / タップが可能で、かつ、その領域に重なる形で「返信」「いいね」「リポスト」といった小さなサブ機能が配置されている場合)。
一般的な企業サイトにおいても、たとえば商品一覧のリンクがあって、各リンク (サムネイル、見出し、説明などを含むひと塊のクリック / タップが可能な領域) に重なる形でサブ機能 (関連するタグのリンク、「お気に入り」やカートへの追加ボタン、など) が配置されていたりすると、これに該当する可能性があるので要注意です。
以上、私自身のウェブアクセシビリティ診断の経験から感じた「あるある」な箇所を挙げてみました。もちろん、この達成基準に抵触する箇所は上記に限定されるわけではありませんが、効率的な問題発見の一助になれば幸いです。そしていずれの問題も、既存のビジュアルデザインにほとんど影響することなく、ターゲットのサイズ (あるいは間隔) を少し広げるだけで達成基準を満たすことができるので、このようなケースを見つけた場合はささっと改善することをおすすめします。