CSSツールチップの7つの実装パターンをキーボード操作・閉じる機能・WCAG 1.4.13に照らして検証。CSS単独では解決できない理由と対策
シェアックリップ
シェアされたアックリップです。
そのほかの #キーボード操作 ピックアップ
モバイル表示で幅広いテーブルがページ横スクロールを引き起こす問題。テーブルをスクロール可能なコンテナで包み、キーボード利用者が操作できる実装方法を説明。
Webレター・パーソナルメッセージの品質保証フロー。コンテンツファースト、キーボード操作可能性、見出し構造の正確性、画像の代替テキスト、prefers-reduced-motion対応、音声の操作性を含むチェックリスト。
ポートフォリオサイトのアクセシビリティ監査。セマンティックHTML要素（header、nav、main）の採用、見出し階層の一貫性、キーボード操作を想定したリンク記述の改善を具体例で解説。
React で FAQ の答えを state でマウント解除する実装と、`<details>` 要素で常に DOM に保持する実装を比較。マウント解除すると find-in-page 検索が失敗し、トランジション不可になるほか、client component 化を強いる。ネイティブ実装なら同じ見た目でこれらの制約がない。
React Modal コンポーネント（oks-ui）の実装ガイド。role="dialog"・aria-modal="true"・accessible name・フォーカス管理・キーボード操作をカバー。複数ブラウザで動作確認済み。
固定フッターがキーボード操作のフォーカスを隠す問題の検証ツール。ResizeObserver で要素の高さを追跡し、WCAG 2.4.11 の達成基準を参考に改善方法を示す。
そのほかの #WCAG ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
WCAG 2.2 もくもく会 #13 ～ ガイドライン 4.1 互換性 ～
イベント 開催予定
WCAG 2.2 のガイドライン 4.1 互換性を読み合い、学んだことを共有する勉強会。毎月第3木曜日はオフライン交流会も開催される。
改正JIS X 8341-3とWCAG 2.1・2.2の追加基準26個を、アクセシビリティエキスパートが全3回で徹底解説するウェビナー。第2回は操作可能の達成基準を扱う。
EU域内でWebサービス・アプリを提供する企業が対応すべきアクセシビリティ関連法制（EAA・WAD・雇用平等指令）と、WCAG基づく実装方法、EU主要国の罰則・執行事例を解説。AI画面開発におけるアクセシビリティ要件化の必要性も論じる。
モバイル表示で幅広いテーブルがページ横スクロールを引き起こす問題。テーブルをスクロール可能なコンテナで包み、キーボード利用者が操作できる実装方法を説明。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
全国810大学を対象にウェブアクセシビリティを自動診断した大規模調査。99.1%に問題が検出。国立大学は画像の代替テキスト欠落、私立大学はUIの役割・キーボード操作の問題が多く、設置区分によって課題が異なることが明らかに。
minimalist-uiスキルのモーション規則をCSSに実装する具体的な方法。translateY・opacityアニメーション、時間差表示、cubic-bezierのタイミング関数、そしてprefers-reduced-motionへの対応を実装例で解説。
Webレター・パーソナルメッセージの品質保証フロー。コンテンツファースト、キーボード操作可能性、見出し構造の正確性、画像の代替テキスト、prefers-reduced-motion対応、音声の操作性を含むチェックリスト。
ポートフォリオサイトのアクセシビリティ監査。セマンティックHTML要素（header、nav、main）の採用、見出し階層の一貫性、キーボード操作を想定したリンク記述の改善を具体例で解説。
ウェブサイトの文字を拡大したときに、説明が隠れたり重なったりしていないか確認する方法を解説。設定の手順から、相談する際のメモの取り方まで、HP運営者向けの実践ガイド。