Webアクセシビリティ:ユーザーに負担をかけないリンク設定とは[初心者・シニア向け]

2019年11月12日

 Webアクセシビリティとは、Web上でのバリアフリーのようなもので、「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できることということを意味します。(情報バリアフリーのサイトより)
 この記事はサイトに設置された「リンク(他のページへのジャンプ)」について、そのわかりやすさと使いやすさのために、必要なことを記載しました。参考になれば幸いです。

*Webアクセシビリティについての詳細は以下のサイトを参照ください
↓↓↓↓↓↓↓
■ウェブアクセシビリティの基本的な考え方(情報バリアフリーのための情報提供サイト)

 2020東京パラリンピックも迫り、アクセシビリティ自体への関心がすこしづつよせられているのも感じます、近年Webアクセシビリティについても、デバイス(パソコンやスマフォ)の機能が充実し、目や耳や身体等の不自由な利用者がより便利にスムーズにWeb情報を利用できるようになりました。ただ機能のみ充実しても、そのサイトを提供するサイトの作成者の意識はまだまだ充分とは言えないのではと感じます。見る側、作る側、どちらにもなり得る個人のブログ運営者等の意識がより一層磨かれることを望みます(^^)

リンクのアクセシビリティとは

リンク機能のアクセシビリティとして重要なのは以下の2つです。

わかりやすさ
 リンクが貼ってあることが一目でよくわかること
 そのリンクをクリックしたらどんなページが開くのかが考えずにわかること

使いやすさ
 リンクをクリック(実行)がストレスなくできること

では、具体的にどのような点に配慮すればいいのかを見ていきます。

 

 

リンクのわかりやすさ

リンクのわかりやすさは、リンクが貼ってあることが一目でわかること
そして、そのリンクをクリックすると何処に行くのかが直感的にわかること

では、そのために必要な(推奨される)設定をご紹介します。是非取り入れてみてください(^^)

アンダーラインをつける

デザイン的には、アンダーラインのない方がすっきりして綺麗ですが、アンダーラインは誰がみても「リンクがある」と一目でわかります。

キャプチャー、リンクのアンダーライン

 

画像の場合はマウスON時に変化する

マウスを画像にONした(重ねた)時、画像が透けたり薄くなったり変化するとリンクが張ってあるとわかりやすいですね。

キャプチャー、マウスON時の画像変化

 

外部リンクとわかるようにする(別ウィンドウで開くことを知らせる)

アイコンを追加することで、外部リンク(別ウィンドウで開く)であることがクリックする前にわかるので、新しいタブやウィンドウで表示されても対処できます。

キャプチャー、外部リンクのアイコン

*設定方法はこちらの記事で詳しく紹介しています
↓↓↓↓↓↓↓
外部リンクにアイコンを表示させて、別ウィンドウ(別タブ)で開くことを知らせる[ Font Awesome 5]とCSSのafter属性で一括設定

 

リンクの使いやすさ(クリックしやすさ)

文字の場合はなるべく長くリンクを貼る

リンクを貼る文字は「こちら」などの短くリンク先の内容がわからない文字より、長くリンク先の内容がわかる文字にします。これはSEOの面でも高評価となります。

キャプチャー、リンクの文字の長さ

ボタンはクリックしやすい形と大きさを

ボタンはクリックするのにストレスのない大きさにし、またボタンであることが一目でわかる形状にします。よくあるのが最近流行りのフラットな形状のボタンです。特に高齢者などにはボタンと認識されにくく、気づかれにくいので、少し立体的に見えるボタンを使用しましょう。また、記載する文字はなるべく日本語にします。

画像、ボタンの表示

 

エリア全体にリンクを貼る(リンクの領域を広くする)

領域の一部分(文字部分だけ)より、領域全体にリンクを貼るようにします。特に画像がある場合は画像ごと含むようにリンクを貼りましょう。

キャプチャー、リンク領域

 

リンク領域はクリックするまで動かない

以下のようなプルダウンメニューで、マウスを動かすとメニューが消えたり、動いたりするスクリプト(機能)が組み込まれているものがあります。デザイン的にはかっこ良いいですが、クリックしたい対象が動くとクリックが難しく、特に高齢者では謝って別のリンクをクリックしてしまう危険性が高まります。一度表示されたメニューは固定されクリックされるまで動かさないことが望ましいです。

キャプチャー、プルダウンメニュー

 

ひとこと

どうですか?そんなに難しいことでも、大変なことでもありませんね。「なんだそんなことか!」と思ったのではないでしょうか。でも実際にちゃんと配慮されているサイトは思いの外少ないのです。

 シニア向けのサイトなのに「なんだこの小さいボタンは」「文字薄くて読めない!」と叫びたくなることはしばしばです。また、上記の件ではないですが[設定]のすぐ隣に[削除]とかのボタンがあるとドキッとしますよね(思わず手が滑ったらどうするんだ!)。

 作った側は、いつも使っているので案外気づかないのです。機会があればどなたかに見てもらう、フォームなどが設置されているのであれば入力してみてもらうことをおすすめします(^^)。

まずは、作り手の意識が使う人目線に向けられることを願います。

 

Webアクセシビリティ対策はできるところから今すぐ始めましょう

このブログでは、具体的なWebアクセシビリティの取り組みについてわかりやすく解説しています。
↓↓↓↓↓↓↓

最後にもう一度、Web(サイト)でのアクセシビリティとはなんなのか?

一般的な認識は「視覚障害者向けの音声読み上げソフトに対応したサイト作成」といったイメージが強いかと思いますが、どちらかと言うとバリアフリーやユニバーサルデザインと同じような考イラスト、車椅子と階段え方で、「年齢や身体的条件を問わず、誰でもウェブで提供されている情報にアクセスして利用できることを指します。

もっと具体的に言うと
・小さい字が見えにくい
・薄い(コントラストの低い)字は見えにくい
・ボタンや、導線のわかりづらいページは操作ができない
・マウスの操作は慣れていない
といったごく普通のシニアの方が感じる不自由があっても、
見てわかりやすい&操作がしやすいページを用意することです。

*このブログではWeb作成上の具体的な内容をひとつづつご紹介しています。この機会に取り組みませんか!

イラスト、車椅子とスロープ

↓↓↓↓↓↓↓
情報のバリアフリー化のための記事一覧

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市で非常勤のデザイン講師をしながら、ブログ&メルマガを利用したネットビジネスに奮闘中です。

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

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

イラスト、りんごを持ったおじさんとおばさん

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

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ノ゙
↓↓↓↓↓↓↓↓↓↓ バナー、りんごメルマガ登録用 *クリックだけで登録はされません、表示された案内ページ内の申込フォームからご登録ください。

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