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

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

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

• https://waic.jp/
• https://www.aplab.jp/

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

• https://2022.stateofcss.com/en-US/

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

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

• https://2022.stateofcss.com/en-US/features/accessibility/

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

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

• https://w3c.github.io/csswg-drafts/mediaqueries-5/#prefers-color-scheme

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

• https://caniuse.com/prefers-color-scheme

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

• https://w3c.github.io/csswg-drafts/mediaqueries-5/#prefers-reduced-motion

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

• https://caniuse.com/prefers-reduced-motion

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

• https://w3c.github.io/csswg-drafts/selectors/#the-focus-visible-pseudo

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

• https://caniuse.com/css-focus-visible

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

• https://w3c.github.io/csswg-drafts/mediaqueries-5/#prefers-reduced-data

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

• https://caniuse.com/mdn-css_at-rules_media_prefers-reduced-data

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

• https://w3c.github.io/csswg-drafts/css-color-adjust/#color-scheme-prop

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

• https://caniuse.com/mdn-css_properties_color-scheme

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

• https://w3c.github.io/csswg-drafts/mediaqueries-5/#prefers-contrast

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

• https://caniuse.com/mdn-css_at-rules_media_prefers-contrast

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

• https://w3c.github.io/csswg-drafts/css-color-6/#colorcontrast

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

• https://caniuse.com/mdn-css_types_color_color-contrast

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

• https://w3c.github.io/csswg-drafts/mediaqueries-5/#forced-colors

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

• https://caniuse.com/mdn-css_at-rules_media_forced-colors

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