この記事は XHTML 1.0 入門としてのキーボードなどでのアクセスを助ける<a>要素の属性についての記事です。
HTML 5 入門に於ける該当記事は、HTML 5でのキーボードなどでのアクセスを助ける<a>要素の属性をご覧ください。
ここでは、HTMLの最大の特徴であるハイパーリンクを実現するための方法の一つであるアンカー(<a>要素)の降ろし方について解説します。
<a>要素には、キーボードでのアクセスを容易にする属性もあります。
特にaccesskey属性は携帯電話でのアクセスの際に大きな助けとなりますので、携帯電話でのアクセスを考慮するのであれば是非有効に活用して下さい。
<a>要素にて定義されているaccesskey属性は、キーボードや携帯電話のダイヤルボタンなどで当該アンカーにアクセス出来るようにするための属性です。
属性値で指定されているキーをブラウザ所定の方法で押下すると、当該アンカーにフォーカスを移すと言うものです。
以下の例では「M」キーを押すとアンカーにフォーカスが移されます。
堀北真希ちゃんがボシュロム社コンタクトレンズ用品コマーシャルに出演した事に因んだ、堀北真希うさぎ… <a href="http://www.marguerite.jp/" accesskey="M">しらぎくさいと</a> …
携帯電話は画面の幅が狭いため、ウェブ文書にアクセスするとスクロールの量が非常に多くなります。
このため、ページ内の何処を見ていてもダイヤルボタン一つで重要なページへのアクセスが可能になるaccesskey属性は非常に有用なものとなります。
携帯電話対応のコンテンツを作成するのであれば、以下の点を考慮して積極的に活用して下さい。
携帯電話のダイヤルボタンは 0 から 9 までの数字ボタン, # 及び * の十二個しかありません。
また、EZウェブなどの旧型端末では 1 から 9 までの九つの数字ボタンしか対応していないものがあります。
以上の点から、重要度の高いページへは数字ボタンを当てるようにすると良いでしょう。
例えば、
などと言うように重要そうなリンクに優先的にボタンを当てて行くようにします。
サイト内でダイヤルボタンを活用する際には、ボタンの持つ意味を全てのページで統一するようにしましょう。
例えば、サイトの表紙に戻るときにはあるページでは 1 ボタン、別のページでは 2 ボタンなどと不統一では、閲覧者を混乱させる恐れがあります。
後述しますが、accesskey属性を当てただけでは、一部の携帯電話を除いてどのボタンが指定されているか表示される事はありません。
必ず何らかの形でダイヤルボタンを明記しておくようにしましょう。
accesskey属性を活用するに当たっての注意事項です。
Shiftキーなどの補助キーを押さなければ入力出来ない記号を指定した場合、巧く入力出来ない場合もあります。
例えば、
accesskey="あ"属性は指定出来ませんが、accesskey="A"属性なら指定出来ます。同じHTML文書に同じキーを複数箇所指定する事は、HTMLの仕様では禁じられていませんが、また一方でその場合どう取扱えば良いのかも明記されていません。
実際には
とまちまちになっております。
ですから、二箇所以上に同じキーを当てるのはやめておいた方が良いでしょう。
実際にaccesskey属性を当てた場合、そのキーを明示しないと閲覧者の方には分かりません。
本来はaccesskey属性の値をブラウザが自動的に表示する、すなわちわざわざHTMLにテキストを埋込まないで良いのが望ましいのですが、実際には一部の携帯電話を除いて殆どのブラウザが自動的に表示してくれません。
このため、リンクの前か後ろにキーを明示する必要があります。
一般にブラウザではTABキーを押す事でフォーカスを移動させる事が出来ますが、<a>要素にて定義されているtabindex属性では、その移動の優先順位を指定出来ます。
以下の例ではTABキーによるフォーカス移動の優先順位が 1となります。
… <a href="http://www.marguerite.jp/" tabindex="1">しらぎくさいと</a> …
tabindex属性における注意事項です。
tabindex属性の値に 0を指定した場合は指定していないのと同じで、値のついたリンクを一通り巡った後に対象となります。すなわち、
の順でフォーカスが移動します。
