ツールチップの実装：ホバーとフォーカスでアクセシブルな情報を提供

ツールチップは、ユーザーが要素にマウスポインターをホバーさせるか、フォーカスを当てたときに表示される、文脈に応じた小さなヘルプメッセージです。追加情報を提供したり、要素の目的を明確にしたり、機能の使用方法に関するヒントを提供したりできます。しかし、ツールチップは正しく実装されないと、容易にアクセシビリティの悪夢となり得ます。このガイドでは、障がいを持つユーザーを含むすべての人が利用できるツールチップを作成するためのベストプラクティスを概説します。

ツールチップにおけるアクセシビリティの重要性

アクセシビリティは単なるコンプライアンス遵守だけでなく、すべての人にとってより良いユーザーエクスペリエンスを創出することです。ツールチップがアクセシブルでない場合、スクリーンリーダー、キーボードナビゲーション、音声入力などの支援技術に依存するユーザーを排除する可能性があります。以下のシナリオを考えてみてください：

• スクリーンリーダーのユーザー： ツールチップが適切にマークアップされていない場合、スクリーンリーダーはその存在や内容を読み上げない可能性があります。
• キーボードユーザー： ツールチップがホバー時にしか表示されない場合、キーボードユーザーはそれにアクセスできません。
• 運動障がいのあるユーザー： ホバー操作に必要な正確なマウスの動きは、困難または不可能な場合があります。
• 認知障がいのあるユーザー： タイミングが悪かったり、紛らわしいツールチップは、フラストレーションを引き起こし、理解を妨げる可能性があります。

アクセシビリティのベストプラクティスに従うことで、ツールチップがすべての人のユーザーエクスペリエンスを妨げるのではなく、向上させることを保証できます。

アクセシブルなツールチップの主要原則

以下の原則は、アクセシブルなツールチップを作成するために不可欠です：

1. 代替アクセス手段の提供： ツールチップがホバーとキーボードフォーカスの両方でアクセスできるようにする。
2. ARIA属性の使用： ARIA（Accessible Rich Internet Applications）属性を使用して、支援技術に対してツールチップを適切に識別し、説明する。
3. フォーカスの管理： ツールチップが表示・非表示になるときのフォーカスの移動先を制御する。
4. 十分なコントラストの確保： ツールチップのテキストと背景の間に十分な色のコントラストを提供する。
5. 十分な時間の確保： ユーザーがツールチップの内容を読むのに十分な時間を与える。
6. 非表示にできるようにする： ツールチップを非表示にする明確な方法を提供する。
7. 過度な使用を避ける： ツールチップは控えめに、必要な場合にのみ使用する。

実装テクニック

1. ホバーとフォーカスの使用

アクセシブルなツールチップの最も重要な側面は、マウスユーザーとキーボードユーザーの両方がアクセスできるようにすることです。これは、ツールチップがホバー時と要素がフォーカスを受け取ったときの両方で表示されるべきであることを意味します。

HTML：

<a href="#" aria-describedby="tooltip-example">Example Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">This is an example tooltip.</div>

CSS：

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* ツールチップが最前面に来るようにする */
}

説明：

• aria-describedby： この属性は、リンクとそのIDを使用してツールチップ要素を関連付けます。これにより、支援技術に対して、ツールチップがリンクに関する追加情報を提供することを伝えます。
• role="tooltip"： このARIAロールは、要素がツールチップであることを識別します。
• CSSは隣接兄弟セレクタ（+）を使用して、リンクがホバーされるかフォーカスされたときにツールチップを表示します。

JavaScript（高度な制御 - オプション）：

CSSは単純な表示/非表示を処理できますが、JavaScriptを使用すると、特にツールチップが動的に生成される場合や、より複雑な動作が必要な場合に、より堅牢な制御が可能になります。

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. ARIA属性の使用

ARIA属性は、支援技術に意味的な情報を提供するために不可欠です。以下に主要な属性の内訳を示します：

