♿ なぜツールチップにアクセシビリティが重要なの？

ツールチップは、マウスを乗せた時だけ情報が表示されることが多いよね。でも、これだと…

• マウスを使わない（キーボードだけで操作する）人は、ツールチップを見ることができない。
• スクリーンリーダーを使っている人は、ツールチップが表示されても、その情報が読み上げられないかもしれない。

これじゃあ、せっかくの補足情報が一部の人にしか伝わらないことになっちゃう。だから、ツールチップを作るときは「どうすればみんながこの情報にアクセスできるかな？」と考えることがとっても大切なんだ。

⌨️ キーボード操作への対応

マウスを使わない人のために、キーボードのTabキーでツールチップのトリガー要素に移動（フォーカス）したときにも、ツールチップが表示されるようにしよう。

これには、JavaScriptでfocus（フォーカスが当たった時）イベントとblur（フォーカスが外れた時）イベントを監視して、ツールチップの表示・非表示を切り替えるようにするんだ。

もし、ツールチップのトリガーが普通のテキスト（<span>など）のように、元々キーボードでフォーカスできない要素の場合は、HTML属性のtabindex="0"を付けてあげると、キーボードでフォーカスできるようになるよ。（リンクやボタンのような元々フォーカスできる要素には不要だよ）

<!-- キーボードでフォーカスできるように tabindex="0" を追加 -->
<span class="trigger-accessible" tabindex="0" data-tooltip-id="tooltip1">キーボード対応トリガー</span>
<div id="tooltip1" role="tooltip" style="display:none;">これはキーボードでも表示できるツールチップです。</div>

const triggers = document.querySelectorAll('.trigger-accessible');
const tooltipContainer = document.getElementById('accessible-tooltip-container'); // ツールチップ表示用の共通コンテナ

triggers.forEach(trigger => {
  const tooltipId = trigger.dataset.tooltipId; // HTML側で対応するツールチップのIDを指定しておく
  const actualTooltipContentElement = document.getElementById(tooltipId);

  trigger.addEventListener('focus', () => {
    if (actualTooltipContentElement) {
      showAccessibleTooltip(trigger, actualTooltipContentElement.textContent);
    }
  });
  trigger.addEventListener('blur', () => {
    hideAccessibleTooltip();
  });
  // マウスイベントも同様に追加（前ページ参照）
  trigger.addEventListener('mouseover', () => { /* ... */ });
  trigger.addEventListener('mouseout', () => { /* ... */ });
});

function showAccessibleTooltip(triggerElement, text) {
  tooltipContainer.textContent = text;
  tooltipContainer.classList.add('visible');
  // 位置調整のロジック (トリガー要素の下に表示する例)
  const triggerRect = triggerElement.getBoundingClientRect();
  tooltipContainer.style.left = triggerRect.left + window.scrollX + 'px';
  tooltipContainer.style.top = triggerRect.bottom + window.scrollY + 5 + 'px'; // 5px下に
}
function hideAccessibleTooltip() {
  tooltipContainer.classList.remove('visible');
}

上のJavaScriptの例では、showAccessibleTooltip と hideAccessibleTooltip という関数で表示・非表示を管理しているよ。実際のツールチップの内容は、トリガー要素とは別の場所に用意しておいて、それを表示するイメージだね。

🗣️ スクリーンリーダーへの対応 (ARIA属性の活用)

スクリーンリーダーは、ウェブページの内容を音声で読み上げてくれるソフトだ。このスクリーンリーダーに、ツールチップの情報をちゃんと伝えてあげる必要があるんだ。

そこで役立つのが「ARIA（アリアと読む）属性」という特別なHTML属性だよ。ARIAは「Accessible Rich Internet Applications」の略で、ウェブアプリケーションのアクセシビリティを高めるための仕様なんだ。

1. role="tooltip"

まず、ツールチップとして機能するHTML要素（ツールチップのテキストが入っている箱）には、role="tooltip" を指定する。これは「この要素はツールチップですよ」とスクリーンリーダーに教える役割があるんだ。

2. aria-describedby

次に、ツールチップのトリガーとなる要素と、その説明をしているツールチップ本体の要素を関連付けるために、aria-describedby属性を使うよ。

