March 14, 2005

accesskey 属性に数字を

ふとした思いつきで、サイトの CSS を京ぽんこと AIR-EDGE PHONE AH-K3001V 対応にしてみようと思いました。

現状このサイトは京ぽんのスモール スクリーン モードでアクセスすると、CSS が適用されず、真っ白な画面に黒い文字が表示されます。これを少しでも PC での表示に近づけたい。そのために handheld メディア用のスタイルを定義することにしました。そうすれば、京ぽんはそれを読み込み、スモール スクリーン モードの表示に適用してくれます。

そうと決まれば、まず行わなければならないのはサイト HTML 論理構造の見直し。現在使用しているページ構成要素は Movable Type のテンプレートを一部参考にしているのですが、この構造は意味的に考えておかしな部分を抱えています。新しい CSS 適用にあたっては、それを補正しなければなりません。

さらにそれに加えて思いついたのが、ページ ナビゲーションや主要なリンクに、accesskey 属性による携帯電話用のアクセス キーを設定すること。入力デバイスの制限から PC に比べ操作性の劣る携帯電話のブラウザに対し、ダイヤル キーを用いたアクセス キーを設定することは、大幅なアクセス性の向上が期待できます。

というわけで、さっそくナビゲーションの「戻る」に数字の 0 キーを、そして「« 前へ」と「次へ »」の存在するページには、それぞれに *# を割り当てました。さらに章構成となっているページは各章のリンクに、目次ページは各コンテンツのリンクに、それぞれ 1 から 9 を割り当ててみました。

そして今日、もしかするとこのキー設定は非常に合理的なのではないかと、電車に乗りながら思いました。というのも、私が帰宅時の電車内で、手すりにもたれて立って、実際にノート PC で操作してみたからです。

ノート PC を立った状態で使う場合、基本的に片手で本体をホールドし、もう片方の手で入力を行うことになります。ところが乗り物の車内は揺れるために、モバイル機器のポインティング デバイスは意外と使いづらいものです。

通勤電車の乗客の大勢が、揺れる車内でも平気で携帯電話のメールを読み書きできるのはなぜでしょうか。それは、携帯電話が揺れの影響を受けにくい、ボタンという入力デバイスを採用しているからです。

ならば、それに近いキーボードというインターフェイスを使えるように、サイト側が用意すればどうでしょう。

今回私は、作りかけのサイトを車内で表示確認したのですが、アクセス キーを設定してあるとそれも簡単に行えました。Windows の IE の場合、アクセス キーを利用するには Alt キーを押しながら目的のキーを押さねばならないのですが、それでもマウス ポインタでいちいちリンクを選択してクリックするよりは楽に感じました。

さらに、これが今回の主題なのですが (前置き長すぎ…)、ここではアクセス キーに数字を設定したことに意義があります。

通常アクセス キーに数字を設定するのは携帯電話向けサイトが主ですが、私は PC サイトにおいても、数字のアクセス キーは有用だと思うのです。というのも、通常アクセス キーに使われるアルファベットは、常にブラウザのショートカットとバッティングする危険性を持っているからです。

具体例で言うと、たとえばサイトの解説ページ (ヘルプ) へのリンクとして、H キーを設定した場合。これは Windows の場合、ほとんどの環境においてメニューの「ヘルプ」とバッティングします。Firefox や IE だと、この場合は Alt キーを押しながら H キーを押すとアクセス キーが、Alt キーを押して (その後離して) から H キーを押すとメニューがアクティブになりますが、ユーザーの混乱を招くためこのような割り当ては避けたほうが無難でしょう。

これらアルファベットのうち、特に致命的なのが D キーです。前記 2 つのブラウザでは、Alt+D を押すことによりアドレス バーにフォーカスする (カーソルが表示され、入力状態になる) のですが、D キーにアクセス キーを割り当ててしまうと、既定のキーでアドレス バーにフォーカスできなくなってしまいます。

このように、アルファベットによるアクセス キーには、割り当てを誤ると逆にユーザーのアクセシビリティを低下させてしまう可能性があります。そしてブラウザが異なれば、これら危険なキーも異なってきます。その点、逆に数字はメニューに使用されることはほとんどないので、こういった問題も少ないと思われます。

HTML のアクセス キーには存在を疑問視する意見も多数ありますが、あって害になるのでなければ、つけてもいいのではないかと思います。特に操作性に難のある携帯電話向けのページには、絶対につけたほうがよいと思います。

携帯電話でもアクセスできて、PC でもアクセシビリティを損ねない。そんな数字によるアクセス キーの付加を、私はすべてのウェブサイト制作者に提案したいと思います。

Recent entries from same category

  1. first-letter 疑似要素と入れ子の要素
  2. トラックワードと XHTML
  3. table 要素は難しい
  4. CSS と携帯電話
  5. first-letter の悪夢

TrackBacks

  • トラックバック内容 (excerpt) には必ずひらがなを含めてください。入っていない場合は拒否します。
  • このエントリーの URI を含まない (リンクしていない) トラックバック元からは受信しません。

Comments

投稿フォーム

  • コメント以外の入力は任意です。
  • コメント文中には必ずひらがなを含めてください。入っていない場合は拒否します。
  • メール アドレスは公開されませんが、URI を入力した場合は名前がリンクとなります。なお、いずれもコメント欄への入力についてはリンクされます。
  • このページの URI をリファラとして送信しない UA からの投稿は受け付けません。