心地いいホームページとは？アクセシビリティを高めて離脱率を低くするための5つのポイント

インターネットの世界では、日々、数え切れないほどたくさんのコンテンツが生まれています。
しかし、Webの世界が複雑になればなるほど情報量も多くなり、ある人には使い勝手がいいホームページでも、別の人にはそうではないことも出てきます。

今回は、誰もが自分の欲しい情報を得るためにWebデザイナーが考えるべきキーワード「アクセシビリティ」について解説していきます。

「サラッとでも意識していればいいかな」という程度でアクセシビリティについて捕らえている人もいるかもしれませんが、UXを考える上でとても重要なキーワードです。今一度、この記事を読んで、改めてその大切さを感じてみてはいかがでしょうか。それでは早速確認していきましょう。

アクセシビリティとは何か？

アクセシビリティに関する5つのアイデアを紹介する前に、まずは「アクセシビリティとは何か」について説明します。

LinkedInのUI/UXディレクターでアクセシビリティについて詳しいJennison Asuncion氏によれば、ユーザビリティの定義は次のようになります。

「アクセシビリティとは、障碍(しょうがい)を持った人も含めて、誰もが触れるUIをデザインしたり開発したりすること」

時としてアクセシビリティは障碍者にフォーカスが当てられることもありますが、本当にフォーカスを当てるべきは「誰もが」という部分です。つまり、教育を受けてきたかどうかや、年齢や性別などあらゆるものとは関係なく、ホームページに触れる全員が使いやすいホームページにするということを考えなければなりません。

アクセシビリティを考える上で知っておきたい5つのアイデア

それでは、実際にアクセシビリティに関する5つのアイデアを見ていきましょう。

1. ボタンやリンクをわかりやすく意味のあるものにする

わりとよくある話ですが、コンテンツの概要が述べられた後に、「もっと学ぶ」「もっと読む」「もっと見る」があらゆる箇所に点在しているWebサイトを見たことはないでしょうか。
もしかしたら、こういうリンクやボタンに出会う度にげんなりしてしまう人もいるかもしれません。

音声読み上げ機能を使っているユーザーにとっては、ページ遷移をそれほど意識せずにページ移動が行える一方で、見えない分コンテンツを見逃してしまっているのではないかという恐怖もあります。視覚障がいを持つユーザーが音声読み上げで「もっと学ぶ」という言葉に出会った時に、果たして「もっと」とはどういうことなのかを理解するのは簡単ではないかもしれません。

同様に、「リンク先はこちら」「詳細はこちらのページ」という形でリンクを貼るのもアクセシビリティを低下させます。また、リンク先のURLをそのまま貼る行為（例：https://ferret-plus.com/）も、なぜリンクがそこにあるのかが文脈上明確でなければ、できるだけ避けるべきです。音声読み上げでは、短くても長くても、そのままURLが読み上げられてしまうからです。

一方で、ユーザビリティが確保されたホームページを考えてみましょう。リンク先のテキストは、はっきりと具体的な言葉で、リンクを押せばどこに飛ぶのかがわかる言葉を選びましょう。また、リンク先がPDFやビデオである場合は、そのことを「リンク内で」明示しましょう(リンク内であるべき理由は、音声読み上げ機能を使った時にも音声でそのことが伝わるからです)。

2. 画像に明確で便利なalt属性をつける

Alt属性についてもあまり意識をしていないかもしれませんが、ホームページ上で音声読み上げ機能を使うユーザーにとっては重要な役割を担います。
もちろんAlt属性はページを表示しているだけでは見えません。

しかし、視覚に障がいを持ったユーザーにとって、Alt属性がなければ、その画像やインフォグラフィックなどの内容を理解することは難しくなります。
一方で、Alt属性を付けることで、円グラフやヒーロー画像、インフォグラフィックなどのイメージが伝える情報を誰もが逃さないように工夫することができます。

最近は減りましたが、ブラックハットSEOと呼ばれる、HTMLタグの改変で検索順位を上げていたかつての時代では、Alt属性はページのキーワードをいくつも羅列するだけのために使われていました。もちろん音声読み上げ機能を使っているユーザーにとっては大迷惑でした。

Alt属性を誤った形で使ったせいで、検索エンジンはそうしたページの検索順位を落として、中身のある情報を提供するホームページを優先的に検索結果の上位に上げました。

リンクテキストと同様に、Alt属性も簡潔で、十分に説明していて、自然な言葉で表現することが大切です。

画像にスマートフォンの利用状況を示した棒グラフのような便利なデータがあるのであれば、Alt属性にもできるだけそのグラフからわかるものを表記しましょう。

例
「スマートフォンユーザーの93％は同じホームページを複数のデバイスで見ている傾向があります」

以前よりも画像をふんだんに取り入れたホームページが多くなっています。ぜひもう一度Alt属性を見直してみてください。