BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

新しいウィンドウを開くことについて

リンクの中には、現在のページとは異なる新しいウィンドウ(別窓)を開くものがあります。ところが、この役割を担っているtarget属性はHTML4.01において非推奨とされ、XHTML1.1で正式に廃止されました(*1)。ここでは、target属性が抱える問題について考えてみたいと思います。

新しいウィンドウを開く指定は、特にリンク集において利用されるケースが多く見受けられます。これにより、自分のサイトと他のサイトを明確に区別することができます。

しかし、ブラウザの「戻る」を多用するユーザーにとっては不都合が生じます。特に、新しいウィンドウを開く仕組みを理解していないユーザーは迷子になってしまうことが考えられます。また、古いパソコン環境においては余計なリソースを消費させられ、フリーズしてしまう恐れがあります。

target属性には、次のような問題点があります。

同じウィンドウで開くことができない(*2)
多くの場合、target属性を指定されたリンクを同じウィンドウで開くようにユーザー側で自由に選択することができません。
通常のリンクと区別できない
target属性を指定しても、リンクには何も変化がありません。訪問者には違いがわからず、実際にクリックしてみないとわからないという問題があります。

target属性が指定されているリンクをユーザーが同じウィンドウで開くことができない一方、通常のリンクをユーザーが新しいウィンドウで開くことは容易です(*3)。新しいウィンドウを開くことを好むユーザーも居れば好まないユーザーも居るので、target属性の指定は最低限に留めておくのが無難であると思われます。

target属性を指定する際には、「新しいウィンドウを開く」ことを訪問者にわかりやすく伝えると良いでしょう。「通常のリンク」と「新しいウィンドウで開くリンク」の両方を用意して、ユーザー側で自由に選択できるようにするのも効果的です。

【注釈】
スポンサーサイト

このページの一番上へ

訪問者を迷子にさせないために

インターネットが広く家庭にも普及し、何かわからないことを調べるのに検索サイトを活用することは珍しくなくなりました。ところが、たどり着いたサイトで迷子になってしまうことがあります。ここでは、訪問者を目的地までスムーズに誘導するための要点を解説します。

サイト名を記述

訪問者がどこのサイトに居るのか把握できるように、全てのページにサイト名を記述しておくことを推奨します。一番目につきやすい位置に配置して、トップページへのリンクを指定しておくと親切です。title要素に記述するのも良いでしょう。

<h1><a href="./">サイト名</a></h1>
<title>ページのタイトル - サイト名</title>

コンテンツを明確に

初めての訪問者には、どのリンクをクリックすれば目的のページにたどり着けるのかわかりづらいものです。主なコンテンツへのリンクはわかりやすい位置に指定しましょう。検索サイトからの訪問者にも伝わるように、主なコンテンツへのリンクは全てのページに用意しておくと良いでしょう。

リンクの法則

一般的な視覚系ブラウザでは未訪問リンクは青色、訪問済みリンクは紫色に指定されており、これらはむやみに変更しない方が無難です(*1)
未訪問リンクと訪問済みリンクの色を同じ色に指定すると、初めての訪問者にはリンク先が未訪問なのか訪問済みなのか区別することができなくなってしまいます。また、リンクの下線を消してしまうとリンクを視認することが困難になってしまいます。このような指定をすると迷子になりやすくなるのでオススメしません。

リンクの方法

リンクにはテキスト以外にも様々な種類がありますが、これらは多くの問題点を抱えています。

画像によるリンクは見た目華やかですが、枠線があると見た目が損なわれ、枠線を消すと未訪問と訪問済みの区別がつかなくなります。また、画像を表示できない環境への配慮としてalt属性による代替テキストを指定する必要があります。

リンクにプルダウンを用いると数多くのリンクをコンパクトにまとめることができますが、訪問者がJavaScriptを許可していない場合や非対応のブラウザではリンク先に移動することができません。

Flashによるリンクは見た目華やかですが、非対応のブラウザではリンク先に移動することができません。

あらゆる環境下において問題なく機能するのはテキストリンクだけです(*2)。プルダウンやFlashを用いる場合には、同時にテキストリンクを用意しておきましょう。

リンク文字を適切に

「戻る」というリンクを時々見かけますが、このリンクはオススメできません。どのページに戻るのか正確に伝わらない恐れがあるからです。特に、検索サイトからの訪問者には全く意味が伝わりません。

同様に「こちら」というリンクも好ましくありません。例えば、音声ブラウザの利用者は他のページに移動する際リンクを順に読み上げる機能を利用します。前後のテキストがなくてもリンク先の内容がわかるように記述しましょう。

しかし、リンク集のように他サイトへのリンクを指定する場合には、通常リンク先のサイト名のみにリンクを指定します。このような場合、前後のテキストを読まなくてもリンク先の内容が伝わるようtitle属性を指定すると良いでしょう。

<a href="http://www.yahoo.co.jp/" title="大手検索サイト">Yahoo! JAPAN</a>

これは音声ブラウザに限らず、一般的な視覚系ブラウザにおいてもサポートされます。多くの場合、リンクにカーソルを合わせるとtitle属性の内容をツールチップで表示します。

ナビゲーションの設置

ナビゲーションを設置することで、訪問者が迷子になりにくくなるでしょう。階層構造をわかりやすく伝えることが必要となります。現在地を明確にするため、現在地を示すテキストには通常リンクを指定しません。

