freee Accessibility Training

ボタン

Web アプリケーションにはボタンが必要不可欠です。静的な Web サイトでも、しばしばメニューボタンやアコーディオン、動画や画像をモーダルダイアログとして表示するボタンが配置されます。 こういったボタンも、アクセシビリティー上の問題のある実装になっている場合がしばしばあります。

正しく実装されたボタンは、以下のような条件を満たしています。

  • マウスポインターによる操作ができる
  • キーボードによる操作ができる
  • スクリーンリーダーで「ボタンであること」を知覚できる
  • スクリーンリーダーで「何のボタンであるか」を知覚できる
  • スクリーンリーダーによる操作ができる

以下の例も、マウスポインターだけでなく、キーボードやスクリーンリーダーによる操作を試してみてください。

<button> 要素で実装する

大事な原則として、クリックに反応するもの = ボタンを作る場合は、可能な限り <button> 要素を使用するようにしましょう。

良い例: <button> 要素を使用している

悪い例: <span> 要素を使用して、ボタン風の見た目にしている

<span> や <div> をボタンのように使うべきではありません。キーボードやスクリーンリーダーでの操作が不可能であり、スクリーンリーダーにはボタンであることも伝わりません。

送信

良い例: <span> 要素を使用して、ボタン風の見た目にし、ボタンの挙動をなるべく再現している

これはあまり良くない例です。 <button> 要素の使用を検討してください 。

既存の実装で <button> を使用しておらず、やむを得ない場合には、role tabIndex onKeyDown などを使い、誰もがボタンとして知覚し操作できる状態にしてください。

送信

関連するチェック

画像やアイコンのボタンには代替テキストをつける

Web アプリケーションではボタンに文字を表示せず、アイコンや画像を配置するのみとする場合が多くありますが、必ず代替テキストをつけてください。

特に「<button> 要素ではなく button ロールも持たず、代替テキストも持たないボタン」を freee 社内では 「虚空」 と呼んでいます。 虚空だらけの Web アプリケーションは、スクリーンリーダーでの操作が困難になります。

良い例: アイコンのボタンに aria-label による代替テキストがついている

悪い例: アイコンのボタンに代替テキストがない

<button> 要素による実装であるため、スクリーンリーダーではボタンであることを知覚できますが、何のボタンかを知覚できません。

悪い例: アイコンのボタンが <span> で実装されていて、代替テキストがない（虚空）

スクリーンリーダーでは、そこにボタン状のものが存在することすら認識することができません。

関連するチェック

アイコンの説明が重複しない

同じ意味のアイコンとテキストを並べて使用するときは、アイコンには代替テキストを設定しないようにします。代替テキストを設定していると、スクリーンリーダーには「編集 編集」「コピー コピー」「削除 削除」のように重複して読み上げられてしまいます。

良い例: 説明が重複しない

悪い例: 説明が重複する

関連するチェック

ボタンの状態がわかるようにする

「押されていない」状態と「押されている」状態のあるボタン（トグルボタン）は、視覚的な変化をつけるだけでなく、 aria-pressed を使用して、スクリーンリーダーなどの支援技術でも状態を読み取れるようにする必要があります。

良い例: aria-pressed を使って、トグルボタンの状態が表現されている

スクリーンリーダーで、 トグルボタンの「押されていません」「押されています」の状態を知覚できます。

悪い例: トグルボタンの状態は視覚的にしか表現されていない

スクリーンリーダーでは、ボタンがどういう状態かを知覚できません。

関連するチェック

開閉するボタン

「ハンバーガーメニュー」「アコーディオン」のように、ボタンにより開閉する（コンテンツの表示・非表示を切り替える）場所がある場合には、以下の点に注意が必要です。

  • スクリーンリーダーのような支援技術を使用しているユーザーにも、開閉の状態がわかるようにする
  • 非表示になっているコンテンツは、スクリーンリーダーに読み上げられたり、キーボードによるフォーカスを受け取らないようにする

良い例

この良い例では、

  • aria-haspopup="menu" を使用して、押すことでメニューが表示されるボタンであることを支援技術に伝えています
  • aria-expanded を使用して、メニューの開閉状態を支援技術に伝えています
  • aria-controls を使用して、開いたメニューがどこにあるのかを支援技術に伝えています（ただし、この属性を NVDA や VoiceOver はサポートしていません）
  • ボタンのアイコンにも「目次」という代替テキストをつけています
  • 非表示になっているコンテンツは、スクリーンリーダーに読み上げられたり、キーボードのフォーカスを受け取ったりしません

悪い例

この悪い例では、

  • スクリーンリーダー等の支援技術からは、メニューの開閉状態を認識することができません
  • ボタンのアイコンにに代替テキストがありません
  • 非表示になっているコンテンツは、スクリーンリーダーに読み上げられ、キーボードによるフォーカスを受け取ります

関連するチェック