SEMANTIC HTML
形を決める前に、動作を決める。
デザインカンプでは同じ角丸の部品でも、別ページへ移動するものと、その場でメニューを開くものがあります。どちらもクリックできるからと同じHTMLで作ると、操作方法や意味が見た目とずれることがあります。
リンクとボタンは、装飾の強さではなく、押したときに何をするかで考えます。この記事では、小規模なWebサイトでよくある部品を例に、デザインから実装へ渡すときの判断を整理します。
1. 移動か、その場の操作かを確認する
別のページやページ内の場所へ移動する入口には、通常はhrefを持つa要素を使います。一方、開閉、送信、取り消しなどの操作にはbutton要素を検討します。W3CのAPGでも、ボタンの操作とリンクの機能を区別しています。参考：Button Pattern、Link Pattern
| 部品の例 | 主な動作 | HTMLの候補 |
|---|---|---|
| 料金ページを見る | 別ページへ移動 | a |
| ページ内の料金説明へ進む | 指定箇所へ移動 | a |
| メニューを開く | 表示状態を変える | button |
| 入力内容を送信する | フォームを送信 | button type=”submit” |
同じ「問い合わせ」でも、フォームのあるページへ移動する入口と、フォームを送信する操作では役割が異なります。文言だけで判断せず、クリック後の画面や処理を確認します。
2. 見た目を変えても役割はそろえる
リンクを背景色付きの大きな部品として見せることはできます。反対に、ボタンを控えめな外観にすることもあります。ただし、見た目と動作の対応が利用者の予想から離れすぎないようにします。
<a class="primary-link" href="/plans/">料金プランを見る</a>
<button type="button">メニューを開く</button>後者のコードは部品の基本形だけで、実際の開閉処理は含んでいません。メニュー全体として使うには、開閉状態の伝達やフォーカスなども設計します。
3. クリックできるdivで代用する前に考える
標準のHTML要素を使うと、その要素が持つ意味や操作を利用できます。divにクリック処理を付けただけでは、同じようには動きません。ARIAで役割名を付けるだけでも、動作すべてが自動的に追加されるわけではありません。
まず標準のaやbuttonで実現できるかを検討します。独自部品が必要なら、マウスで動くことに加えて、フォーカスを受け取れるか、キーで実行できるか、支援技術へ意味が伝わるかを確認します。
4. 実装前に部品の動作メモを残す
デザイナーと実装担当で分担する場合は、「ボタン青」のような見た目の説明だけでなく、「料金一覧へ移動」「同じ画面で詳細を開く」のような動作を添えます。移動先URLが未定なら、その点も記録します。
たとえば同じカード内に二つの入口があるとき、それぞれの移動先が同じか違うかを書いておくと、後でリンクの範囲を決めやすくなります。名前と外観をそろえる作業に、動作の整理を加えましょう。
5. キーボードでも実際に使ってみる
一般的なボタンはEnterやSpaceで実行する操作が想定されています。リンクではEnterによる移動を確認します。画面をTabでたどり、位置が見えるか、目的の処理が起きるかを確かめてください。
- 文言から動作を予測できるか。
- 移動先や開閉後の状態が意図どおりか。
- フォーム内の操作が意図せず送信になっていないか。
- マウスを使わず同じ目的を達成できるか。
練習では、一つのページにあるクリック可能な部品をすべて列挙し、「移動」と「操作」に分けます。迷う場所は、見た目を整える前に動作を定義する必要がある場所かもしれません。