フォームにaccesskeyを設定しようと思ったが...
先日、Movable Typeを3.151から3.17にアップデートする際、ついでにコメントフォームにaccesskeyを振ってみた。サンプル的にはこうである(accesskeyは動作しません)。
括弧の中がアクセスキーと呼ばれるもので、ALTキーを押しながら括弧内のキーを押すことによって、入力フォームにカーソルが移動したり、ボタンをクリックするのと同等の動きをします。マウスを使えない人にとっては重要なこの機能。なんならマウスを外してブラウズすればよく分かる。最近で言うところの「アクセシビリティ」である。
アクセシビリティなページにすることは、JISで「やらなきゃダメよん」となったので、やらんばならん。てなわけで、やってみたわけだが....
accesskeyがブラウザのショートカットにダブる？
Windowsをお使いの方なら、アプリケーションを立ち上げると、左から「ファイル(F)、編集(E)、表示(V)...」とかって並んでますよね。[ALT]キーを押しながら任意のアルファベットキーを押すと、クリックと同等の動きをするわけです。
タグでaccesskeyを設定すると、ブラウザよりHTMLの方を優先するんですが、ブラウザのショートカットを使っている人もいるでしょう。で、タグにアクセスキーを設定するときは、これらにカブらないように設定した方がいいんじゃないかな？、と思ったわけです。
Windowsのブラウザを調べてみる
これがその一覧。調べてみると、結構使わない方が良さそうなキーがある。がしかし、Operaのaccesskeyは[ESC]+[SHIFT]+[accesskey]という仕様なので、ショートカットとぶつかることはない。しかし、他ブラウザとは挙動が違う。
| ショートカット キー |
IE6 | Firefox 1.0.4 |
Opera 8.01J |
NN 7.1 |
結果 |
|---|---|---|---|---|---|
| A | お気に入り | 使えない | |||
| B | ブックマーク | ブックマーク | ブックマーク | 使えない | |
| C | |||||
| D | アドレスバーにフォーカス | アドレスバーにフォーカス | アドレスバーにフォーカス | 使えない | |
| E | 編集 | 編集 | 編集 | 編集 | 使えない |
| F | ファイル | ファイル | ファイル | ファイル | 使えない |
| G | 移動 | ジャンプ | 使えない | ||
| H | ヘルプ | ヘルプ | ヘルプ | ヘルプ | 使えない |
| I | |||||
| J | |||||
| K | |||||
| L | |||||
| M | |||||
| N | |||||
| O | |||||
| P | |||||
| Q | |||||
| R | |||||
| S | |||||
| T | ツール | ツール | ツール | ツール | 使えない |
| U | |||||
| V | 表示 | 表示 | 表示 | 表示 | 使えない |
| W | ウィンドウ | 使えない | |||
| X | |||||
| Y | |||||
| Z |
ちなみに、Macintosh版のSafari、Firefoxの場合は、Windowsのようにブラウザにアサインされているショートカットキーはひとつもない。世の中全員Macユーザーなら、アクセスキーで悩むことはないんですが、そんな時代はきっと来ない(笑)。あ、ちなみに、Macintoshの場合は、「ALT」キーではなく「control」を使うので注意。
標準のフォーム用accesskeyってないの？
これだけウェブスタンダードやらアクセシビリティだと叫ばれる昨今。お名前やメールアドレスなどのよく使われる入力欄を、各サイトでおのおのaccesskeyを振ってしまったら、サイト毎に異なったaccesskeyになって分かりづらい。ブラウザのアクセスキーとダブってしまうと困る人もいる。
誰か、標準的なaccesskeyの設定なんか公開してないかな？、と思い調べたが、ないんである。意外だ。
で、上記調査を元に、ブラウザのショートカットキーにダブらないよう、自分なりにaccesskeyのキーバインドを考えてみた。NNの(W)indowは、今回は無視。
| アクセスキー | ブラウザ | キーバインド |
|---|---|---|
| A | IE お気に入り | × |
| B | Opera、Firefox ブックマーク | × |
| C | (C)omment-テキストエリア部 | |
| D | IE、Firefox アドレスバーにフォーカス | × |
| E | win共通 編集 | × |
| F | win共通 ファイル | × |
| G | Firefox 移動、NN ジャンプ | × |
| H | win共通 ヘルプ | × |
| I | ||
| J | (J)yusyo-住所。 | |
| K | (K)eyword-検索キーワード入力欄。 | |
| L | ||
| M | (M)ail-メールアドレス欄 | |
| N | (N)o-はい・いいえ式ラジオボタンの"いいえ"。 | |
| O | (O)namae-お名前。無理矢理っぽい。 | |
| P | (P)ost-ポスト、送信ボタン もしくはtele(P)hone-電話番号 |
|
| Q | ||
| R | (R)eset-フォームリセットボタン | |
| S | (S)earch-サーチ、検索ボタン | |
| T | win共通 ツール | × |
| U | (U)rl-URL入力欄 | |
| V | win共通 表示 | × |
| W | NN ウインドウ | (W)rite-書込(送信)ボタン |
| X | ||
| Y | (Y)es-はい・いいえ式ラジオボタンの"はい" | |
| Z | (Z)ip-郵便番号 |
む、むずかしいんですが...ダメオーラ炸裂
あーなーんか、ダメダメぢゃん。アクセスキーはある程度語呂が良くないと分かりづらいと思うんですが、やってみると難しい。
とりあえずフォームを作ってみる
良いか悪いかはのちのち考える事にして、とりあえずありがちなフォームを作ってみる。下記フォームはaccesskeyが有効になっています。がしかーし、ページ下にコメントフォームがあるので、ちゃんと動きませんが(^^;)。
下記フォームはテーブルタグを使っているのはご愛敬ということで(^^;)...暇なときにスタイルシートに直します。
ありがち１：検索フォーム
うーん、どうだかなぁ...
「送信(W)」はピンとこないなぁ。「書き込み-(W)rite」ならいいんですけど。本来なら「投稿-(P)ost」か、もしくは「送信-(S)ubmit」でしょう。でも、(P)はtele(P)honeに使っちゃったし、(S)は(S)earchに使っちゃったから、空きがない。
上のフォームはまだシンプルですが、ショップサイトなんかではもっと複雑なフォームを使うでしょう。キーアサインにアルファベットを使うとしても、ブラウザ間のショートカットの問題をクリアしようとすれば、アルファベットが足りなくなるし、リンク先とアクセスキーとのつながりが薄くなるのは否めない。
ページ移動のアクセスキーはどうする？
ぶっちゃけ、数字キーしか残ってないという結論に達する(笑)。テンキーをカーソルに見立てて、[4(戻る)]-[6(進む)]とか、[0]=TOPとか。あるいはグローバルメニュー順に、1234...と振る？。
結論は出ない
こうやってあーでもないこーでもないとやっていると、ふとアクセシビリティの本質がチラッと見えた気がする。
つまり、１ページに大量の情報やリンクを載せること自体、あんまりアクセシビリティではないって事にならない？。
うちのサイトみたいに大量の情報とリンクを１ページ内に載せると、必要な情報の両サイドに、必要じゃない情報が大量にあるわけだ。だから、accesskeyを持ってこようがtabindexを持ってこようが、矢でも弓でも鉄砲でも竹槍でもトマホークでも持ってこようが、どのみちアクセスしがたいって事ですよ、多分。
サイト全体の見栄えを揃えるのは大事ですが、トップページが３カラムなら、全ページが３カラムでなければいけないというわけでもない。フォームメール送信ページは、フォームだけあるのが一番良い。迷う部分が減るわけだ。
ま、今度デザインリニューアルするときは、この辺も踏まえようかなっと。
なんか歯切れが悪いなぁ
にしても今回はちょっと考えてしまった....そもそも、accesskeyやtabindexが本当に必要かどうかもアヤシく感じてくる。
新旧のブラウザも含めて挙動やショートカットが統一されてないし、Operaの[ESC]+[SHIFT]+[accesskey]ってのは、ブラウザのショートカットとダブらないのはいいんだけど、あまりにも押しづらい。tabindexに至っては、ウェブスタンダードを念頭に作られたページの場合、さしてtabで動く順番を調整する必要はないと思うんですが....
