linkは移動に使いbuttonはpage内の操作に使う

別のpageや資料へ進ませるならlinkを使います。同じpage内でmenuを開く、入力内容を送信する、表示を切り替えるならbuttonを使います。見た目をbuttonらしくしたlinkや、URLを開くbuttonは作れますが、HTMLの役割と実際の操作が食い違うと、keyboard操作、browserの戻る操作、JavaScriptが動かない画面で問題になります。

HTML 5.1は、a要素をhrefで示すlinkとして定義しています。button要素はformの送信やreset、scriptによる操作へ使えます。まず、押したあとにURLが変わるのか、同じpageの状態が変わるのかを決めます。

移動するならlinkを使う

会社案内、サービス詳細、料金表、問い合わせpage、PDFを開く操作は移動です。hrefを持つlinkにします。利用者はlinkを新しいtabで開いたり、URLをコピーしたり、browserの戻る操作で元のpageへ戻れます。CSSで背景色や余白を付ければ、linkをbuttonのように見せられます。

<a class="button-link" href="/contact/">問い合わせる</a>

一方、headerのmobile menuを開く、検索欄を表示する、dialogを閉じる操作は、その時点のpageを切り替える操作です。buttonにします。href="#"を置きJavaScriptで処理する方法は、移動するlinkなのか操作buttonなのかを曖昧にします。

<button type="button" aria-expanded="false">menuを開く</button>

見た目で役割を決めない

説明用の仮例として、「資料を読む」「menuを開く」「問い合わせを送信する」三つの操作を考えます。資料を読むなら資料URLへ移動するlinkです。menuを開くならbuttonです。問い合わせを送信するならform内のtype="submit"を持つbuttonです。三つを同じ色にしても、HTMLの役割まで同じにはなりません。

keyboardで実際に確認する

実装後はmouseで押すだけで終えません。Tab keyでlinkとbuttonへ移動し、focusが見えるかを確認します。linkならEnterで目的のURLへ進み、戻る操作で元のpageへ戻れるかを見ます。buttonならEnterまたはSpaceで操作でき、menuを閉じたあとにfocusを見失わないかを確認します。

JavaScriptが読み込めないときにも必要な情報へ進ませたい場合、まずURLを持つlinkを用意します。scriptは表示を速くしたり、menuを開閉したりする助けになりますが、移動先を持つlinkの代わりにはしません。逆に、page内操作のためにlinkを使うと、#へ移動して画面位置が変わることがあります。

formでは、buttonの役割をさらに分けます。送信するbuttonはtype="submit"にします。入力欄を初期状態へ戻す操作はtype="reset"ですが、利用者が書いた内容を失うため、問い合わせformで安易に置かない方がよいでしょう。JavaScriptで確認画面を開くだけならtype="button"にします。typeを書かずにform内へ置くと、送信buttonとして扱われる場合があります。見た目が同じでも、入力内容を送る操作と、画面を切り替える操作を同じbuttonにしません。

公開pageで確認するときは、URLだけでなく結果を見ます。資料linkなら、PDFや案内pageが開き、読者が元の説明へ戻れるかを確かめます。問い合わせbuttonなら、入力欄の必須項目、error message、送信後の完了画面、受信先を確認します。mobile menuなら、開いたmenuから必要なpageへ移動し、閉じたあとにheaderの操作位置へ戻れるかを見ます。buttonを押せたことではなく、利用者が目的の作業を終えられることを確認します。

外部の制作会社がthemeを直す場合も、「buttonをlinkへ変えた」とだけ報告させません。対象のtemplate、変更前の操作、変更後のURLまたはpage内操作、確認したbrowserと画面幅を残します。作業を任せても、site側がどの導線を守るための変更だったかを確認できなければ、次の修正で同じ問題を繰り返します。HTMLの選択は小さなcodeの変更に見えても、問い合わせ、資料請求、購入へ進む入口の設計です。

linkとbuttonを替えたあと、CSSのclassだけを流用すると、hoverやfocusの表示が足りなくなることがあります。linkには訪問済みの表示を付けるか、buttonには押せる範囲を十分に取るかも、役割に応じて確認します。見た目をそろえる目的でHTMLの意味を捨てず、同じ画面で表示と操作をそろえます。

公開後にlink先を変更したときも、buttonへ置き換えて一時的に逃げません。URL、案内文、移動先の内容を同じ作業として更新します。

最初の一手は、siteのbutton風の要素を一つ選び、押したあとにURLが変わるかを確認することです。変わるならlink、変わらないならbuttonとしてHTMLを直し、Tab操作と公開画面で確かめます。