• aria-describedby： 前述の通り、この属性はトリガーとなる要素とツールチップ要素との間の関係を確立します。
• role="tooltip"： この属性は、要素を明確にツールチップとして定義します。
• aria-hidden="true"/aria-hidden="false"： これらを使用して、ツールチップが現在、支援技術に対して可視であるかどうかを示します。ツールチップが非表示の場合はaria-hidden="true"を設定します。表示されている場合はaria-hidden="false"を設定します。これは、特にJavaScriptを使用してツールチップの可視性を制御する場合に重要です。

例：

<button aria-describedby="help-tooltip">Submit</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Click here to submit the form.</div>

JavaScript（aria-hidden用）：

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. フォーカスの管理

ツールチップが表示されたとき、一般的にはトリガーとなった要素からフォーカスを奪うべきでは*ありません*。フォーカスは、ツールチップをトリガーした要素にとどまるべきです。これにより、キーボードユーザーが予期しない中断なしにページのナビゲーションを続けることができます。

しかし、特にツールチップにインタラクティブな要素（リンクやボタンなど）が含まれている場合、フォーカスをツールチップに移動させたい状況があるかもしれません。この場合、以下の点を確認してください：

• ツールチップがフォーカスを持っていることを示すために、視覚的に区別されていること。
• 元のトリガー要素にフォーカスを戻す明確な方法があること（例：ツールチップ内の閉じるボタン）。

ほとんどの場合、シンプルさと使いやすさの観点から、ツールチップ内でのフォーカス管理を避けることが推奨されます。

4. 十分なコントラストの確保

色のコントラストは読みやすさにとって非常に重要です。ツールチップのテキスト色が背景色に対して十分なコントラストを持っていることを確認してください。ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）では、通常テキストには少なくとも4.5:1、大きなテキスト（18ptまたは14ptボールド）には3:1のコントラスト比を推奨しています。

オンラインのコントラストチェッカーを使用して、色の選択がアクセシビリティ基準を満たしているか確認してください。コントラストチェッカーの例は以下の通りです：

• WebAIM Contrast Checker： https://webaim.org/resources/contrastchecker/
• Coolors： https://coolors.co/contrast-checker

例（良好なコントラスト）：

.tooltip {
  background-color: #000;
  color: #fff;
}

例（不十分なコントラスト）：

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. 十分な時間の確保

ユーザーはツールチップの内容を読むのに十分な時間が必要です。すぐに消えてしまうツールチップは避けてください。魔法の数字はありませんが、最低でも数秒の表示時間を目指してください。また、ユーザーがトリガー要素にホバーしているか、フォーカスを当てている限り、ツールチップは表示され続けるべきです。他のイベントによってツールチップを閉じる必要がある場合は、ツールチップが閉じることを示すインジケーターを提供してください。

ツールチップの内容が長い場合は、ユーザーが手動でツールチップを閉じられる方法（例：閉じるボタンやEscapeキーを押すなど）を提供することを検討してください。

6. 非表示にできるようにする

ツールチップは、ユーザーがマウスを離したりフォーカスを外したりすると自動的に消えることが多いですが、特に長いツールチップやインタラクティブな要素を含むツールチップについては、手動で非表示にする明確な方法を提供することが良い習慣です。

ツールチップを非表示にする方法：

• 閉じるボタン： ツールチップ内に視覚的に目立つ閉じるボタンを含める。
• Escapeキー： ユーザーがEscapeキーを押してツールチップを非表示にできるようにする。
• 外部をクリック： ユーザーがツールチップとトリガー要素以外の場所をクリックしたときにツールチップを非表示にする。（中断を招く可能性があるため、注意して使用してください）。

例（閉じるボタン）：

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  This is my tooltip content.
  <button onclick="hideTooltip()">閉じる</button>
</div>

例（Escapeキー）：

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // 実際のツールチップを隠す関数に置き換えてください
  }
});

