アクセシブルなお問い合わせフォームと欧州アクセシビリティ法

お問い合わせフォームは、訪問者と事業者をつなぐ唯一の入口であることがよくあります。その扉を開くのに、マウス、良い視力、ぼやけた画像パズルを解く忍耐が必要なら、入れない人がいます。2025 年半ば以降、これは単なる使いやすさの問題ではなくなりました。EU の消費者に販売する多くの事業者にとって、法的な問題にもなっています。

欧州アクセシビリティ法の対象

欧州アクセシビリティ法（指令 (EU) 2019/882）は、2025 年6月 28 日から適用されています。消費者向けの特定の製品やサービスに、アクセシビリティの要件を定めています。電子商取引、消費者向け銀行サービス、電子書籍、電子通信、旅客輸送の一部などが対象です。サイトでは、顧客が連絡、質問、苦情に使うフォームを含め、オンラインショップや銀行サービス全体が対象になります。サービスを提供する零細企業、すなわち従業員十人未満で、年間売上高または貸借対照表の合計が 2 百万ユーロ以下の事業者は適用除外です。他の事業者だけを対象とする提供は、一般に対象外です。

各加盟国は、この指令を国内法に移しています。ドイツでは Barrierefreiheitsstärkungsgesetz（BFSG、アクセシビリティ強化法）、ポーランドでは、特定の製品とサービスがアクセシビリティ要件を満たすことを確保するための 2024 年の法律です。監督機関や罰則は国ごとに異なりますが、技術的な基準はおおむね共通です。実務では欧州規格 EN 301 549 を使い、これはウェブコンテンツアクセシビリティガイドライン（WCAG）を基礎としています。

法的義務がなくても取り組む価値がある理由

事業が適用除外だったり、企業だけを顧客としていたりするかもしれません。それでも、アクセシブルなフォームには価値があります。途中で諦めた人の問い合わせは、決して届かないからです。スクリーンリーダーの利用者を助ける修正は、電車内で携帯電話を使う人、強い日差しの下にいる人、手首を骨折している人、第二言語で入力する人にも役立ちます。明確なラベルと役立つエラーメッセージは、すべての人の途中離脱を減らし、スパム対策を弱めることもありません。

WCAG 2.2 の参照付き実用チェックリスト

• 入力欄に関連付けられた可視ラベル（1.3.1、3.3.2）：すべての欄に、for/id で関連付けた見えるラベルを付けます。プレースホルダーだけではラベルになりません。入力し始めると消えるからです。
• 修正方法を説明するエラーメッセージ（3.3.1、3.3.3）：欄の名前、問題の内容、直し方を、赤い枠だけでなく文章で示します。「入力が無効です」より「name@example.com のようなメールアドレスを入力してください」のほうが役立ちます。
• すべてをキーボードで操作（2.1.1、2.1.2）：すべての入力欄、チェックボックス、CAPTCHA、送信ボタンに Tab、Space、Enter で到達し、キーボードトラップなしで操作できます。
• 見えるフォーカス（2.4.7）：どの欄が有効か、いつでも分かります。代わりを用意せずにブラウザーのフォーカス枠を消すと、この基準を満たしません。
• 十分なコントラスト（1.4.3）：文章、ラベル、エラーメッセージは、背景に対して少なくとも 4.5:1（大きい文字は 3:1）のコントラスト比を確保します。
• ターゲットのサイズ（2.5.8）：ボタン、チェックボックス、リンクは、少なくとも 24 × 24 CSS ピクセルとするか、周囲に十分な間隔を設けます。
• CAPTCHA の代替手段（1.1.1）とアクセシブルな認証（3.3.8）：1.1.1 は、テキストの代替と、複数の感覚に対応する形式の CAPTCHA を求めます。3.3.8 は厳密にはログインの段階が対象ですが、その考え方は応用できます。歪んだ文字の再入力や計算問題だけを、唯一の通過方法にしてはいけません。代替手段を用意するか、パズルをまったく必要としない方法を使います。
• 支援技術から隠すハニーポット：罠の欄のラッパーに aria-hidden="true" を付け、欄に tabindex="-1" を設定し、スクリーンリーダーやキーボードの利用者が到達しないようにします。

CAPTCHA とハニーポット：スパム対策とアクセシビリティの接点

厳密には、達成基準 3.3.8 はログインや認証の段階に関するもので、お問い合わせフォームが対象ではありません。しかし、その考え方はよく当てはまります。歪んだ文字の入力、計算問題、画像の格子から信号機を選ぶ操作は、一部の人を完全に排除します。Cloudflare Turnstile、Friendly Captcha、ハニーポットと時間チェックの組み合わせ、Akismet のようなサーバー側のフィルターなど、通常はパズルなしで使える選択肢なら、訪問者に証明を求めずにスパムを防げます。ハニーポットが親切なのは、スクリーンリーダーやキーボードの利用者にも、本当に見えない場合だけです。

<div class="hp" aria-hidden="true">
  <label for="hp-website">この欄は空のままにしてください</label>
  <input type="text" id="hp-website" name="website"
         tabindex="-1" autocomplete="off">
</div>
<!-- CSS: .hp { position: absolute; left: -10000px; } -->

十五分で自分のフォームをテスト

1. 1マウスを脇に置き、キーボードだけでフォーム全体を入力します。すべての欄と送信ボタンに到達できますか。今どこにいるか、いつでも見て分かりますか。
2. 2フォームを空のまま送信し、次に誤ったメールアドレスで送信します。正しい欄の隣に文章のエラーが表示され、何をすべきか明確ですか。
3. 3携帯電話でページを開くか、ブラウザーを 200% に拡大します。すべて読めますか。ボタンは押しやすいですか。Cookie バナーやチャットウィジェットが送信ボタンを覆っていませんか。
4. 4スクリーンリーダー（VoiceOver、NVDA、TalkBack）を有効にして聞きます。各欄がラベルとともに読み上げられ、ハニーポットは読み上げられずに済んでいますか。
5. 5axe-core などの自動チェックを実行します。ラベルの欠落やコントラストの問題を素早く見つけますが、すべては分かりません。上記の手動確認も必要です。

まず全体像を見たいなら、formexposed は何も送信せず、公開フォームを外側から調べます。アクセシビリティのチェックでは、各フォームで axe-core を実行し、アクセシブルな代替手段のない CAPTCHA や、スクリーンリーダーが読み上げるハニーポットを指摘します。また、携帯電話でのフォームについて、タップ対象、送信ボタンを覆う重なり、横スクロールも確認します。無料チェックは全体の水準を示し、これらの詳細は完全なレポートに含まれます。上記のチェックリストの出発点になりますが、実際の人によるテストに代わるものではありません。