15日目：キーボード・ショートカットを設定する

HTML のなかで一番知られてないマイナーなヤツが、リンクとフォームの accesskey って属性だ。コレ使うとWeb作ってるひとがよく使われるリンクとかフォームの欄へのキーボードショートカットを指定することができる。Windowsでは ALT + アクセスキー、Macだと Control + アクセスキーのコンビネーション。リンクに対してアクセスキーが決めてあれば、ブラウザはそのリンクへ飛んでくれる。フォーム欄に対して決めてあれば、ブラウザはその欄へ連れてってくれる。IEにはバージョン4の頃から、ネスケにはバージョン6からこの機能がついてる。それ以前の古いブラウザはアクセスキーを無視するだけだから、害はないんだ。

どういうページや機能にどのショートカットを使うっていうのは、特に標準として定められてないんだけど、以下によく使われてるものをいくつか紹介しとくね：

アクセスキー1
ホームへ
アクセスキー2
メインコンテンツに飛ぶ (11日目：ナビゲーション飛ばしリンク)
アクセスキー 9
ご意見・ご感想

誰がトクする？

  1. ジャッキー。JAWS が accesskey の指定してあるリンクにぶつかると、そのアクセスキーも読みあげてくれるんだ。例えば、<a href="/" accesskey="1">ホームへ</a> っていうのがあったら、 JAWS は「リンク：ホームへ、ALT + 1」って具合に。こうなってれば、ジャッキーは ALT+1 を押してそのリンクへ、で ENTER をそこで押してそのリンク先へと飛べる。
  2. ビル にも役立つね。ビルは発作の影響でマウスがあんまうまく使えないから、キーボードとショートカットでページを操作することが多い。アクセスキーはよくあるリンクとか、よく使うリンクへ飛ぶのにすっごく便利。ビルが ALT+1 を押すと、Mozilla はすぐ accesskey="1" で指定されてるリンクをたどってくれる。（注：Mozilla にはアクセスキーの存在を示す機能がついてない。ってことは…ビルはどうやってアクセスキーのこと気づけるんだろう？これについては今回じゃないけど後々話そうね。）

どうしたらいい？: ホームへのリンク

  • Movable Type: 最初のテンプレートにはホームへのリンクがついてないんで、サイト名をリンクにするといい。でそれに accesskey をつけ足す。テンプレートを <$MTBlogName$> で検索して、見つかったらこう変える：

    <a href="<$MTBlogURL$>" style="color:black; text-decoration:none" accesskey="1"><$MTBlogName$></a>

  • Blogger: テンプレートを <$BlogTitle$> で検索。<a> タグで囲まれてたら、accesskey="1" って属性を <a> タグに足して。<$BlogTitle$> が <a> に囲まれてない場合は、こんなふうに変えてみて（自分のサイトのホームのURLに変えてね）：

    <a href="http://自分の/サイト/の/URL/" style="color:black; text-decoration:none" accesskey="1"><$BlogTitle$></a>

どうしたらいい？: ナビゲーション飛ばしリンク

ナビゲーションを飛ばすためのリンクはつけてある？あるなら accesskey="2" をつけとこう。

<a class="skiplink" href="#startcontent" accesskey="2">ナビゲーションを飛ばす</a>

どうしたらいい？: ご意見・ご感想へのリンク

ご意見・ご感想をもらうための、メールフォームとかメールアドレスへのリンクはある？あるひとは、そこに accesskey="9" をつけて。

<a href="mailto:me@mydomain.com" accesskey="9">お気軽にご連絡ください（Email）</a>

それぞれの accesskey がサイト内のどのページにも載るようにしよう。関係あるテンプレートの全部を変えておいてね。

さらなる情報源（英語）

 
<< 14日目：リンクにタイトルを加える | 目次 | 16日目：別窓を開かない >>