2.1.1 キーボード レベルA 原則2 操作可能
マウスなしで注文できる？
手や腕が思うように動かない人、画面が見えずに読み上げソフトを使う人は、マウスではなくキーボード（またはキーボードの代わりになる機器）で操作します。Tab キーで次の部品へ進み、Enter キーで押します。
さわってみよう
マウスを使わず、Tab と Enter だけで、パンを1つ選んで「注文する」を押そう。
別タブには見本の店だけがあるので、Tab がサイトのメニューなど、ほかのボタンに寄り道しません。下の見本でも同じことを試せます。
操作のしかた
このチェックボックスを選んだ状態から Tab キーを押すと、次の部品へ進みます。
いまのフォーカス：（まだ見本の外）
購買のパン 予約
昼休みに受け取るパンを選んでください。
見本のボタンは、見た目はボタンでも中身は <div> です。Tab キーで止まらないので、キーボードでは押せません。
直してみよう
部品を本物の button に変えて、Tab と Enter だけで注文を完了させよう。
別タブで注文できたら、このページにも合格が出ます。下の見本で「本物の <button> にする」を選んで試しても合格できます。
直す前 （Tab で止まらない）
<div class="btn" onclick="order()"> 注文する </div>
直した後 （Tab で止まり、Enter でも押せる）
<button type="button" onclick="order()"> 注文する </button>
いまのフォーカス：（まだ見本の外）
購買のパン 予約
昼休みに受け取るパンを選んでください。
分かったこと
- マウスでできることは、キーボードだけでも全部できるようにする。
<div onclick>は見た目をボタンにしても、Tab で止まらず、Enter にも反応しない。- 本物の
<button>なら、Tab で止まり、Enter と Space で押せる。読み上げソフトにも「ボタン」と伝わる。 - どうしても div を使うなら、
tabindex="0"・role="button"・キー操作の処理を自分で全部足す必要がある。まずは button を使うのが近道。 - キーボードで入った部品から、キーボードで出られなくなる（閉じ込められる）のも問題になる（2.1.2）。
例外（手書きの線のように、動かした道すじそのものが大事な操作）のことは、WCAG 2.2 の日本語訳で確かめよう。