エレベーターから学ぶ「使えるリンク」「使えないリンク」

最近「リンク」や「リンクラベル」の重要性についての記事をよく見かけるようになりました。リンクはウェブサイト閲覧・操作の基本中の基本にもかかわらず、未だにこのような記事が書かれ続けているということは、残念ながら適切なリンクがつけられているサイトの普及が進んでいないことにあると思います。

ユーザーにとって、リンクはそのサイトの「案内人」です。
訪れたユーザーをスムーズに目的地に案内するために、シンプルで適切な誘導が必要になります。

私たちの生活の中にはユーザーをシンプルで適切に導くリンクのヒントがたくさんあります。今回は、身近な「エレベーターの操作パネル」を例にして、ウェブサイトのリンクのアクセシビリティについて説明します。

リンク画像に代替テキストがない場合

全く行先の情報が分からないため、ボタンがあっても目的の場所に移動することができません。

画像の代替テキストをつけるのはアクセシビリティの基本ですが、特にリンク画像の場合音声読み上げユーザーや画像がオフのユーザーは、リンク先の情報をまったく得ることができないため立ち往生してしまいます。

違うリンク先のリンクラベルがすべて同じ場合

行先が違うのに操作ボタンのラベルがすべて同じパターンです。また、操作ボタンの横に目的の行先が記載されていますが、直観的に操作ができません。

リンク先が違うのに、「詳しくはこちら」「ここをクリック」などの同じリンクラベルを使用している場合、前後の文脈から移動先の情報を読み取ることができますが、リンクラベル単体としては明確にリンク先の情報を表しているとは言えません。

音声読み上げソフトのユーザーが、タブキーでリンク要素だけ読み上げる操作をする場合、「押す」「押す」「押す」と読み上げ、効率的な情報取得がしにくくなります。

リンク先は同じだが、リンクラベルが違うリンクが複数ある場合

同じ行先なのに、ラベルの違うボタンが複数あり、本当に同じ行先か判断しにくい状態です。

リンクをクリックするきっかけをたくさん用意したほうが、リンクできるきっかけ・領域がひろがりユーザーに親切という理由で、記事の見出しやサムネイル写真、概要テキストなどに、それぞれリンクを設置していることがあります。

しかし、サイト内で統一したリンクラベルでないと、ユーザーが一体同じページに移動するのかどうか、不安が生じてしまう可能性があります。

同じリンク先の場合は、リンクラベルを統一し、特にリンクが隣接している場合は、ひとつにまとめることで、ユーザーの混乱を避けることが大切です。

まとめ

制作者は、プロジェクトにかかわった時点で頭の中にサイト構造がはいってしまい、ユーザーの立場にたってサイトを「案内」する客観的な判断が難しくなります。
ウェブサイト制作者という立場を離れて、いちユーザーとしてウェブサイト以外のナビゲーションを観察してみると、ウェブサイト制作にも役に立つヒントがたくさんあふれています。実際の生活の中ではありえないようなナビゲートを、ウェブサイト制作では深く考えずに実装してしまっていることに気が付くかもしれません。