/* * accessibility.css * * Issue #35 (WCAG 2.1 AA アクセシビリティ) / #32 (レスポンシブ・モバイル44pxタッチターゲット) * / #34 (LCP/CLS最適化) の共通スタイルを一元化したプレーンCSS。 * * 取り込み方: * Propshaft が app/assets/stylesheets/ 配下を配信するため、この * ファイルは論理名 "accessibility" として参照できる。 * レイアウトの に下記を追記する(integration_notes 参照): * <%= stylesheet_link_tag :accessibility, "data-turbo-track": "reload" %> * ※Tailwind のビルド(builds/tailwind.css)とは独立した素のCSSとして読み込む。 * Tailwind v4 の生成物より後段で読み込むことで、focus-visible 等の * 上書きが安定して効く(CSSカスケード順)。 * * 設計方針: * - 既存デザイン(slate / sky)を壊さない最小の上乗せ。色は Tailwind の slate/sky 系に合わせる。 * - Tailwind のユーティリティが付いていない要素にも効くよう、ベース要素にも保険をかける。 * - prefers-reduced-motion / prefers-contrast / forced-colors に配慮。 */ /* ========================================================================= * (B) #35: フォーカスリング(キーボード操作の可視化) * マウス操作では出さず、キーボード(:focus-visible)時のみ明確なリングを出す。 * sky-600 相当(#0284c7 近似)を採用し、コントラストを確保。 * ========================================================================= */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="link"], [role="tab"], [role="menuitem"]):focus-visible { outline: 3px solid #0369a1; /* sky-700 相当: 背景白でAAコントラスト確保 */ outline-offset: 2px; border-radius: 4px; } /* :focus-visible 非対応(古い)環境向けフォールバック。 対応ブラウザでは下の @supports で打ち消し、マウスフォーカスのリングを抑止する。 */ :where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: 3px solid #0369a1; outline-offset: 2px; } @supports selector(:focus-visible) { :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; } } /* ========================================================================= * (B) #35: skip-to-content(本文へスキップ)リンク * キーボード/スクリーンリーダー利用者が反復するナビをスキップできるようにする。 * 通常は視覚的に隠し、フォーカス時に左上へ出現させる。 * レイアウトに