エントリー記事

フォームに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]という仕様なので、ショートカットとぶつかることはない。しかし、他ブラウザとは挙動が違う。

Windows用ブラウザのショートカット設定
ショートカット
キー
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が有効になっています。がしかーし、ページ下にコメントフォームがあるので、ちゃんと動きませんが(^^;)。

下記フォームはテーブルタグを使っているのはご愛敬ということで(^^;)...暇なときにスタイルシートに直します。

ありがち1:検索フォーム
ありがち2:入力フォーム
項目名 入力欄
お知らせを希望?

うーん、どうだかなぁ...

「送信(W)」はピンとこないなぁ。「書き込み-(W)rite」ならいいんですけど。本来なら「投稿-(P)ost」か、もしくは「送信-(S)ubmit」でしょう。でも、(P)はtele(P)honeに使っちゃったし、(S)は(S)earchに使っちゃったから、空きがない。

上のフォームはまだシンプルですが、ショップサイトなんかではもっと複雑なフォームを使うでしょう。キーアサインにアルファベットを使うとしても、ブラウザ間のショートカットの問題をクリアしようとすれば、アルファベットが足りなくなるし、リンク先とアクセスキーとのつながりが薄くなるのは否めない。

ページ移動のアクセスキーはどうする?

ぶっちゃけ、数字キーしか残ってないという結論に達する(笑)。テンキーをカーソルに見立てて、[4(戻る)]-[6(進む)]とか、[0]=TOPとか。あるいはグローバルメニュー順に、1234...と振る?。

結論は出ない

こうやってあーでもないこーでもないとやっていると、ふとアクセシビリティの本質がチラッと見えた気がする。

つまり、1ページに大量の情報やリンクを載せること自体、あんまりアクセシビリティではないって事にならない?。

うちのサイトみたいに大量の情報とリンクを1ページ内に載せると、必要な情報の両サイドに、必要じゃない情報が大量にあるわけだ。だから、accesskeyを持ってこようがtabindexを持ってこようが、矢でも弓でも鉄砲でも竹槍でもトマホークでも持ってこようが、どのみちアクセスしがたいって事ですよ、多分。

サイト全体の見栄えを揃えるのは大事ですが、トップページが3カラムなら、全ページが3カラムでなければいけないというわけでもない。フォームメール送信ページは、フォームだけあるのが一番良い。迷う部分が減るわけだ。

ま、今度デザインリニューアルするときは、この辺も踏まえようかなっと。

なんか歯切れが悪いなぁ

にしても今回はちょっと考えてしまった....そもそも、accesskeyやtabindexが本当に必要かどうかもアヤシく感じてくる。

新旧のブラウザも含めて挙動やショートカットが統一されてないし、Operaの[ESC]+[SHIFT]+[accesskey]ってのは、ブラウザのショートカットとダブらないのはいいんだけど、あまりにも押しづらい。tabindexに至っては、ウェブスタンダードを念頭に作られたページの場合、さしてtabで動く順番を調整する必要はないと思うんですが....