1. ツールチップ本体の要素に、ユニークなid属性を付ける（例: id="my-tooltip-content"）。
2. トリガー要素に、aria-describedby="my-tooltip-content" のように、ツールチップ本体のidを指定する。

こうすることで、スクリーンリーダーは「このトリガー要素の説明は、IDがmy-tooltip-contentの要素に書かれていますよ」と理解して、適切に情報を読み上げてくれるようになるんだ。

<button class="trigger-accessible" aria-describedby="tooltip-desc-1">保存ボタン</button>
<div id="tooltip-desc-1" role="tooltip" style="display: none;">
  クリックすると現在の内容を保存します。この操作は取り消せません。
</div>

<a href="#" class="trigger-accessible" aria-describedby="tooltip-link-desc">詳細情報</a>
<div id="tooltip-link-desc" role="tooltip" class="visually-hidden">
  <!-- .visually-hidden はCSSで画面上は見えなくするが、スクリーンリーダーは読むスタイル -->
  このリンクは新しいウィンドウで開きます。
</div>

上の例の.visually-hiddenは、CSSを使って画面上では要素を非表示にしつつ、スクリーンリーダーからは読み取れるようにするテクニックで使われるクラス名だよ。ツールチップの表示/非表示をJavaScriptで制御する場合、ツールチップ本体はdisplay:noneやvisibility:hiddenで隠すことが多いけど、ARIAで関連付けられていれば、スクリーンリーダーはトリガーにフォーカスした際にaria-describedbyで指定された内容を読み上げてくれることがあるんだ。

JavaScriptで動的にツールチップを表示する場合、ツールチップコンテナのidをaria-describedbyに設定し、ツールチップが表示された時にそのコンテナの内容が読み上げられるようにするんだ。

💡 その他の大切なポイント

• 情報は簡潔に: ツールチップは短い補足情報のためのもの。長文にならないように気をつけよう。
• 重要な情報はツールチップだけに頼らない: 本当に大切な情報は、常にページ上で見えるようにするか、他の方法でも伝えられるようにしよう。ツールチップは見逃される可能性もあるからね。
• クリック/タップでも表示: マウスホバーだけでなく、クリックやタップでもツールチップを表示できるようにすると、タッチデバイスのユーザーや、ホバー操作が苦手な人にも優しくなるよ。
• 十分な表示時間: ツールチップが表示されても、すぐに消えてしまったら読めないよね。ユーザーが内容を読むのに十分な時間、表示されるようにしよう。JavaScriptで制御する場合は、mouseoutやblurですぐに消すのではなく、少し遅延させるなどの工夫もできる。
• ツールチップの上にマウスを乗せられるように (必要な場合): もしツールチップの中にリンクなどの操作可能な要素を入れたい場合は、ツールチップ自体の上にマウスカーソルを移動させても消えないようにする工夫が必要だよ（これは少し高度なテクニックになる）。
• Escキーで非表示: ユーザーが意図的にツールチップを非表示にできるよう、Escキーを押したら非表示になる機能を追加するのも親切だね。

✨ アクセシブルなツールチップのデモ

これまでのポイントを踏まえて、キーボード操作とARIA属性に対応したツールチップのデモを見てみよう。下の「設定オプション」というテキストに、Tabキーでフォーカスを当てたり、マウスを乗せたりしてみてね。

まとめ

今回は、ツールチップをみんなにとって使いやすくするための「アクセシビリティ」について学んだね。

• キーボード操作（focus, blurイベント）に対応することが大切。
• スクリーンリーダーのために、ARIA属性（特にrole="tooltip"やaria-describedby）を活用しよう。
• 情報は簡潔に、そしてツールチップだけに頼らないように。
• 表示時間や非表示の方法もユーザーに優しく。

アクセシビリティは、特別な誰かのためだけじゃなく、ウェブサイトを使う全ての人に関わる大切な考え方だよ。ちょっとした工夫で、君の作るツールチップはもっと多くの人に役立つようになるはずだ！

さて、これでツールチップに関する基本的な内容は一通り学んだね。次のページでは、この第2章「ツールチップ」で学んだことをおさらいして、関連する英単語もまとめてチェックしよう！