【CSS】アクセシビリティに関係するCSSプロパティ

State of CSS 2022 を眺めていてアクセシビリティに関する知らなかったことを調べた

color-schme

ライトテーマとダークテーマを切り替えるプロパティ developer.mozilla.org

その要素が両方サポートする場合以下のようにし、

color-scheme: light dark;

ライトテーマだけにする場合は以下にする

color-scheme: light;

そして、ダークテーマだけにする場合は以下にする

color-scheme: dark;

これは要素ごとに指定できるので、ページのある部分だけライトとダークを別のテーマにすることができる

prefers-contrast

視覚障害のあるユーザーが背景色と文字色等とのコントラストを設定で切り替えている場合に、それに応じたスタイルを切り替えるためのプロパティ

developer.mozilla.org

以下のようにして使う

.contrast {
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}

forced-colors-adjust

ハイコントラストモードにしている場合、CSSで色を変えても黒色にしか表示されないが

forced-colors-adjustは強制的に色を指定することができるプロパティ

developer.mozilla.org

forced-color-adjust: none;

:focus-visible

フォーカスされた要素のスタイルを定義するプロパティ

developer.mozilla.org

フォーカス時の青い枠線の色を変えたい時に使えそう

input:focus-visible {
    outline: 2px solid crimson;
    border-radius: 3px;
}

select:focus-visible {
    border: 2px dashed crimson;
    border-radius: 3px;
    outline: none;
}