ボタンとリンク
ボタンは動かす、リンクは移す。この1本の線を守るだけで、キーボードも読み上げも検索も、あとから付いてきます。
図の中身を文字で読む
- 1画面に primary は1つ
- 申し込む 資料を見る あとで決める 2つ目の primary を置いた時点で
- 階層は消える。同格に並べたいなら
- primary 推奨する操作 secondary 代替 tertiary 補助 どちらも secondary にする。
- ボタンかリンクか
- 同じページで動作を実行する 別の場所へ移動する
- 送信・削除・開閉・保存 新しいタブで開ける・URLをコピーできる・履歴に残る
- <button> <a href>
- 押せる範囲は見た目より広く取る ✕ 20px ○ 44px（見た目のアイコンは小さくてよい）
- WCAG 2.2 の最小は 24×24。実務では 44px 前後を目安にする。
ひと目で#
- ボタン
- 同じページで動作を実行する（
<button>） - リンク
- 別の場所へ移動する（
<a href>）。URL を持つので、新しいタブで開け、コピーできる - ボタン階層
- primary / secondary / tertiary。1画面に primary は1つ
- CTA
- 行動を促す役割の名前。部品の名前ではない
- アイコンボタン
- 文字を持たないボタン。アクセシブルネームが必須
- ターゲットサイズ
- 押せる範囲。WCAG 2.2 で最小 24×24、実務では 44px 前後
使い分け#
| こうしたい | 使うもの |
|---|---|
| 別のページへ移動させる | リンク（<a href>） |
| 送信、削除、開閉、保存 | ボタン（<button>） |
| いちばん勧めたい操作 | primary。1つだけ。.button--primary |
| 代わりの操作 | secondary。枠で示す。.button--secondary |
| 取り消し、戻る | tertiary。面も枠も持たない .button--ghost |
| 元に戻せない操作 | danger。強さの段とは別の軸 |
| ツールバーで場所がない | アイコンボタンに、アクセシブルネーム |
間違えやすいところ#
図の中身を文字で読む
- ✕ <div> にクリックを付ける ○ <button> を使う
- 送信する 送信する
- 見た目は同じ。押せば動く。 見た目は同じ。中身が違う。
- ✕ Tab で止まらない ○ Tab で止まる
- ✕ Enter と Space で押せない ○ Enter と Space で押せる
- ✕ 読み上げは「ボタン」と読まない ○ 「ボタン」と読み上げる
- ✕ フォームを送信しない ○ type="submit" で送信する
- 足りない分を JS と ARIA で書き足すことになる。 書くのは見た目の CSS だけで足りる。
<div>にクリックイベントを付けるキー操作も、読み上げも、フォーム送信も効かない- 移動にボタンを使う新しいタブで開けず、URL もコピーできない
- primary を2つ置く階層が消える
- 「こちら」をリンクにするリンクだけを拾い読みする利用者に、行き先が伝わらない
- リンクを色だけで示す色覚特性のある利用者に伝わらない。本文の中では下線を残す
- アイコンボタンに名前を付けない読み上げでは「ボタン」としか読まれない
- 無効にするだけで理由を示さない利用者が行き詰まる
outline: noneでフォーカスの表示を消すキーボードでは使えなくなる
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、整体院の予約サイトを直しています。確認画面に「予約を確定する」「内容を修正する」「料金の詳細を見る」が並び、3つとも同じ塗りのボタンです。押すまで、どれが送信でどれが移動か分かりません。実際に「料金の詳細を見る」を押した人が、入力が消えると思って予約を中断していました。
まず役割で要素を分けます。確定は送信なので <button>、料金の詳細は別ページなので <a href> です。次に強さを1段ずつずらします。確定だけを塗りの primary にし、修正は枠線の secondary、料金の詳細は下線のリンクに落とします。どれを押すべきかは、文言より先に形の差が答えます。
処理中は文言を「送信しています」に差し替えてスピナーを添え、二重送信を防ぎます。無効化は最後の手段です。押せる状態のまま受け付けて、理由を返すほうが行き詰まりません。
確認する#
- 移動の要素は中クリックで新しいタブに開く。開けないなら button や div で移動を作っている
- 塗りの primary が1画面に1つ。並んだ残りの操作は secondary とリンクに落ちている
- Tab ですべての操作に止まり、フォーカスリングが見える。押せる高さが 2.75rem を切っていない
使えるパターン#
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
画面が移動するならリンク、その場で何かが起きるならボタン。見た目ではなく動作で決める。
このコードで動いている見本です
主・副・控えめの3種で足りる。1画面に主ボタンは1つ。
このコードで動いている見本です
44×44を目安にする。WCAG 2.2 の下限は24×24。見た目が小さくても当たり判定を広げれば足りる。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は部品を選ぶにまとめてある。逆引きには全188件。
状態を試す#
この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 影
primary / secondary / disabled / loading の4状態を切り替え、HTML と CSS を生成します。
この道具は JavaScript で動きます。