株式会社COUNTERWORKSでフロントエンドエンジニアとして働いている@2_a8udです。
最近UXとアクセシビリティを学ぶ中で、ボタンのように見えるリンク(以下リンクボタン)はよくないみたいな話を耳にするのですが、実際に何でよくないんだっけ？どうやったら解決できるの？という話を書いていこうと思います。
リンクボタンとは
この記事でリンクボタンは、ボタンのような見た目のアンカーリンクのことを指します。
<a class="button" href>ボタンみたいな見た目をしたリンク</a>
ボタンのように見えながらもクリックすると別のURLに遷移したり、ファイルをダウンロードなどの動作をします。
例
-
Spotify登録サイト (https://open.spotify.com/intl-ja?)
-
Node.jsのダウンロードリンク(https://nodejs.org/en)
そもそもリンクとボタンってなにが違うの
画面上のリンクやボタンの役割は、ユーザーを次のアクションへと導くことです。たとえば「登録する」のようにユーザーに決定行動を促したり、「詳細を見る」のように別ページへの遷移を促したりします。
- リンク（
<a href>）- ユーザーを別のURL、ページ内の要素、またはファイルに誘導するナビゲーション要素
- Ctrl（or⌘）キーを押しながらクリックすれば新規タブで遷移先のURLを開くことができる など
- ボタン（
<button type="button">）- クリックをトリガーしてコマンドを実行する
- 起動すると、フォームを送信したりダイアログを開いたりといった操作を実行する
なぜリンクボタンは良くないのか
リンクとボタンを区別したいときに見分けがつかない
ボタンとリンクでは、表示されるコンテキストメニューやキーボード操作の可否も変わるので、ユーザーが別タブで遷移先を開きたいときなどにリンクなのかボタンなのか直感的にわからないケースを避けるべきです。
アクセシビリティの低下
スクリーンリーダーやその他支援技術を使用しているユーザーは、ページ上の要素がリンクなのかボタンなのかを区別するために特定の規則(DOMツリーなど)に依存しているため、見た目とスクリーンリーダーが読み上げる内容が乖離していると混乱を招く可能性があります。
SmartHRのDesignSystemでも、リンクをボタンのようにみせるのは避けるべきだと書かれています。
リンク（a要素）をボタンのように見せるためのコンポーネントですが、どうしようもないときだけ使います。 アクションボタンとして表現したい場合は、素直にButtonを使いましょう。
https://smarthr.design/products/components/button/#h3-5
頑張って解決案を考えてみた
リンクボタンの問題が分かったので、次は解決策です。大事なのは、リンクをちゃんとリンクっぽく見せることだと考えています。
矢印や>などつける
下線や青文字にしたところで全体のデザインと調和しなかったらどうしようもないので、矢印や>をつけることでリンクが別のページやセクションへ導くことをシンプルに表現できると思います。
わかりやすい文言にする
周囲のコンテキストを必要とせずに、リンクテキストだけでリンクの目的を理解できるようにします。例えば、「...を見る」など、これ画面遷移しそうな予感がするな...という風に文言を工夫するのも一つの手だと思います。
上記のキャプチャはデジタル庁のサイトです。JIS規格に沿ったウェブアクセシビリティらしく、検証結果までちゃんと掲載されていて震えました。
リンクボタンのアンチパターン
ちょくちょく見かけるアンチパターンも載せておきます。
1.JavaScriptを使って遷移させる
<button onClick={() => {location.href = "link"}}>link</button>
<button onClick={() => {window.open("link")}}>link</button>
Chromeなどのウェブブラウザでは、a要素にカーソルを合わせると、そのリンクの遷移先URLがウィンドウの左下部分に表示されます。しかし、button要素の場合、ブラウザが直接的にその遷移先URLを把握できないため、このような動作はしません。
2.button要素をa要素でラップする
<a href="https://counterworks.co.jp/">
<button>link</button>
</a>
button要素はあくまで意匠としての役割で、クリックした後の挙動はa要素に委ねている状態になっています。一見良さそうに見えますが、a要素の中にbutton要素を持たせるのはHTMLの仕様として禁じられています。
Content model:
Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified. https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
最後に
リンクやボタンを扱う際に気をつけたいこととして紹介しました。情報やご意見お待ちしてます。
We are hiring!!!
COUNTERWORKS では一緒に働く仲間を絶賛募集中です。
今後の更なる成長のためには圧倒的に仲間が不足しています。皆さまのご応募お待ちしております！
参考文献
ポップアップストアや催事イベント向けの商業スペースを簡単に予約できる「SHOPCOUNTER」と商業施設向けリーシングDXシステム「SHOPCOUNTER Enterprise」を運営しています。エンジニア採用強化中ですので、興味ある方はお気軽にご連絡ください！ counterworks.co.jp/
Discussion