みんなのICTホーム

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

2011年12月16日:ウェブアクセシビリティ:川路いず美

エレベーターの操作パネル

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

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

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

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

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

ボタンに数字が無いエレベータの操作パネル

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

参考になるガイドライン(WCAG2.0)

達成基準1.1.1 非テキストコンテンツ:レべルA(外部サイト)
利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストを提供する。

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

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

ボタンはすべて「押す」と書かれており、その横に移動フロアの説明があるエレベーターの操作パネル。

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

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

参考になるガイドライン(WCAG2.0)

達成基準2.4.4 文脈におけるリンクの目的:レベルA(外部サイト)
それぞれのリンクの目的が、リンクのテキストだけから、又はプログラムが解釈可能なリンクの文脈をリンクのテキストとあわせたものから解釈できる。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。
達成基準2.4.9 リンクの目的:レベルAAA(外部サイト)
それぞれのリンクの目的がリンクのテキストだけから特定できるメカニズムが利用可能である。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。

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

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

同じ行先のボタンが複数あり、それぞれ別のラベルがついているエレベーターの操作パネル

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

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

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

参考になるガイドラインおよび実装方法(WCAG2.0)

達成基準3.2.4 一貫した識別性:レべルAA(外部サイト)
ウェブページ一式の中で同じ機能性を有するコンポーネントは、一貫して識別できる。
実装方法H2(外部サイト)
隣り合った画像とテキストリンクを同じリンクの中に入れる

まとめ

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

このページの先頭へ