7. 過度な使用を避ける

ツールチップは控えめに、本当に役立つ情報を提供する場合にのみ使用すべきです。ツールチップを使いすぎると、インターフェースが乱雑になり、ユーザーの注意を散漫にし、不快な体験を生み出す可能性があります。

ツールチップの代替案：

• 明確なラベル： フォームフィールド、ボタン、リンクには明確で説明的なラベルを使用する。
• 文脈ヘルプ： 関連する要素の近くのインターフェース内に直接ヘルプテキストを提供する。
• ヘルプドキュメント： より複雑な機能については、包括的なヘルプドキュメントへのリンクを設置する。

高度な考慮事項

動的コンテンツ

ツールチップのコンテンツが動的に生成される場合（例：APIから読み込まれる、ユーザー入力に基づいて更新される）、aria-describedby属性とツールチップの可視性がそれに応じて更新されるようにしてください。これらの更新を管理するにはJavaScriptを使用します。

配置

ツールチップの配置を慎重に検討してください。重要なコンテンツを覆い隠したり、レイアウトシフトを引き起こしたりするような配置は避けてください。さまざまな画面サイズや解像度に注意し、CSSを使用してツールチップが常にビューポート内に表示されるようにしてください。

モバイルデバイス

ツールチップは伝統的にホバー操作に依存していますが、これはタッチベースのデバイスでは利用できません。モバイルデバイスでは、次のような代替の操作方法を検討してください：

• タップ： ユーザーが要素をタップしたときにツールチップを表示する。
• 長押し： ユーザーが要素を長押ししたときにツールチップを表示する。
• フォーカス時に表示： 要素がフォーカスを受け取ったときに表示する。これはJavaScriptでタッチサポートを確認し（例：('ontouchstart' in window)）、それに応じて表示動作を変更することで実現できます。

ツールチップのテスト

ツールチップを徹底的にテストし、すべてのユーザーがアクセスできることを確認してください。手動テストと自動アクセシビリティテストツールを組み合わせて使用します。

テスト方法：

• キーボードナビゲーション： キーボードを使用してツールチップにアクセスできることを確認する。
• スクリーンリーダーテスト： スクリーンリーダーを使用して、ツールチップが適切に読み上げられることを確認する。
• 色のコントラスト分析： 色のコントラストチェッカーを使用して、十分なコントラストを確認する。
• モバイルテスト： さまざまなモバイルデバイスや画面サイズでツールチップをテストする。
• 自動アクセシビリティテスト： axe DevTools、WAVE、Lighthouseなどのツールを使用して、潜在的なアクセシビリティの問題を特定する。

国際化（i18n）と地域化（l10n）

グローバルなオーディエンス向けにツールチップを開発する際は、国際化と地域化を念頭に置いてください：

• テキストの方向： 左から右（LTR）と右から左（RTL）の両方のテキスト方向をサポートする。レイアウトには物理的なプロパティ（例：margin-left、margin-right）の代わりに、CSSの論理プロパティ（例：margin-inline-start、margin-inline-end）を使用する。
• 言語固有の翻訳： さまざまな言語向けにツールチップのコンテンツの翻訳を提供する。
• 日付と時刻の形式： ユーザーのロケールに合わせて日付と時刻の形式を適応させる。
• 数値の形式： さまざまな地域に適した数値形式（例：小数点の区切り文字、千の位の区切り文字）を使用する。

結論

アクセシブルなツールチップの実装には、慎重な計画と細部への注意が必要です。このガイドで概説した原則とテクニックに従うことで、能力に関わらずすべての人が利用できるツールチップを作成できます。アクセシビリティは継続的なプロセスであることを忘れずに、すべてのユーザーのニーズを満たすためにツールチップのテストと改良を続けてください。

リソース

• ARIA オーサリング・プラクティス・ガイド (APG) - ツールチップ
• ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.1
• MDN Web Docs - ARIA