State of CSS 2022に見るアクセシビリティ関連機能

1.9K Views

March 03, 23

スライド概要

2023年3月1日に開催されたオンラインイベント「TechFeed Experts Night#14」で、セッション「State of CSS 2022に見るアクセシビリティ関連機能」に使用したスライドです。

profile-image

株式会社ミツエーリンクスのドキュメント共有です。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

State of CSS 2022に見る アクセシビリティ関連機能 2023年3月1日 TechFeed Experts Night#14 株式会社ミツエーリンクス 木達 一仁

2.

木達 一仁 • 株式会社ミツエーリンクス 取締役(CTO) • 主にマークアップやスタイルシートの設計、 関連ガイドラインの策定・運用に従事 •ウェブアクセシビリティ基盤委員会 (WAIC) 作業部会1 作業協力者 •Advanced Publishing Laboratory アクセシビリティWG リーダー

3.

The State of CSS 2022 https://2022.stateofcss.com/en-US/

4.

State of CSSとは •開発者を対象としたCSSに関するアンケート調査 State of JavaScriptの成功を受けてスタート • •2019年から毎年実施、2022年で4度目 現状把握や将来予測の手助けとなることを期待 • •2022年版では世界中から14,310件の回答を集計 回答期間は2022年10月1日〜11月1日 • •日本からの回答は0.7%

5.

The State of CSS 2022: Accessibility https://2022.stateofcss.com/en-US/features/accessibility/

6.

State of CSSにおける Accessibility •「Features」のいち項目 2021年版で初めて登場 • •2022年版では8項目を掲載 2021年版の7項目から増加 • •アクセシビリティの範疇か?微妙な項目も…… 認知度の低さランキングで高いものから順に紹介 •

7.

第8位:prefers-color-scheme •聞いたことがない率:27.2% メディア特性の一種(仕様) • •値は light または dark システムのカラーテーマの選好に対応できる • •いわゆるダークモードの普及に伴いブレイク システムに合わせるだけではなくユーザーが選択 • できるとベター

8.

prefers-color-scheme media query | Can I use... https://caniuse.com/prefers-color-scheme

9.

第7位:prefers-reduced-motion •聞いたことがない率:30.6% メディア特性の一種(仕様) • •値は no-preference または reduce アニメーションなどの動きに対する選好に対応できる • •前庭障害のユーザー向けに動きを抑制 目眩や吐き気などを引き起こすリスクを低減できる • •完全に動きを無くすべきかは要検討

10.

prefers-reduced-motion media query | Can I use... https://caniuse.com/prefers-reduced-motion

11.

第6位::focus-visible •聞いたことがない率:37% 擬似クラスの一種(仕様) • •フォーカスされた要素または疑似要素に該当し、なおかつユー ザーエージェント(UA)がフォーカスを明示すべきと判断した 場合に適用 • ユーザーの入力方法に応じたフォーカス表示が可能 •主要なUAスタイルシートは:focusから:focus-visibleに移行済み

12.

:focus-visible CSS pseudo-class | Can I use... https://caniuse.com/css-focus-visible

13.

第5位:prefers-reduced-data •聞いたことがない率:60.3% メディア特性の一種(仕様) • •値は no-preference または reduce 通信量に対する選好に対応できる • •プライバシーに関する懸念が存在 低所得者層の検知や追跡に使われるかも? • •Save Data APIについても同じような話がある

14.

CSS at-rule: ̀@medià: ̀prefers-reduced-datà media feature | Can I use... https://caniuse.com/mdn-css̲at-rules̲media̲prefers-reduced-data

15.

第4位:color-scheme •聞いたことがない率:60.8% プロパティの一種(仕様) • •値は normal または light や dark prefers-color-schemeより優先される • •only と組み合わせ light または dark の強制が可能 どのカラースキームでの表示を意図するか指定 • •スクロールバーなどのUI部品にも影響

16.

CSS property: color-scheme | Can I use... https://caniuse.com/mdn-css̲properties̲color-scheme

17.

第3位:prefers-contrast •聞いたことがない率:66.9% メディア特性の一種(仕様) • •値は no-preference または more または less または custom コントラストの高低に対する選好に対応 • •forced-colorsとは異なる点に注意 強制カラーモードが有効かどうかを検知 • •Windowsのハイコントラストモードが該当

18.

CSS at-rule: ̀@medià: ̀prefers-contrast̀ media feature | Can I use... https://caniuse.com/mdn-css̲at-rules̲media̲prefers-contrast

19.

第2位:color-contrast() •聞いたことがない率:73% 関数の一種(仕様) • •ある色の値と、色の値のリストを比較し、リストから最も コントラストの高い色を自動的に選択するもの「だった」 •CSS Color Module Level 6でcontrast-color()に変更 記法などLevel 5のときから大幅に変更されている • •“Not Ready For Implementation”

20.

types: <color>: ̀color-contrast()̀ | Can I use... https://caniuse.com/mdn-css̲types̲color̲color-contrast

21.

第1位:forced-colors •聞いたことがない率:91.2% メディア特性の一種(仕様) • •値は none または active 強制カラーモードが有効かどうかを検知 • •有効の場合、限定的なカラーパレットが強制される Windowsのハイコントラストモードは一例 • •必ずしもハイコントラストと同義ではない点に注意

22.

CSS at-rule: ̀@medià: ̀forced-colors̀ media feature | Can I use... https://caniuse.com/mdn-css̲at-rules̲media̲forced-colors

23.

ご静聴ありがとうございました