2010年05月24日

タブキー利用にも対応するフォームのちょっとした改善

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

顔写真
ユーザビリティコンサルタント
半田 豊

最近のユーザ行動観察調査(ユーザビリティテスト)では、ウェブサイトの利用、マウスやキーボードの使い方に慣れたユーザも増えてきていると感じます。そこで今回は、ユーザのタブキー利用への対応について考えてみたいと思います。

キーボードのタブキーは、通常次フィールドへのフォーカスの移動に使えます。ユーザは特にフォーム入力時に利用します。

フォーム制作において、タブキーを使った時にフォーカスが移動する箇所の順番を、気にされていますでしょうか?タブキーを使って入力ボックスを移動した時に、適切な順番で、全ての入力ボックスへ移動できることが期待されます。

イメージ画像

タブキーを使って移動するユーザにとっては、適切な順番でフォーカスが移動しない、タブキーで全ての入力ボックスへ移動できないケースが発生した場合、離脱の原因になりえます。
フォーカス移動の順番は、HTMLのtabindex属性で指定することができます。
<タグ名 tabindex=n>
またフォーカス移動を指定する場合には、最後の送信ボタンにまで移動できるよう配慮しましょう。

さらに「戻る」ボタンを配置している場合には、フォーカス移動の順番に注意する必要があります。最後の入力ボックスの次に「戻る」ボタンにフォーカスが移動してしまうと、ユーザが「送信」するつもりで誤って「戻る」を選択してしまう懸念がありますので、「送信」ボタンに先にフォーカスが移動するよう順番付けすることをお勧めします。

※「戻る」ボタンの配置は原則不要と考えます。
リセットボタンは必要か?
フォームにおける「進む」ボタンと「戻る」ボタン。どのように配置する?

今回は、特にフォームにおけるタブキー利用について考えましたが、タブキーの利用はアクセシビリティの観点からも必要となります。

WCAG2.0では、「ウェブページが順番にナビゲートできて、そのナビゲーション順序が意味あるいは操作に影響を及ぼす場合、フォーカス可能な構成要素は意味および操作性を保持した順序でフォーカスを受け取る」ことが推奨されています。
(参照) WCAG 2.0(W3C勧告)日本語訳

情報の配置及びコーディングの論理構造に問題がなければ、概ね上記推奨事項はクリアできる内容と言えますが、ウェブコンテンツをよりアクセシブルにするという観点から、一度チェックをしてみるとよいでしょう。

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

<< 困ったときのタブ頼み? | トップ | 「ログインフォーム」は慣れが大事 >>