2019年12月13日TwitterFacebookGoogle+LinkedInPocketWebアクセシビリティの対策のなかで一番に取り組みたいのが「入力フォーム」です。フォームがわかりやすく操作しやすいことは登録&成約に直結します。第一はブログに設置されている「お問い合わせフォーム」「メルマガ登録フォーム」や「購入フォーム」に容易にたどり着けること!(これ案外盲点です)、そして勿論のことストレスなくフォームへの入力ができること、もしエラーや不備が生じた場合はその箇所や対処方法がわかりやすく示されること。これらはアクセシビリティの観点からだけではなく、マーケティングの面からでもとても重要です。なんのためにブログを運営しているのかを考えたときに、「フォーム」に対する対策が疎かであれば、その他の努力が報われません。この記事では、フォーム設置について取り組んでほしいことを具体例をあげて紹介しています。システムの面や技術的なことで難しいこともあるかもしれませんが、できる範囲で工夫してストレス(障害)の少ないフォーム作りを目指してください。大切なのは「ユーザー目線」です、作り手側では案外気づかない落とし穴がわりとあります、可能であれば身近な高齢者やあまりパソコンやスマフォに慣れていない方に一度操作していただくのがお勧めです(^^)9.フォーム・コントロールのラベルをマークアップする10.エラーメッセージではエラー箇所と修正方法を明示する(アクセシビリティを確保するための基本項目)label要素を使用して入力項目に対するラベルをつけましょう。それぞれの項目には何を入力したらいいか分かりやすい説明をつけ,エラーメッセージも理解しやすくしましょう。何らかの形で提示されている情報、構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。8341-3:2016達成基準」でも色々な箇所で取り上げられています。8341-3:2016」を参考にしながらお勧めの対策が以下です。■label要素を使用して、入力項目に対する「ラベル=項目名や項目の説明」をつける■入力に関する重要な情報(必須項目等)は色(赤色にする等)だけで伝えず、必ず言葉(必須等)で記載する■入力形式について、注意点や例(半角英数、030-2121-3333等)が示されている■エラー時は、その箇所と修正方法がわかりやすく示される■カーソルの移動や現在位置をわかりやすくする■操作が、キーボードだけでできるようにする(マウスをつかわずTabやEnterで操作できる)それでは、各項目について具体的に解説します。label要素を使用してテキストを設定9.フォーム・コントロールのラベルをマークアップするこれは、「フォーム(=フォームコントロール)」に記載されている「項目名」をHTMLの構文で書く場合にlabel要素を用いて記載するということです。具体的にいうと、まず以下のように入力項目に対して、入力項目を示すラベル(テキスト)がある場合、そのラベル(テキスト)が、HTMLのlabel要素を用いて設定がしてあるかということです。多くの場合に、フォームを入力するための項目説明がテキストとしてフォームのすぐ近くにあります。人は見た目でそのテキストがフォームのラベル(項目名)であることがわかりますが、ブラウザやスクリーンリーダーなどの機械がそれを理解できるようにするために、HTMLのWebページではlabel要素を用いてマークアップ(記載)します。これによって、スクリーンリーダーではフォームを読み上げるときにラベルとなるテキストを一緒に読み上げることができるほか、ラジオボタンやチェックボックスなどはラベルとなるテキストをクリックして選択することができるようになるため、細かいチェックボックスの中をクリックすることに比べてマウスで操作が行いやすくなります。フォーム・コントロール=(フォーム)には次のようなものがあります。実際の設定方法Wordprssでは実際にHTMLの構文を操作する機会は少なく、馴染みのない内容かもしれません。7」は基本的にlabel要素を使ってマークアップされるようになっているため、そのまま利用して大丈夫です(選択するフォームによってはデフォルトでlabel要素にならないものもあります)。7]入力に関する情報は色だけで伝えず言葉で記載する以下のように必須情報が色でしか判別できない場合、色弱や色盲の人、またスクリーンリーダーでの読み上げ時には必須項目が判別できません。一般の方にわかりやすくするために色を変えることも大切ですが併せて色が判別できなくても情報が伝わるようテキストで情報を記載しましょう。よっては読上げられないことがあり、またデフォルトの文字サイズよりも小さいサイズで表示されるため、弱視の利用者にとっては見づらいかもしれません。使用するときは、アスタリスクが用いられていることをテキストで注記したり、表示されるアスタリスクの文字サイズを大きくするなど配慮しましょう。入力例が示されているフォーム欄の中に実際の入力例があると、わかりやすいです。郵便番号や電話番号でハイフンの要不要や、生年月日など日付の入力方法を示すには文字だけの説明よりも伝わりやすいです。入力に対する注意事項が記載されていればなお親切です。エラーはその箇所と修正方法が示される10.エラーメッセージではエラー箇所と修正方法を明示する入力フォームはエラーとなったとき、入力間違いの箇所と修正方法がわかりやすく表示される。入力がエラーになったときの画面で、間違えている箇所が色が変わって表示されたり、修正方法が明確(具体的)に示されることが必要です。カーソルの移動や位置をわかりやすくする入力済みのフィールドは背景色が変わって入力完了が認識できたり、入力中のフィールドが少し明るくなったりしてカーソルや文字が見やすくなったり、ちょっとした工夫で入力忘れなどのエラーも防げます。フォームにこのような機能を持たせるには、独自でCSSやスクリプト(プログラム)を設定する必要がありますが、有料のサービスやテーマを利用することによって簡単な操作で実装することができます。購入フォームや申し込みフォームを設置して収益をあげることが目的のサイトであればある程度の投資をしてでも取り組むべき価値があるのではないでしょうか。日付入力支援:月日をカレンダーから選択するこの他にも、入力を楽にしたり、入力ミスを未然に防いだりする機能はたくさんあります。操作が、キーボードだけでできるようにするサイト全体的にキーボードのみで利用できる必要がありますが、特にフォーム入力は実際にキーボードだけで操作してみて不具合がないかの確認をしておきましょう。入力フォームなどは一般的に以下のように次のような方法で操作できます。入力フォームをキーボードだけで記入するには■入力欄の移動は[Tab]キーを使うTabキーを使って移動します。Tabキーを一回押すごとにカーソルが移動されます。■前の項目にもどりたいときは[Shift]+[Tab]キーを使うShiftキーを押しながらTabキーを押します。一回押すごとに、一つ前の入力欄にカーソルを戻すことができます。■プルダウンメニューは[Alt]+[↓]キーを使うTabキーを使ってプルダウンメニュー欄に移動し、Altキーと十字キー[↓]を組み合わせることで、メニューから選択することができます。■ラジオボタンはスペースキーを使うラジオボタンはTabキーでラジオボタンに移動し、選択されている状態でスペースキーを押すとチェックが入ります。え方で、「年齢や身体的条件を問わず、誰でもウェブで提供されている情報にアクセスして利用できること」を指します。具体的に言うと・小さい字が見えにくい・薄い(コントラストの低い)字は見えにくい・ボタンや、導線のわかりづらいページは操作ができない・マウスの操作は慣れていないといったごく普通のシニアの方がかかえる障害があっても、見てわかりやすい&操作がしやすいページを用意することです。*このブログではWeb作成上の具体的な内容をひとつづつご紹介しています。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイトこの記事のトラックバックURLプロフィール訪問いただきありがとうございます。2016年4月岡山県真庭市に引っ越し、デザイン系講師のかたわらブログ制作&ネットビジネスを副業として収入を得ています。主な収入源は、HP作成・アフィリエイト・広告収入・法人メルマガの構築代行などです(^^)このブログは、ネットビジネスの始め方を噛み砕いて解説、内容を実践できるメルマガを配信、ゆとりあるシニアライフを目指す方を応援します。パソコンインストラクターや、コールセンターでのサポート経験を活かし、個々のスキルとスピードに合わせたサポートを心がけています。子育てを卒業!自分のために時間とお金を使える!!でも、「夢見るシニアじゃいられない」と感じているそんなあなたに伝えたい情報です。「ブログやアフィリエイトって、聞いたことあるけど若者(わかもの)や強者(つわもの)しか手を出してはいけない気がして」と思っていませんか?「頑張ってみたけど、若い人の勢いについていけず挫折し諦めた」それでも大丈夫!ちょっと勇気を出して扉をあけてみませんか。お手伝いできれば嬉しいです。rin_ngoりんごの田舎暮らしりんごのメインブログ、飾らない創らないをモットーにありのままの暮らしぶりを綴る。した心の持ち方で「ワンランクあっぷする日常」を提案SNSを活用しようFacebookやTwitterなど代表的な「SNS」の登録方法から活用ノウハウまでわかりやすく紹介しています。一緒にオリジナルなサイトを作成していきます。実際の作業がギュッと1つにまとめられています。ブログ初心者が「楽しんで稼ぎ続けられる」、そんな資産になるブログ作り方の教科書です。「アフィリエイト」の種類や仕組みを噛み砕いて解説、実践方法をやさしく案内しています。さんエンドウさま、コメントありがとうございます。お問い合わせの件、YahooIDはパソコンに依存しません。さんYahooIDを他のパソコンと共有するにはどうすればよいでしょうか。さんりんごさまお世話になっております。スマホの設定でアカウント画面まで表示され次え、が出てこなかった。アカウントと作成方法について[...りんごの一歩づつサポート「ブログ&メルマガを利用したネットビジネス」に取り組むことで「ワンランクアップした毎日」を目指す方を応援します(*^▽^*)ネットビジネス入門無料メルマガ人と人が繋がる暖かいコミュニケーションがテーマのネットビジネスです。この機会に触れてみてください。