問い合わせの内容を書き終えたのに、送信ボタンだけ押せない。
マウスなら一瞬で終わる操作でも、キーボードではそこで止まってしまう。見た目がきれいに整ったサイトにも、そんな問題が隠れていることがあります。
最初の確認は、マウスから手を離して、Tabキーを押すところから始められます。 操作したい場所に移動できるか、今いる場所が見えるか、実際にボタンを押せるかを見ていきます。
専用ツールを入れなくても、自分で作ったページの使い心地を確かめる方法です。
まずは、自分のサイトでTabキーを押してみる
パソコンでサイトを開き、Tabキーを何度か押してみてください。
リンクやボタンの周りに枠が現れたり、入力欄にカーソルが入ったりするはずです。このとき、キーボード操作の対象になっている場所を「フォーカスがある」といいます。
マウスでは、自分でポインターを動かして押す場所を選びます。キーボードでは、フォーカスを移して操作する場所を選びます。
まず覚えておくと便利なのは、次のキーです。
| キー | 主な操作 |
|---|---|
| Tab | 次の操作できる場所へ移動する |
| Shift＋Tab | 一つ前へ戻る |
| Enter | リンクを開く、ボタンを押す |
| スペース | ボタンを押す、チェックボックスを切り替える |
| 矢印キー | ラジオボタンなどの選択を変える |
部品によって使うキーは違います。Tabで移動するところまでが、確認の前半。移動した先で実際に操作するところまでが、後半です。
なお、通常の文章や見出しにTabが止まらないのは、おかしな動きではありません。Tabはページの全文を順番に読むためのキーではないからです。
Macなどでは、OSやブラウザのキーボード操作設定によって移動できる対象が変わることもあります。リンクを一つも選べない場合は、サイトのコードとあわせて設定も確認してください。
見えているボタンを、Tabが通り過ぎてしまう
たとえば、画面に「詳しく見る」というボタンがあるのに、Tabを押すとその前後のリンクにしか移動できない。
そんなときは、ボタンの見た目をした別の要素になっていないか、HTMLを確認します。
<span onclick="showDetails()">詳しく見る</span>このspanに色や枠を付けると、見た目はボタンになります。クリックしたときの処理も書いてあるので、マウスでは動きます。
でも、この書き方だけでは、通常のTab操作で選べません。
詳細を開く操作なら、buttonを使います。
<button type="button" onclick="showDetails()">
詳しく見る
</button>buttonには、キーボードでフォーカスを受け取り、Enterやスペースで操作するための基本的な仕組みが備わっています。
手を動かして確かめる
同じ見た目でも、Tabで移動できる？
2つともクリックすると動きます。キーボードでも同じように操作できるか、試してみてください。
開始ボタンを押したら、Tabを1回。移動先でEnterまたはSpaceを押してみましょう。
見た目だけのボタン
span にクリック処理を追加
まだ実行されていません
本物のボタン
button にクリック処理を追加
この見本では、Tabは「見た目だけのボタン」を飛ばし、「本物のボタン」に移動します。spanは比較のために、キーボードで操作できない作りにしています。スマートフォンでは両方をタップでき、Tabの違いはキーボードを接続すると確かめられます。
別のページへ移動するなら、リンクです。
<a href="/details/">詳しく見る</a>「押したあとに何が起きるか」で、使う要素を選びます。
ここで、spanにtabindex="0"を足せば解決しそうに見えるかもしれません。これはTabで選べるようにする指定ですが、それだけではbuttonと同じキー操作や意味は備わりません。
選べるのに押せない状態を作らないためにも、ボタンにはまずbuttonを使う方が、実装を分かりやすく保てます。MDNのtabindex解説
今どこにいるか分からないと、押すのが怖くなる
Tabを押している途中で、枠が消えてしまう。もう一度押すと、少し先のリンクに枠が現れる。
この場合、移動先がないのではなく、フォーカスを示す見た目が消されている可能性があります。
たとえば、次のCSSです。
a:focus {
outline: none;
}別の方法でフォーカスを示していなければ、リンクを選んでも目印が見えなくなります。
その状態でEnterを押すのは、何が起きるか分からないボタンを押すようなものです。作った人は場所を覚えていても、初めて来た人には分かりません。
ブラウザが表示する標準の枠を残せるなら、無理に消す必要はありません。デザインに合わせて変更するなら、代わりの目印を用意します。
a:focus-visible,
button:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
}これは一例です。背景に埋もれない色を選び、周囲の要素に枠が隠れたり、切れたりしないかも確認します。
大切なのは、CSSに指定を書いたことではなく、ページを操作している人が、今どこを選んでいるか見て分かることです。
順番が飛ぶときは、tabindexを足す前にHTMLを見る
名前、メールアドレス、お問い合わせ内容。その順に並んでいるフォームで、最初に送信ボタンへ飛んだら、少し戸惑います。
移動順がおかしいときは、まずtabindex="1"などの正の数が付いていないか確認してください。
正の数を持つ要素は、通常のリンクや入力欄より先にTabの移動対象になります。たとえば、ほかに正のtabindexがなければ、ページの下にあるtabindex="5"のリンクが最初に選ばれます。
順番を直そうとして1、2、3と番号を振ると、項目が増えたときにも、その管理を続けることになります。
基本は、HTMLを意味の通る順番で書くことです。CSSで見た目の並びだけを入れ替えている場合は、画面上の順番とTabで進む順番が食い違っていないかも見ます。
tabindexを使うときは、次の違いを押さえておくと整理しやすくなります。
| 値 | 主な用途 |
|---|---|
0 | 通常のTabの移動順に加える |
-1 | 通常のTabの移動順から外し、必要なときにJavaScriptなどでフォーカスを移す |
通常のリンクやbuttonには、Tabで選べるようにするためのtabindex="0"を追加する必要はありません。
「必ず画面の上から下へ進めば正解」というわけではありませんが、入力途中であちこちに飛んで、読者が場所を探し直すような順番は避けたいところです。
メニューは「開ける」だけでなく「閉じられる」まで見る
ページをそのまま確認したら、次はメニューやポップアップを開いてみます。
開くボタンには移動できた。Enterを押すと、内容も表示された。ここで確認を終えると、開いたあとの問題を見落とします。
たとえば、次のような動きです。
- メニューは開くのに、中の項目を選べない
- ポップアップの背後へフォーカスが移り、今いる場所が見えない
- 閉じるボタンを選べず、元の画面に戻れない
特に確認したいのは、マウスを使わずに、開いて、操作して、閉じられるかです。
背景の操作を一時的に止めるモーダルダイアログでは、開いている間、Tabの移動をダイアログ内にとどめるのが基本です。中を循環すること自体が問題なのではありません。閉じるボタンやEscキーなどで閉じて、元の操作へ戻れることが大切です。W3Cのモーダルダイアログの操作例
閉じたあとも、開く前のボタンなど、作業を続けやすい場所にフォーカスが戻るか見てください。「閉じられたけれど、またページの最初から探し直す」という手間にも気づけます。
最初は、一つの用事を終えられるか確かめる
サイト全体を一度に確認しようとすると、どこまで見ればよいか分からなくなります。
最初は「問い合わせをする」「目的の記事を開く」など、用事を一つ決めると進めやすくなります。
問い合わせなら、フォームを開き、入力欄を移動し、必要な項目を選び、送信ボタンまで進む。その間、マウスを使いたくなった場所を覚えておきます。実際の送信確認は、テスト環境や、あらかじめ決めた方法で行ってください。
問題を見つけたら、難しい用語で説明しなくても構いません。
お問い合わせ内容の入力欄からTabを押すと、送信ボタンを通り過ぎます。キーボードではボタンを選べません。
これなら、どこで何に困るのかが伝わります。
もちろん、キーボードで操作できれば、アクセシビリティの確認がすべて終わるわけではありません。文字の読みやすさ、画像の説明、フォームの項目名など、ほかにも見るところがあります。W3Cの初歩的な確認項目
こうした確認は、コーディングの周辺にある仕事の一つです。実務で何が求められるかはコーダーが実務で重宝されるスキルはHTML/CSSだけではないに書いています。求人での呼ばれ方の違いはコーダーとマークアップエンジニアの違い｜仕事内容と求人の見分け方にまとめました。
それでも、普段はマウスで済ませている操作をキーボードで試すと、同じページの違う面が見えてきます。
まずは、自分のサイトのメニューを開いて、目的のページへ進んでみる。途中でマウスに手が伸びたら、その場所が見直しのきっかけになります。
