CAPTCHAのアクセシビリティ問題をCloudflare Turnstileは解決するか

概要

Webフォームに対して、人間のアクセスとロボットのアクセスを見分ける技術として、CAPTCHAやパズル認証などが持ちいられてきました。

これらは主に、歪められて模様が追加された画像化文字を目で読んでキーボード入力させたり、マウスクリックでパズルを完成させるなど、いずれも視覚に依存した操作をユーザーに強いる点で、アクセシビリティ上の問題が指摘されてきました。

先日発表されたCloudflare Turnstileは、CAPTCHAの代替サービスで、エンドユーザーに操作を求める場面が少ない印象がありました。これを使えば、アクセシビリティの問題は起きないのか、確認してみました。

CAPTCHAのアクセシビリティの問題とは

初期のCAPTCHAは、ボットによるWebフォームに対するスパムメッセージを防ぐために用いられます。一般的に、歪められて模様が追加された画像化文字を目で読んでキーボード入力することで、それが人間による入力であると判断します。

しかし、画像の中の文字を目で読んでテキストに入力するため、視覚に障害がある場合は利用できない方法でした。

CAPTCHAの実装にはいくつかの種類がありますが、このうち Googleが提供する reCAPTCHA をよく見かけます。現在提供されている reCAPTCHA にはいくつかのタイプがありますが、こうした視覚の問題に対処するために音声によるチャレンジが用意されています。これは、音声で読み上げられる数字をテキストボックスに入力するものです。

他方で、この音声CAPTCHAも画像化文字も、機械学習によって自動的に攻略する手段が開発され、それに対応するためか音声はより聞きづらく、画像化文字はより難読化されているケースもあるのか、人間であってもCAPTCHAをクリアできないケースもあるようです。

こうした問題に対し、例えば reCAPTCHA v3では、そもそもユーザーの操作が不要なタイプが提供されています。

Cloudflare Turnstileのアクセシビリティを確認する

Cloudflare Turnstileは、2022年9月28日に発表された、"alternative to CAPTCHA" がコンセプトのサービスです。

すでに DevelopersIOでも記事が掲載されています。

この記事では、基本的な動作について記載されていますが、アクセシビリティ面での動作を確認するため、同様のフォームを用意しました。

この Cloudflare Turnstile では、基本的にユーザーの操作は必要ないように作られています。しかしながら、何度かリロードなどの操作を行うと、"Verify you are human" というチェックボックスが表示されることがあります。

このチェックボックスを、スクリーンリーダー PC Talkerと、音声ブラウザNetReader Neoの組み合わせで検証しました。

「Verify you are human 切り替え チェックなし スペースで切り替え」と読み上げられました。

仮に、音声ブラウザで操作中に、このチェックボックスが表示されても、ここにチェックボックスがあることは音声で把握することができ、スペースキーでチェックすることで、マウスと同等の操作が実現できることがわかりました。

今回は、実装時間の都合で追いつかなかったのですが、検証が終わった段階でコールバック関数を読む仕組みが用意されているので、ARIA-LIVE等で検証が終わったことをユーザーに伝える余地もありそうです。

まとめ

CAPTCHAのアクセシビリティに関する問題と、reCAPTCHAの簡単な現状、新しく発表されたCloudflare TurnstileのチェックボックスのUIを音声ブラウザで検証した結果について記載しました。

仮に、CAPTCHAを採用しなければならない場合は、こうしたアクセシビリティ上の問題について考慮して設計を行い、極力ユーザーの操作が必要ない実装を利用することとが重要だと考えます。

Photo credit: Tamar Weinberg on VisualHunt