ランディングページのアクセシビリティチェックリスト

アクセシブルなランディングページは、マウスがなくても、視力が完璧でなくても、読んで、タブで移動して、送信できるページです。このチェックリストは、失敗の大半を捕まえる4つの確認から始まります。文字のコントラスト比は最低4.5対1、操作できる部品は最低24×24 CSSピクセル、すべての部品でフォーカスが目に見えること、すべてのフォーム項目に本物のラベルがあること。4つともデザインの段階なら安く直せて、あとから直すと高くつきます。

多くのページはコントラストで落ちる

WCAGはレベルAAで、通常の文字と背景のコントラスト比を最低4.5対1と定めています。大きい文字は3対1です。大きいとは18ポイント以上、または14ポイントの太字で、CSSではおよそ24px、太字なら18.5pxにあたります。この値は四捨五入されないので、4.499対1は不合格です。よくある犯人は、白地に薄いグレーの本文です。次に多いのが写真の上の白抜き文字で、画像の上のほうでは足りていても、下のほうで崩れます。

ボタンとアイコンにもコントラストが要る

文字はその半分でしかありません。WCAGは同じレベルAAで、UIの部品と意味を持つ図形についても、隣り合う色に対して3対1を求めています。入力欄の枠線、ボタンの輪郭、チェックボックス、評価の星、それ単体で意味を運ぶアイコンが対象です。ランディングページで一番よく落ちるのは、白いカードの上の薄いグレーの入力枠です。そしてそれは、コンバージョンの前に必ず気づいてもらう必要がある要素です。

タップ領域は24×24ピクセル確保する

WCAG 2.2はレベルAAにターゲットサイズの基準を追加しました。操作できる対象は最低24×24 CSSピクセルにします。これより小さくてよいのは、直径24ピクセルの円をそれぞれの中心に置いても他の対象と重ならないくらい離れている場合です。文中のリンクは対象外です。実際に引っかかるのは、アイコンのボタン、モーダルの閉じるボタン、フッターのSNSアイコン、ページ下部にぎゅっと詰めた規約まわりのリンクです。

キーボード操作の確認は5分で終わる

マウスから手を離し、ページの先頭からTabキーを押していきます。リンク、ボタン、入力欄、メニューの部品が、見た目の並びと同じ順にフォーカスを受け取り、いまどこにいるかが常に見えている必要があります。ここで落ちるのは自作の部品です。divで組んだスライダーは中に閉じ込めます。動画のモーダルはフォーカスを離しません。固定ヘッダーは、いまタブで移動した要素を隠します。キーボードで主ボタンに到達して押せないなら、そのページは壊れています。

すべての入力欄に本物のラベルを付ける

プレースホルダーは入力した瞬間に消えるので、途中で分からなくなった人には確かめる先が残りません。スクリーンリーダーのプレースホルダーの扱いもばらばらです。各項目の上に、目に見えるラベルを置きます。書式の例を見せたいならプレースホルダーはそのままでよく、ラベルと入力欄を正しく結びつけて、ラベルをタップすると入力欄にフォーカスが入るようにします。エラーメッセージは、何が起きたかを言葉で書きます。色だけで不備を示すことはできません。

2025年に始まったEUの規制

欧州アクセシビリティ法(European Accessibility Act)は2025年6月28日に発効しました。EUの消費者向けに売られるサービスが対象で、ECサイト、銀行、交通の予約も含まれます。基準にはEN 301 549を使い、これはWCAGのレベルAAの上に作られています。欧州の消費者に売っているなら、アクセシビリティは「やったほうがよいこと」から「守らなければならないこと」に変わりました。執行は単一の機関ではなく各加盟国が行うので、リスクは読みにくくなります。小さくはなりません。

このチェックリストを20分で回す

まず自動チェックのツールをかけて、スコアは無視します。自動ツールが捕まえられるのは一部だけです。次にページ全体をTabキーで移動します。文字とボタンの色をコントラストチェッカーで1つずつ拾います。ブラウザを200%に拡大して、重なりや見切れが出ないか確認します。OSに入っているスクリーンリーダーをオンにして、ヒーローとフォームを聞きます。コントラストの値はページごとに直すのではなく、デザイントークンの側で直します。そうしないと、次のページでも同じ不備が公開されます。