トピックを検索
キーボードでは署名できない手書きの署名欄
フォームの署名欄が手書き用のパッドしかないため、マウスや指、スタイラスで書けない人は署名できず、フォームも送信できない
new SignaturePad(canvas) 問題
キーボード、スイッチ、音声操作、スクリーンリーダーの利用者が、手書きのパッドしかない署名欄に署名できず、レンタル契約を送信できない
ある自転車のレンタル店では、自転車を受け取る前に、オンラインでレンタル契約に署名してもらいます。フォームには「氏名」の欄、署名の線と「書き直す」ボタンのある「署名」の枠、そして「署名して送信」ボタンがあります。この枠は署名パッドと呼ばれるもので、マウスや指、スタイラスを押したまま動かすと、その軌跡に線が描かれる canvas です。紙に署名する感覚に近いため、店はこの方法を選びました。
キーボードの利用者が氏名を入力してTabキーを押すと、「書き直す」に移動します。パッドは飛ばされ、どのキーを押しても何も描けません。「署名して送信」を押すと「枠内に署名してください。」と表示されます。契約に署名できないため、自転車を借りられません。
レベルAAAのWCAG 2.1.3は、例外なく、すべてをキーボードで操作できることを求めています。レベルAの2.1.1には例外が1つあります。始点と終点だけでなく、ポインターの動いた軌跡そのものが必要な機能で、フリーハンドの描画がその例です。手書きの署名も、これに当たる場合があります。W3Cのポインタージェスチャーの解説にも、「署名の入力は本質的に軌跡に基づく場合がある（ただし、何かに同意することや本人であることを確認することは、そうである必要はない）」とあります。
つまり、このパッドは2.1.1の例外に当たる可能性がありますが、レベルAAAには頼れる例外がありません。満たすには、パッドをキーボードで描けるようにするのではなく、契約への署名という機能そのものに、名前の入力という軌跡の要らない方法を用意します。
ブラウザーにはこれを補う仕組みがありません。canvas はただのビットマップで、開発者が付け加えない限り、役割もフォーカスもなく、キー入力も受け取りません。signature_pad などの署名パッドのライブラリーが受け取るのは、ポインター、マウス、タッチのイベントだけです。署名を送る隠しフィールドも描いた内容からしか値が入らないため、ほかの方法では埋められません。
署名は、レンタル、配達の受け取り、同意書、賃貸契約など、手続きの最後に求められることが多いものです。キーボード、スイッチ、音声ですべての欄を入力してきた人が、最後の手順で先に進めなくなります。スクリーンリーダーを有効にしたスマートフォンでは、タッチはまずスクリーンリーダーに渡るため、描くには指の動きをそのままページに渡す特別なジェスチャーが必要で、しかも見えない枠の中に書くことになります。
10グループ中3グループに影響
- 全盲 （影響あり）
- 弱視 （影響なし）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 筋力・可動域 （影響あり）
- 認知 （影響なし）
- 光過敏 （影響なし）
- 手の操作が限られる キーボードやスイッチの利用者には、線を描く方法がありません。Tabキーはパッドを通り過ぎ、どのキーを押してもパッドには何も描かれません。音声操作でパッドをクリックすることはできても、ポインターを軌跡に沿って動かして署名することはできません。
- 視覚を使わない canvas からは何も読み上げられないため、スクリーンリーダーの利用者には「署名」という文字のすぐ後に「書き直す」ボタンが聞こえるだけです。見えない枠の中に署名を書くとなれば、手探りで書くしかありません。
- 筋力や可動域が限られる マウスのボタンを押したまま、あるいは指を画面に付けたまま軌跡に沿って動かすには、力と手の安定が要ります。ヘッドポインターやマウススティックでは、押すことはできても、文字を書くのはほぼ無理です。
axeなどの自動チェックは、canvas を役割のない要素としてコントロールの対象から外し、「書き直す」も名前の付いたボタンとして通すため、何も報告しません。実際に署名を試すこともないため、描かなければフォームを送れないことには気付きません。AIに署名欄を頼むと、canvas のライブラリーを使い、ほかには何も用意しないことがあります。signature_pad などのライブラリーの例も、パッドだけを置いています。EaseWebの診断では、pointerdown または mousedown を受け取る120×60ピクセル以上の canvas や SVG のうち、フォーカスを受け取らず、同じ fieldset（なければ親要素）の中に入力欄もないものごとに要確認項目を出し、描く内容を入力でも渡せるかを人が確認できるようにしています。
試してみる
キーボードだけで、レンタル契約に署名して送信してみましょう
名前を入力してからTabキーを押してください。手で書かずに署名する方法はありますか？次に修正を適用して、もう一度試してください。パッドには、マウスや指で今までどおり書けます。
問題あり 修正できますか？
修正方法
名前を入力して署名できるようにする
<form class="agreement"> <p class="field"> <label for="name">氏名</label> <input id="name" name="name" autocomplete="name" required> </p> <div class="signature"> <p>署名</p> <canvas id="pad" width="400" height="140"></canvas> <button type="button" id="clear">書き直す</button> <input type="hidden" name="signature" id="signature-data"> <p id="signature-error" class="error" hidden>枠内に署名してください。</p> </div> <button type="submit">署名して送信</button></form>問題点3点
氏名の欄とボタンには問題がありません。問題は署名にあります。
- Tabキーは「氏名」から「書き直す」に移動します。パッドには一度も止まらず、どのキーでも描けません。
- 隠しフィールドには描いた内容からしか値が入らないため、ほかに署名する方法がありません。
- 何か描くまで「署名して送信」はフォームを受け付けないため、キーボードの利用者はまったく送信できません。
入力か手書きか
<form class="agreement"> <p class="field"> <label for="name">氏名</label> <input id="name" name="name" autocomplete="name" required> </p> <fieldset class="signature"> <legend>署名</legend> <label for="typed-signature">署名として氏名を入力</label> <input id="typed-signature" name="typed-signature" autocomplete="name"> <p>または手書きで署名</p> <canvas id="pad" width="400" height="140"></canvas> <button type="button" id="clear">手書きを消す</button> <input type="hidden" name="signature" id="signature-data"> <p id="signature-error" class="error" hidden>氏名を入力するか、手書きで署名してください。</p> </fieldset> <button type="submit">署名して送信</button></form>修正の手順5ステップ
- 署名を
fieldsetでまとめ、凡例を「署名」にします。2つの署名方法が1つの質問として読み上げられます。 - 先頭に「署名として氏名を入力」というラベル付きの入力欄を置きます。Tabキーで移動でき、スクリーンリーダーはラベルを読み上げ、音声操作でも入力できます。
- その後ろに、手で書きたい人のためのパッドを「または手書きで署名」として残します。
- どちらか一方があればフォームを受け付けます。描いた内容は、描かれているときだけ読み取ります。
- どちらも空のときは、エラーで両方の方法を伝え、入力欄にフォーカスを移します。
これで修正前の例は直り、2.1.3を満たします。入力した名前が同じ役目を果たすため、署名に軌跡が要らなくなります。手書きは、使いたい人のための近道として残ります。
この方法を選ぶ理由：ジェスチャーは近道にし、唯一の方法にしない
どちらも基準を満たします。入力か手書きかを選べる方法は、手で署名したい人のためにパッドを残せますが、入力欄が1つ増え、どちらか一方を受け付ける確認が必要です。氏名の入力だけにする方法は、フォームが最も小さく、保守も最も楽で、手書きの署名を使う必要のない事業に向いています。署名を何に使うかで選んでください。事業や規則で手書きの署名を残す必要があるなら、入力欄の隣にパッドを残します。同意の記録だけが目的なら、入力した名前だけで足ります。
入力した名前が有効な署名として認められるかは、技術ではなく法律の問題で、契約の内容や国によって答えが変わります。電子署名サービスには、手書きの署名と並べて、名前を入力する署名を用意しているものがいくつかあります。フォームの持ち主が入力の署名をオフにできるサービスもあり、オフにすると、署名の方法として手書きしか残らないことがあります。
「氏名」の欄と入力の署名は、どちらも名前を尋ねます。氏名の欄から署名を自動で埋めると、本人は何も署名していないことになるため、そうしないでください。autocomplete="name" を付ければ、ブラウザーが1回の選択で入力できる候補を出します。
署名の画像のアップロードだけでは十分ではありません。ファイルの選択はキーボードでできますが、手で書けない人が署名の画像を持っているとは限りません。
矢印キーでパッドに描けるようにするのも修正になりません。矢印キーで描いた線は署名とは言えず、時間がかかり、キーを押すのに苦労する人には大きな負担になります。スクリーンリーダーの利用者には、描いたものが見えないままです。
フリーハンドの描画、絵を描くこと、軌跡に沿って操作するゲームのように、入力で代われない機能もあります。そうしたコンテンツは2.1.3を満たせず、W3Cの解説もそう述べています。それでも描画ツールは、図形、色、描いたものの移動など、軌跡ではない操作にはキーボードの方法を用意できます。2.1.1が求めているのも、この部分です。
多くのフォームのように、手書きが同意を示すためだけのものなら、署名すること自体には軌跡が要らず、ほかの方法のないパッドはレベルAの2.1.1も満たさない可能性があります。その問題はTabキーで到達できないdivのボタンとそのトピックで扱います。ここでの修正は、どちらも直します。
修正の確認
4項目、マウス不要
確認方法： キーボード、スクリーンリーダー、音声入力
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。フォームや署名のライブラリーを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。署名をキーボードでも行えるようにする方法を示していますが、入力した名前が契約に対して法的に十分かどうかは判断していません。ドラッグなど、1本の指やポインターで代われないジェスチャーは、ボタンで代われないピンチ・ドラッグ・傾きのジェスチャーで扱っています。キーボード、スイッチ、音声操作、スクリーンリーダーを使う人と一緒に、手続き全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。