リストを用いたナビゲーションの一例を示します。現在地を「項目2-2」(content2/chapter2.html)としております。

<ul>
<li><a href="../">ホーム</a></li>
<li>項目1 <ul>
<li><a href="../content1/">目次1</a></li>
<li><a href="../content1/chapter1.html">項目1-1</a></li>
<li><a href="../content1/chapter2.html">項目1-2</a></li>
<li><a href="../content1/chapter3.html">項目1-3</a></li>
</ul>
</li>
<li>項目2 <ul>
<li><a href="../content2/">目次2</a></li>
<li><a href="../content2/chapter1.html">項目2-1</a></li>
<li>項目2-2</li>
<li><a href="../content2/chapter3.html">項目2-3</a></li>
</ul>
</li>
</ul>

リストを用いると階層構造をわかりやすく示すことができますが、ナビゲーションを配置する領域の確保が難しく、代わりにコンパクトなナビゲーションとしてパンくずリスト(*3)がよく使われています。区切り記号としては「>」(*4)が一般的のようです。

<p>
<a href="../">ホーム</a> &gt; <a href="./">項目2</a> &gt; 項目2-2
</p>

link要素の導入

広く普及しているInternet Explorerではサポートされていないのですが、link要素(*5)を用いたナビゲーションは効果的です。利用環境に依存しているため、サイト毎のバラツキがないので訪問者を迷わせません。

リンク形式には多くの種類がありますが、ここでは一部を抜粋して解説します。

トップページへのリンク
<link rel="start" href="トップページのURL" />
目次ページへのリンク
<link rel="contents" href="目次ページのURL" />
前のページへのリンク
<link rel="prev" href="前のページのURL" />
次のページへのリンク
<link rel="next" href="次のページのURL" />

Webサイト最大の利点は、リンクひとつであらゆる情報にアクセス可能なことにあります。リンクを適切に指定することで、訪問者が迷うことなく欲しい情報にアクセスできるようになります。

【注釈】

このページの一番上へ

アクセスキーの設定

一般的な視覚系ブラウザにおいてリンクをたどるには、マウスでカーソルを移動しリンクに合わせてクリックします。しかし、手が不自由でマウスを上手く扱えない訪問者や、マウスが故障してしまった訪問者はどのようにリンクをたどるのでしょう。

Windows版Internet ExplorerではキーボードのTabキーを押すと、リンク及びフォーム部品に順番にフォーカスが当たります。フォーカスが当たった状態でEnterキーを押すと、リンク先のページへ移動したりフォームを送信したりすることができます。ブラウザによってはフォーム部品にのみフォーカスが当たり、リンクにフォーカスを当てるキーを別に割り当てている場合があります。詳しくはブラウザのヘルプをご覧ください。

ところが1ページあたりのリンクやフォーム部品が多いと、目的の要素にフォーカスが当たるまでに何回もTabキーを繰り返し押す必要があります。アクセスキーを指定すると、1回の操作で目的の要素にたどりつくことができます。

アクセスキーを指定できる要素は次の通りです。

a , area , button , input , label , legend , textarea

アクセスキーには任意のショートカットキーを割り当てることができます。一般的にはアルファベット及び数字を用います。

<a href="./" accesskey="0">HOME[0]</a>
<input type="radio" name="man" accesskey="s" />男性

とても使い勝手の良さそうなアクセスキーですが、実は多くの問題を抱えています。

  1. アクセスキーを呼び出す方法は利用環境により異なり、一般にWindows環境ではAltキーを押しながら、Macintosh環境ではControlキーを押しながらショートカットキーを押します。携帯電話環境ではショートカットキーのみを押します。但し、ブラウザによっては呼び出し方が異なるものや、アクセスキーに対応していないものがあります。詳しくはブラウザのヘルプをご覧ください。
  2. 利用環境によってはブラウザのショートカットキー(*1)と重複してしまうことが考えられます。この場合ブラウザのショートカットよりもアクセスキーが優先され、逆に訪問者に不便を強いる恐れがあります。
  3. 利用環境によってはフォーカスが当たるだけでなく、即リンク先へ移動するものがあります。また、フォームの送信ボタンやリセットボタンを即実行するものがあります。この場合訪問者が誤ってリンク先へ移動してしまったり、誤ってフォームを送信またはリセットしてしまう可能性が高まってしまいます。
  4. アクセスキーの指定方法はWebサイト制作者により異なります。このためサイトごとにばらつきがあり、訪問者はサイト別にアクセスキーの指定を記憶する必要があります。

アクセスキーが広く普及していないのは、このような問題が大いに影響しているものと思われます。普及が進んでいないことから、Webサイト制作者はアクセスキーの割り当てを訪問者にわかりやすく伝える必要があります。また、利用環境別に呼び出し方を解説し、その問題点についても触れる必要があるでしょう。

個人的な見解ですが、アクセスキーはお世辞にも使い勝手の良いものではありません。このような機能は本来誰にでもわかりやすくあるべきであり、長々と解説しなければ使えないような機能は実用的でないと考えます。アクセスキーの指定は補助的なものに留め、見出しや段落、連絡先等の要素を適切に用いるべきだと思います(*2)

このように多くの問題を抱えるアクセスキーですが、少なくとも携帯電話環境においては指定する価値があります。PC環境においても問題なく利用可能な、より実用的な機能の開発が待たれます。

【注釈】

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。