accesskey属性は主要な操作の代わりにせず補助する操作へ限定する
公開日: 執筆:佐藤
accesskey属性は、keyを使って要素を操作するための指定です。しかし、どのkeyをどの修飾keyと組み合わせるかは、browserや環境によって異なります。すべての利用者へ同じshortcutを約束できないため、主要なlink、送信button、navigationをaccesskeyだけで使える設計にしてはいけません。
shortcutは、操作の回数を減らすための補助です。画面上の意味が分かるbuttonやlinkを、shortcutの代わりに消すものではありません。日常的に使う管理画面では役立つ場合がありますが、初めて来る利用者がkeyの組み合わせを知らなければ、何もできません。通常の操作を残したうえで、対象の作業だけを補助します。
HTML 5.1では、accesskey属性の値は一つ以上の文字で、要素をactivateまたはfocusするためのshortcutとして扱われます。同じaccess keyが複数の要素へ割り当てられた場合、user agentは候補から一つを選ぶことがあります。指定そのものより、重なったときに利用者が迷わない構成を先に考えます。
通常の操作を残したまま補助する
accesskeyを使う場合も、画面上で読めるlinkやbuttonを省きません。利用者がkeyを知らない、使えない、別のshortcutと重なる場合でも、同じ作業へ進める必要があります。shortcutがなくても完了できる操作を、先に整えます。
| 操作 | 基本にする方法 | accesskeyの位置づけ |
|---|---|---|
| 問い合わせpageへ移動する | 読めるlinkを置く | 補助として付ける候補 |
| formを送信する | 意味が分かる送信buttonを置く | 送信だけへ依存させない |
| site内を移動する | navigationと見出しを整える | navigation全体の代わりにしない |
| 管理画面の反復操作 | 操作対象とkeyの対応を記録する | 対象環境を決めて試す |
たとえば、社内で毎日使う受注確認画面に、一覧へ戻るlinkがあります。linkを画面上へ残したうえで、対象browserで使えるshortcutを補助として用意することはあります。一方、一般向けの問い合わせformで「AltとQを押せば送信できる」とだけ案内しても、利用者の環境によっては使えず、送信buttonが見つからなければ作業を終えられません。
一般向けpageでは、shortcutを覚えるより、見出し、link文言、buttonの位置を分かりやすくする方が先です。問い合わせpageなら、連絡方法と送信buttonが読めることが必要です。記事pageなら、本文と関連linkへ進めることが必要です。accesskeyを付けたことで、通常のnavigationやfocusの順序を分かりにくくしてはいけません。
反復作業の多い社内画面でも、すべての操作へkeyを割り当てる必要はありません。保存、一覧へ戻る、次の確認へ進むなど、時間を使う操作がどれかを観察します。利用者ごとに作業順が違うなら、共通のshortcutを増やす前に画面の流れを見直します。keyを覚える負担が、クリックする負担より大きくなることもあります。
keyを決める前に重なりを調べる
accesskeyを指定する前に、次の順で確認します。
- その操作がshortcutを必要とする反復作業かを確認する。
- 画面上のlinkやbuttonだけで完了できるかを確認する。
- 同じpage内で同じaccess keyを使っていないかを確認する。
- 対象browserと入力環境で、実際にfocusまたはactivateできるかを試す。
- shortcutが使えない場合の操作を残す。
説明用の仮例として、記事編集画面に「保存」「preview」「一覧へ戻る」があるとします。三つへ安易に一文字ずつ割り当てるより、繰り返し使う操作がどれかを確認します。keyがbrowserの機能や入力中の操作と重なれば、覚えたshortcutほど邪魔になります。頻度が低い操作は、読みやすいbuttonやlinkを整えるほうが先です。
同じpage内で同じkeyを重ねると、利用者はどこが操作されるか予測できません。sectionごとに似たbuttonがある場合も、shortcutを増やすより、buttonの文言と配置を分けます。keyが一つに決められない操作は、accesskeyに向きません。使う対象を絞ることで、重なりを調べる範囲も小さくなります。
対象browserで試すときは、文字を入力している途中、buttonへfocusがある状態、pageを読み始めた状態を分けます。画面のどこにfocusが移るか、意図せず別の操作が起きないか、shortcutが使えないときにマウスやkeyboardで同じ操作ができるかを確認します。accesskeyの値だけをsourceで確認しても、作業上の問題は見つかりません。
shortcutの実装と業務の手順を分ける
制作側はaccesskey属性をmarkupへ付けられます。しかし、どの作業を早くしたいか、誰がどの環境で使うか、重なった場合にどう戻るかは、実際の業務を知る側が決めます。shortcutを付けることと、作業手順を改善したことは同じではありません。
外部の制作者へ頼むときは、keyだけを指定しません。対象page、対象操作、利用者、対象browser、通常の操作方法、確認する場面を伝えます。制作側はmarkupと動作を確認し、業務側はその操作が本当に繰り返されるか、作業を妨げないかを確認します。操作の権限が必要な画面なら、誰がその画面を使えるかも別に決めます。
shortcutを付けた後は、操作回数が減ったかだけで判断しません。誤操作が増えていないか、shortcutを知らない人が通常のbuttonを見つけられるか、引継ぎの人が対象とkeyの対応を分かるかを確認します。短縮する対象は小さくても、通常の操作を壊すと作業全体は遅くなります。
最初の一手は、一日のうちに何度も繰り返す操作を三つまで書き出すことです。画面上の操作だけで困らないものは残し、繰り返しが多く対象環境も決まるものだけをtestします。accesskeyは主要な操作を置き換えるものではなく、通常の操作が整ったあとに検討する補助です。
関連記事

