Webアクセシビリティ：フォーム（申し込みや購入時の入力欄）はわかりやすさが基本、結果を出す為の必須条件とは

2019年12月10日2020年2月21日

　Webアクセシビリティの対策のなかで一番に取り組みたいのが「入力フォーム」です。フォームがわかりやすく操作しやすいことは登録＆成約に直結します。まず第一はブログに設置されている「お問い合わせフォーム」「メルマガ登録フォーム」や「購入フォーム」に容易にたどり着けること！（これ案外盲点です）、そして勿論のことストレスなくフォームへの入力ができること、もしエラーや不備が生じた場合はその箇所や対処方法がわかりやすく示されること。これらはアクセシビリティの観点からだけではなく、マーケティングの面からでもとても重要です。なんのためにブログを運営しているのかを考えたときに、「フォーム」に対する対策が疎かであれば、その他の努力が報われません。
　この記事では、フォーム設置について取り組んでほしいことを具体例をあげて紹介しています。システムの面や技術的なことで難しいこともあるかもしれませんが、できる範囲で工夫してストレス（障害）の少ないフォーム作りを目指してください。
　一番大切なのは「ユーザー目線」です、作り手側では案外気づかない落とし穴がわりとあります、可能であれば身近な高齢者やあまりパソコンやスマフォに慣れていない方に一度操作していただくのがお勧めです（^^）

フォームの設定

フォームに関しては、「JIS X 8341-3:2016達成基準」でも色々な箇所で取り上げられています。「JIS X 8341-3:2016」を参考にしながらお勧めの対策が以下です。

■label要素を使用して、入力項目に対する「ラベル＝項目名や項目の説明」をつける
■入力に関する重要な情報（必須項目等）は色（赤色にする等）だけで伝えず、必ず言葉（必須等）で記載する
■入力形式について、注意点や例（半角英数、030-2121-3333等）が示されている
■エラー時は、その箇所と修正方法がわかりやすく示される
■カーソルの移動や現在位置をわかりやすくする
■操作が、キーボードだけでできるようにする（マウスをつかわずTabやEnterで操作できる）

それでは、各項目について具体的に解説します。

label要素を使用してテキストを設定

９.フォーム・コントロールのラベルをマークアップする
これは、「フォーム（＝フォームコントロール）」に記載されている「項目名」をHTMLの構文で書く場合にlabel要素を用いて記載するということです。

具体的にいうと、まず以下のように入力項目に対して、入力項目を示すラベル（テキスト）がある場合、

そのラベル（テキスト）が、HTMLのlabel要素を用いて設定がしてあるかということです。

  多くの場合に、フォームを入力するための項目説明がテキストとしてフォームのすぐ近くにあります。人は見た目でそのテキストがフォームのラベル（項目名）であることがわかりますが、ブラウザやスクリーンリーダーなどの機械がそれを理解できるようにするために、HTMLのWebページではlabel要素を用いてマークアップ(記載）します。
　これによって、スクリーンリーダーではフォームを読み上げるときにラベルとなるテキストを一緒に読み上げることができるほか、ラジオボタンやチェックボックスなどはラベルとなるテキストをクリックして選択することができるようになるため、細かいチェックボックスの中をクリックすることに比べてマウスで操作が行いやすくなります。

実際の設定方法

Wordprssでは実際にHTMLの構文を操作する機会は少なく、馴染みのない内容かもしれません。Wordpressでフォームを作成するためによく使われる「Contact Form 7」は基本的にlabel要素を使ってマークアップされるようになっているため、そのまま利用して大丈夫です（選択するフォームによってはデフォルトでlabel要素にならないものもあります）。
＊以下のラベルの部分は自由に内容を変えることができます

＊Wordpressでフォームを利用した画面を作る方法：Contact Form 7の使い方については以下の記事を参照ください。
↓↓↓↓↓↓↓
■WordPress、フォーム作成プラグインの定番　[Contact Form 7]

入力に関する情報は色だけで伝えず言葉で記載する

以下のように必須情報が色でしか判別できない場合、色弱や色盲の人、またスクリーンリーダーでの読み上げ時には必須項目が判別できません。一般の方にわかりやすくするために色を変えることも大切ですが併せて色が判別できなくても情報が伝わるようテキストで情報を記載しましょう。

入力例が示されている

フォーム欄の中に実際の入力例があると、わかりやすいです。特に郵便番号や電話番号でハイフンの要不要や、生年月日など日付の入力方法を示すには文字だけの説明よりも伝わりやすいです。

さらに、入力に対する注意事項が記載されていればなお親切です。

エラーはその箇所と修正方法が示される

10.エラーメッセージではエラー箇所と修正方法を明示する

入力フォームはエラーとなったとき、入力間違いの箇所と修正方法がわかりやすく表示される。

入力がエラーになったときの画面で、間違えている箇所が色が変わって表示されたり、修正方法が明確（具体的）に示されることが必要です。

カーソルの移動や位置をわかりやすくする

入力済みのフィールドは背景色が変わって入力完了が認識できたり、入力中のフィールドが少し明るくなったりしてカーソルや文字が見やすくなったり、ちょっとした工夫で入力忘れなどのエラーも防げます。

フォームにこのような機能を持たせるには、独自でCSSやスクリプト（プログラム）を設定する必要がありますが、有料のサービスやテーマを利用することによって簡単な操作で実装することができます。購入フォームや申し込みフォームを設置して収益をあげることが目的のサイトであればある程度の投資をしてでも取り組むべき価値があるのではないでしょうか。

操作が、キーボードだけでできるようにする

サイト全体的にキーボードのみで利用できる必要がありますが、特にフォーム入力は実際にキーボードだけで操作してみて不具合がないかの確認をしておきましょう。

入力フォームなどは一般的に以下のように次のような方法で操作できます。

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。

このブログでは、老後の「ゆとり」を生む資金作りのノウハウを配信しています。
今だけ無料で『資金づくりの種類や手法をわかりやすくまとめたレポート』をお渡し、無料で受け取りたい！ということであれば、今すぐ「りんごのメルマガ」にご登録ください。
登録後、特典の受け取り方法をご案内するメールをお送りいたします。
＊特典を受け取った後にメルマガを解除いただいても構いません。
＊解除に対しての手数料もかかりません。

ただ、メールを読み続けていただくと、シニアライフに嬉しい「お小遣い」を獲得できるノウハウを紹介。無理なくコツコツと老後の資金を増やしていくためのお得な情報をお届けします。

SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ﾉﾞ
↓↓↓↓↓↓↓↓↓↓ ＊クリックだけで登録はされません、表示された案内ページ内の申込フォームからご登録ください。

よろしければ、この記事やブログに関する　感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です（^^）
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ

お願い記事内の不具合や間違い等をお知らせください。 （キャプチャーの違い、古くなった情報、誤字脱字等些細なことでもかまいません）
↓↓↓↓↓↓↓↓
＊お知らせいただいた方にはりんごからささやかなお礼を送らせていただきます。