CSS A11y テクニック デモ

CSSアクセシビリティ改善テクニック
インタラクティブデモ

prefers-contrast / scroll-margin-top / order プロパティの動作を確認できます

1. prefers-contrast — ハイコントラストモード対応

prefers-contrast: more メディア特性を使うと、OSのハイコントラスト設定を検知してスタイルを強化できます。下のトグルでシミュレーションできます。

（実際のOS設定も反映されます）

現在のカラー変数

--color-text --color-bg --color-border --color-link

フォーム要素のコントラスト確認

DEMO

テキストスタイルの確認

DEMO

通常のテキストです。イタリック体のテキストはハイコントラストモードで太字になります。

小さいテキスト（small要素）も太字に強化されます。

リンクテキストの色もより識別しやすい色に変更されます。

テキスト選択時の text-shadow 無効化

DEMO

このテキストを選択してみてください。通常モードでは text-shadow が適用されていますが、ハイコントラストモードでは無効化されます。

適用されるCSS

:root { --color-text: #555555; --color-bg: #ffffff; --color-border: #dddddd; --color-link: #1a73e8; } /* ハイコントラストモード時のスタイル調整 */ @media (prefers-contrast: more) { :root { --color-text: #000000; --color-bg: #ffffff; --color-border: #000000; --color-link: #0000ee; } ::placeholder { color: rgba(0, 0, 0, 0.8); opacity: 1; } [disabled] { color: rgba(0, 0, 0, 0.7); } ::selection { text-shadow: none; } em, i, small { font-weight: bold; } }

prefers-contrast の値一覧

値説明
no-preferenceユーザーが特に設定を行っていない状態（デフォルト）
moreより高いコントラストを希望している状態
lessより低いコントラストを希望している状態
custom特定のカラーパレットを指定している状態
💡 ポイント: prefers-contrast はあくまでユーザーの設定を検知するためのものです。まずはデフォルトのスタイルで十分なコントラスト比を確保することが最も大切です。

2. scroll-margin-top — 固定ヘッダーでのアンカーリンク対応

固定ヘッダーがあるページでアンカーリンクをクリックすると、コンテンツがヘッダーの下に隠れてしまう問題を scroll-margin-top で解決できます。

✅ このページで体験: 上部ナビゲーションのリンク（コントラスト / スクロール / order）をクリックすると、ヘッダーの下に余白を確保した状態でスクロールされます。

適用されるCSS

/* スクロールコンテナ（html）に一括設定 */ html { scroll-padding-top: calc(var(--header-height) + 20px); } /* または個別の要素に設定 */ [id] { scroll-margin-top: calc(var(--header-height) + 20px); }

scroll-margin-top と scroll-padding-top の違い

プロパティ適用先用途
scroll-margin-top スクロール先の子要素 個別のアンカーターゲットごとにオフセットを調整
scroll-padding-top スクロールコンテナ（親要素） すべてのスクロール先に一括でオフセットを設定

レスポンシブ対応

:root { --header-height: 56px; } @media (min-width: 768px) { :root { --header-height: 72px; } } html { scroll-padding-top: calc(var(--header-height) + 16px); }

アンカーターゲット A

このセクションにはアンカーリンクでジャンプできます。ヘッダーの下に隠れずに表示されていることを確認してください。

DEMO

以下のリンクをクリックして、各ターゲットにジャンプしてみましょう：

→ ターゲット A　 → ターゲット B　 → ターゲット C

アンカーターゲット B

scroll-margin-top が設定されているため、ヘッダー分のオフセットが自動的に確保されます。キーボードナビゲーションやスクリーンリーダーの利用者にとっても、現在位置が明確になります。

アンカーターゲット C

従来の padding-top + margin-top（負の値）による方法と異なり、レイアウトへの副作用がありません。

3. order プロパティ — 視覚順序とDOM順序の注意点

CSSの order プロパティで視覚的な並び順を変更すると、キーボードのTab移動順序やスクリーンリーダーの読み上げ順序と一致しなくなる場合があります。

❌ orderで並べ替えた場合（問題あり）

DEMO — Tabキーで移動してみてください

視覚的な順序: ブログ → 会社概要 → ニュース
Tab移動順序: ニュース → ブログ → 会社概要（HTML記述順）

DOM順序 1ニュース DOM順序 2ブログ DOM順序 3会社概要

✅ HTMLの順序を視覚的な順序に合わせた場合（推奨）

DEMO — Tabキーで移動してみてください

視覚的な順序もTab移動順序も: ブログ → 会社概要 → ニュース

DOM順序 1ブログ DOM順序 2会社概要 DOM順序 3ニュース

注意が必要なCSSプロパティ

プロパティずれが起こるケース
orderFlex / Grid アイテムの表示順を変更した場合
flex-direction: row-reverseFlexアイテムの並び順が逆になる場合
grid-row / grid-columnGrid アイテムを明示的に配置した場合
position: absolute / fixed要素を通常のフローから外して配置した場合

Chrome 137以降の新機能: reading-flow

.card-list { display: flex; reading-flow: flex-visual; /* 視覚的な順序に合わせてフォーカス順序を変更 */ }
⚠️ 注意: reading-flow は2026年3月時点では Chrome 137以降のみの対応です。他のブラウザではまだサポートされていないため、本番環境での利用にはブラウザ対応状況の確認が必要です。