2020年1月14日TwitterFacebookGoogle+LinkedInPocketWebアクセシビリティの課題では、「キーボードだけで操作ができる」ことが求められます。この記事ではキーボードだけで操作ができるWebベージにするために注意すべきことを、具体例をあげて解りやすく解説しています。マウスが利用できない人(視覚障害でスクリーンリーダーを使う人、身体障害でマウスがもてない人、高齢でマウスがうまく使えない人など)は思いの他大勢います。マウスが使えてもキーボードとマウスを持ち帰る時間がもったいない(効率化)ためにキーボードだけで操作する人もいます。対策は難しそうに思えますが、特別にすることは何もありません。当たり前にWebページを作りさえすれば大丈夫です。使うべき構文(HTMLのタグ)を使用することで、ブラウザやパソコンのOSがそれを読み取って対応してくれます。気をつけるのはその機能を邪魔するような構文(HTML)を作らないことです。A)コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボードインタフェースを通じて操作可能である。その根本的な機能が利用者の動作による始点から終点まで続く一連の軌跡に依存して実現されている場合は除く。ひとことキーボードでの操作リンクを開いてジャンプできたり、フォームの入力(プルダウンの選択やラジオボタンやチェックボタンの操作)ができたり、ボタンが押せたり、これらの操作が全てキーボードで実行できる必要があります。何か特別な設定をする必要はありません、標準で指定されているHTMLの構文を用いてマークアップ(記載)すれば、パソコンのOSやブラウザの機能がキーボード操作をサポートしているので、そのままでキーボード操作が可能です。*取り組むこと(推奨)すべての操作をキーボードで行えるようにする。キーボードのTABキーとEnterキーを使って、ホームページ内のリンクを利用できること、入力フォームなどを利用できることを確認する。キーボードのTABキーを使ってホームページ内のリンクやフォームの選択候補(フォーカス)を移動する場合に、情報の意味のつながりや関係性に即した順序で移動するように、リンクやフォームを配置する。キーボード・フォーカスがあたっている(選択されて操作ができる状態になっている)ことが視覚的に確認できるようにする。*実施にはHTMLだけでなくCSSやスクリプトの設定が必要な場合もあります標準で指定されている主なHTMLの構文には以下のようなものがあります。Wordpressでの設定と併せて紹介します。alt=”トップページのタイトル“></a>エディターGutenbergでの設定方法1リンクを設定する範囲を選択する2リンク先のURLをコピーする3リンクマークをクリックして、出てきたウィンドウにコピーしたURLを貼り付ける。4エンターキーを押すか、適用の矢印マークをクリックする。5指定した、文字にリンクが設定できたことを確認する。6リンクウィンドウの右端にあるオプションボタンをクリックすると「リンクを新しいタブで開く」の設定ウィンドウが出てくる7新しいタブで開くをONにする。■文字リンクリンクを設定する文字をドラッグします。リンクボタンをクリックします。リンク設定のバーが表示されます、リンク先のURLを入力し、設定マークをクリックします。リンク編集の画面が出ます。[リンクを新しいタブで開く]のチェックを入れます(この設定は任意です、チェクをいれることで、リンク先のウィンドウが別ウィンドウで開きます、チェックがないと同じウィンドウでリンク先のページに移動します。)[更新]ボタンをクリックします。選択した文字にリンク設定が完了しました。■画像のリンク画像をクリックして選択します。メニューバーのリンクボタンをクリックします。リンク設定用のバーが表示されるので、リンク先のURLを入力して、リンク設定ボタンをクリックします。リンク編集画面が表示されます、[リンクを新しいタブで開く]にチェックをいれます。(同じウィンドウで開く時はチェックは入れません)[更新]ボタンをクリックします。*画像にリンクが貼られると、画像の上にマウスをもっていった時、マウスが手のマークに変わります*これはブログ表示した時に確認できます、投稿の編集画面では確認できません。■フォーム・コントロール:<input>要素、<select>要素、<textarea>要素フォームでは以下の要素を使用します。7」を利用することで適切なタグが使用されます*条件や設定によってはタグの確認が必要です。type=”button”>登録</button>ボタンの設定は利用するエディターやLPなどの作成支援ソフトなどのマニュアルを参照ください。href」でもキーボードで操作はできますが「送信」や「登録」などのボタンについてはきっちり<button>要素を使用するのがお勧めです。キーボード操作のショートカット一般的なキーボードでの操作方法をご紹介します。ショートカットを紹介します。command+0ひとことご紹介した内容の他にも、まだまだたくさんあります。メインとなるページやフォームのページでキーボードによる操作を試してください。したタグが使われていな場合「カーソルがその場所に入らない」「入ったカーソルが実行できない」「カーソルが次の場所に移れない」などの不具合が起きる可能性があります。ご紹介した内容はおもにマシーン(スクリーンリーダーなど)のために必要な場合が多いですが、マシーン(SEOのクローラーなど)のことばかり意識していると、利用する人の利便性を損なうことになっているかもしれません、評価するのはグーグルでも、SEOのクローラーでもなく「人」です。アクセシビリティの基本は「使う人のため」、わかりやすく使いやすく「ユーザー目線」でのサイトづくりが大切です。え方で、「年齢や身体的条件を問わず、誰でもウェブで提供されている情報にアクセスして利用できること」を指します。具体的に言うと・小さい字が見えにくい・薄い(コントラストの低い)字は見えにくい・ボタンや、導線のわかりづらいページは操作ができない・マウスの操作は慣れていないといったごく普通のシニアの方がかかえる障害があっても、見てわかりやすい&操作がしやすいページを用意することです。*このブログではWeb作成上の具体的な内容をひとつづつご紹介しています。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイトこの記事のトラックバックURLプロフィール訪問いただきありがとうございます。2016年4月岡山県真庭市に引っ越し、デザイン系講師のかたわらブログ制作&ネットビジネスを副業として収入を得ています。主な収入源は、HP作成・アフィリエイト・広告収入・法人メルマガの構築代行などです(^^)このブログは、ネットビジネスの始め方を噛み砕いて解説、内容を実践できるメルマガを配信、ゆとりあるシニアライフを目指す方を応援します。パソコンインストラクターや、コールセンターでのサポート経験を活かし、個々のスキルとスピードに合わせたサポートを心がけています。子育てを卒業!自分のために時間とお金を使える!!でも、「夢見るシニアじゃいられない」と感じているそんなあなたに伝えたい情報です。「ブログやアフィリエイトって、聞いたことあるけど若者(わかもの)や強者(つわもの)しか手を出してはいけない気がして」と思っていませんか?「頑張ってみたけど、若い人の勢いについていけず挫折し諦めた」それでも大丈夫!ちょっと勇気を出して扉をあけてみませんか。お手伝いできれば嬉しいです。rin_ngoりんごの田舎暮らしりんごのメインブログ、飾らない創らないをモットーにありのままの暮らしぶりを綴る。した心の持ち方で「ワンランクあっぷする日常」を提案SNSを活用しようFacebookやTwitterなど代表的な「SNS」の登録方法から活用ノウハウまでわかりやすく紹介しています。一緒にオリジナルなサイトを作成していきます。実際の作業がギュッと1つにまとめられています。ブログ初心者が「楽しんで稼ぎ続けられる」、そんな資産になるブログ作り方の教科書です。「アフィリエイト」の種類や仕組みを噛み砕いて解説、実践方法をやさしく案内しています。さんエンドウさま、コメントありがとうございます。お問い合わせの件、YahooIDはパソコンに依存しません。さんYahooIDを他のパソコンと共有するにはどうすればよいでしょうか。さんりんごさまお世話になっております。スマホの設定でアカウント画面まで表示され次え、が出てこなかった。アカウントと作成方法について[...りんごの一歩づつサポート「ブログ&メルマガを利用したネットビジネス」に取り組むことで「ワンランクアップした毎日」を目指す方を応援します(*^▽^*)ネットビジネス入門無料メルマガ人と人が繋がる暖かいコミュニケーションがテーマのネットビジネスです。この機会に触れてみてください。