Webアクセシビリティ：マウスを使わない、キーボードだけで操作ができるWebページ

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

Webアクセシビリティの課題では、「キーボードだけで操作ができる」ことが求められます。この記事ではキーボードだけで操作ができるWebベージにするために注意すべきことを、具体例をあげて解りやすく解説しています。
　マウスが利用できない人（視覚障害でスクリーンリーダーを使う人、身体障害でマウスがもてない人、高齢でマウスがうまく使えない人など）は思いの他大勢います。またマウスが使えてもキーボードとマウスを持ち帰る時間がもったいない（効率化）ためにキーボードだけで操作する人もいます。
　対策は難しそうに思えますが、特別にすることは何もありません。当たり前にWebページを作りさえすれば大丈夫です。使うべき構文（HTMLのタグ）を使用することで、ブラウザやパソコンのOSがそれを読み取って対応してくれます。気をつけるのはその機能を邪魔するような構文（HTML）を作らないことです。

キーボードでの操作

リンクを開いてジャンプできたり、フォームの入力（プルダウンの選択やラジオボタンやチェックボタンの操作）ができたり、ボタンが押せたり、これらの操作が全てキーボードで実行できる必要があります。
　何か特別な設定をする必要はありません、標準で指定されているHTMLの構文を用いてマークアップ（記載）すれば、パソコンのOSやブラウザの機能がキーボード操作をサポートしているので、そのままでキーボード操作が可能です。

標準で指定されている主なHTMLの構文には以下のようなものがあります。Wordpressでの設定と併せて紹介します。

リンクの設定

■href属性：<a>要素

リンクの設定は「a href」を使用します

文字へのリンク

画像へのリンク

①リンクを設定する範囲を選択する

②リンク先のURLをコピーする

③リンクマークをクリックして、出てきたウィンドウにコピーしたURLを貼り付ける。

④エンターキーを押すか、適用の矢印マークをクリックする。

⑤指定した、文字にリンクが設定できたことを確認する。

⑥リンクウィンドウの右端にあるオプションボタンをクリックすると「リンクを新しいタブで開く」の設定ウィンドウが出てくる

⑦新しいタブで開くをONにする。（そのままのウィンドウで開くときはOFFのまま）

旧エディター（クラッシックエディター）での設定方法

■文字リンク
リンクを設定する文字をドラッグします。
リンクボタンをクリックします。

リンク設定のバーが表示されます、リンク先のURLを入力し、設定マークをクリックします。

リンク編集の画面が出ます。
[リンクを新しいタブで開く]のチェックを入れます（この設定は任意です、チェクをいれることで、リンク先のウィンドウが別ウィンドウで開きます、チェックがないと同じウィンドウでリンク先のページに移動します。）

[更新]ボタンをクリックします。

選択した文字にリンク設定が完了しました。

■画像のリンク

画像をクリックして選択します。
メニューバーのリンクボタンをクリックします。

リンク設定用のバーが表示されるので、リンク先のURLを入力して、リンク設定ボタンをクリックします。

リンク編集画面が表示されます、[リンクを新しいタブで開く]にチェックをいれます。（同じウィンドウで開く時はチェックは入れません）

[更新]ボタンをクリックします。

＊画像にリンクが貼られると、画像の上にマウスをもっていった時、マウスが手のマークに変わります
＊これはブログ表示した時に確認できます、投稿の編集画面では確認できません。

フォームの設定

■フォーム・コントロール：<input>要素、<select>要素、<textarea>要素

フォームでは以下の要素を使用します。
<input>要素

<select>要素

<textarea>要素

設定方法

WordPressでは、フォームの設定は「Contact Form 7」を利用することで適切なタグが使用されます
＊条件や設定によってはタグの確認が必要です。

[Contact Form 7]の利用方法は以下の記事を参照ください。
↓↓↓↓↓↓↓
■WordPress、フォーム作成プラグインの定番　[Contact Form 7]

ボタンの設定

■ボタン：<button>要素

ボタンの設定は利用するエディターやLPなどの作成支援ソフトなどのマニュアルを参照ください。
＊上記のリンクの項目で紹介したように、ボタンの画像にただリンクを貼るだけでは「a href」での設定になります、「a href」でもキーボードで操作はできますが「送信」や「登録」などのボタンについてはきっちり<button>要素を使用するのがお勧めです。

キーボード操作のショートカット

一般的なキーボードでの操作方法をご紹介します。

ひとこと

ご紹介した内容の他にも、まだまだたくさんあります。まずはメインとなるページやフォームのページでキーボードによる操作を試してください。ちゃんとしたタグが使われていな場合「カーソルがその場所に入らない」「入ったカーソルが実行できない」「カーソルが次の場所に移れない」などの不具合が起きる可能性があります。

ご紹介した内容はおもにマシーン（スクリーンリーダーなど）のために必要な場合が多いですが、マシーン（SEOのクローラーなど）のことばかり意識していると、利用する人の利便性を損なうことになっているかもしれません、評価するのはグーグルでも、SEOのクローラーでもなく「人」です。
　アクセシビリティの基本は「使う人のため」、わかりやすく使いやすく「ユーザー目線」でのサイトづくりが大切です。

りんごからのお知らせ

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

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

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

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

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

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

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