12周年記念パーティ開催! 2024/5/10(金) 19:00

実務で使う、ツールチップ実装

全4回

アクセシビリティを確保しながら、使いやすいツールチップを実装する方法を解説します。

最終回 ツールチップ実装における配慮

前回までで基本的なツールチップの実装を終えました。最終回はツールチップにおける禁じ手や、ライト・ダークモードや書字方向に配慮した応用的な実装を解説します。

第3回 Escキーで非表示にする機能の実装

Escキーでツールチップを非表示にする実装をします。その際、フォーカス枠が消えない問題があるので、その問題にも対処します。

第2回 アクセシビリティに配慮した実装のポイント

OSの視差設定に基づいたアニメーションのオン・オフを切り替え、ツールチップのテキストの選択や、読み上げにも配慮した実装を行います。

第1回 ツールチップの形、位置、表示の実装

ブラウザの標準機能以上のカスタマイズされたツールチップの実装について解説します。一定のアクセシビリティを確保しつつ、形、位置、表示などをCSSで実装します。