WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

最近、社内でSEOや正しいマークアップについて改めて学び直そうという動きがありました。

結構見落としがち、軽視しがちな部分ではあるのかもしれませんが、ホームページ制作の基本であり、重要なところです。
その中でも今回はボタンのマークアップにフォーカスしてご紹介できればと思います。

ボタンを実装する際にはどんなことに気を付けないといけないのかについて少しではありますが触れていきたいと思います。

はじめに

はじめにですが、どうして適切なマークアップをしないといけないのかを簡単に説明したいと思います。

• 検索エンジンは「意味のある HTML」を好む

buttonタグを使えば、Googleは「これはボタンだ」と理解できます。 でも、div class=”button”だと、検索エンジンにとってはただの装飾要素にしか見えないのです。

• 正しいマークアップをすることでGoogle からの信頼が得られる
  

セマンティック（意味のある）HTMLにすることでこのサイトはちゃんと作られたサイトなんだとGoogleに認識してもらえます。反対にdivやspanが多いサイトは適当に作られたサイトと思われる可能性があります。

• アクセシビリティが高い→ユーザー体験が良い→SEO評価も上がる。

・キーボードで操作できる → マウスを使えない人も利用できる

・スクリーンリーダーが読み上げる → 視覚にハンディキャップがある方も利用できる

・直感的に操作できる → すべてのユーザーにとって使いやすい

このように、多くのユーザーにとって使いやすいサイトは、Googleからも高く評価されます。

• AIや検索エンジンにとっても優しい構造になるから

これからの時代、AIがWebサイトを正しく理解することがますます重要になります。

いわゆるAIフレンドリーというやつですね。

ChatGPTやGoogleのAI検索は、セマンティックなHTMLを頼りにサイトの内容を理解しています。

適切にマークアップをすることで、検索エンジンが理解しやすく、AIが正確に情報を抽出できるようになります。

検索結果のリッチスニペットに表示されるようになったり、音声検索にも対応できるようになります。

メリットいっぱいですね。

そのため、「ボタンなんて<div>でも<button>でも見た目が同じなら問題ない。」と思っていてはだめです。見た目だけではなく、その裏側にある構造や意味を理解して構築することが重要なんです。

フォーカススタイル（:focus-visible）

マウスを使うことができない方、PCの画面が見えない人にとって、キーボードでサイトを操作して今どこにフォーカスされているのかがわかることがとても重要です。

フォーカスされていないと、どこを操作しているかわからない・ナビゲーションが困難になるため、サイトの離脱につながりかねません。

それを避けるために、:focus-visibleを使います。

:focus-visibleはその名の通り、今どこにフォーカスされているかを可視化するためのものです。

似たようなものに:focusがありますが、これを使うとマウスでクリックした時にも効いてしまい、ボタンに枠などが付いてしまいます。正直ダサいですよね。

なのでこちらは使いません。

方法	マウスクリック時	キーボード操作時
:focus	表示される	表示される
:focus-visible	表示されない	表示される

↑こんなイメージです。マウスクリックの時にfocusって要らないと思うので、:focus-visibleが最適解になります。

button:focus-visible {
  outline: 2px solid blue;
}

a:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

↑実装例です。これで多くの人にとって優しいサイトになるわけです。今回は色はブルーを使っていますが、サイトのカラーに合う色をセレクトすればベターですね。

divでボタンなどを実装しない

インタラクティブ要素（リンクやボタン、フォームなどのユーザーが操作できる要素）はdivやspanなどの意味を持たない要素で作ってはいけません。

もしdivやspanでボタンを作ってしまうと

1. Enterキーで押せない（マウスクリックしか反応しない）
2. Tabキーで移動できない（キーボード操作の対象外）
3. スクリーンリーダーが「ボタン」と認識しない（「テキスト」としか読まない）
4. スペースキーで押せない（本来ボタンはスペースキーでも押せる）

つまり、見た目はボタンだけど、中身は全然ボタンじゃないものが出来上がってしまいます。

ボタンやリンクをdivで作ってしまうことはあまりないのかなと思いますが、気を付けたいのがハンバーガーメニューですね。結構やっちゃいそうです。

要注意ですね。

ARIA属性の活用

ARIA属性とは、スクリーンリーダー（視覚障害者が使用する読み上げソフト）に追加情報を伝えるための属性です。

簡単に言うと、「目で見れば分かるけど、耳で聞いても分かるようにする」ための補助情報ですね。

例えば、ボタンの要素がアイコンだけの場合はARIA属性を使って情報伝達すべきですし、開閉するアコーディオンなどでは現在の閉じているか開いているかのステータスを正確に伝えるべきですし、ハンバーガーメニューもきちんと情報を伝えるべきですね。

それぞれ例を挙げていきます。

↓アイコンのみのボタン。アイコンのみのボタンでも何の機能があるボタンなのかわかります。

<button aria-label="閉じる">
  <i class="icon-close"></i>
</button>

↓アコーディオン

aria-expanded=”false” → 「メニューは閉じている」、

逆に、aria-expanded=”true” → 「メニューは開いている」です。

aria-controls=”menu” → 「menuを制御している」です。わかりやすく言えば、「このボタンを押すと、どこが変化するか」ですね。

アコーディオンが現在閉じているのか開いているのかを伝えるのは重要なのでしっかり伝えていきましょう。

<button 
  aria-expanded="false" 
  aria-controls="menu"
  onclick="toggleMenu()">
  メニュー
</button>

↓ハンバーガーメニュー

サイトの大事な導線なのでしっかりと伝えたいですね。

<button 
  class="hamburger"
  aria-label="メニュー"
  aria-controls="menu"
  aria-expanded="false"
  onclick="toggleMenu()">
  ☰
</button>

まとめ

見た目が綺麗なだけのサイトを作ってはいけないですね。

すべてのユーザーにとって使いやすいサイトでなくてはいけません。

まだまだ知らないこと、網羅できていないことがたくさんあると思います。今後も学び続けて、社内にも共有していきたいと思います。
セマンティックな構造のサイトを作り、人間にも検索エンジンにもAIにもフレンドリーなサイトを作っていきましょう。