Chromeの開発者ツールには「レンダリング」というタブがあります。
恥ずかしながらついこの前まで存在すら認識していませんでした…
人によってレイアウトが違うかもしれない（非表示になっているかも）です。
私の場合、スタイルのタブが1段目と表現するなら2段目に表示されていました。
レンダリングタブで何ができる？
レンダリングタブでは、ユーザビリティ改善のための表示をエミュレートできます。
これまであまり使ったことがありませんでしたが…ダークモードの対応などはこちらを使う簡単に確認できます！
チェックボックスかセレクトボックスで項目を選択しエミュレートを有効にします。
エミュレートできること
エミュレートでは、対象要素をハイライトしてくれたり、CSSのメディアタイプを強制したりすることで表示に関するデバッグができます。
以下できることの一覧です。
| エミュレート内容 | 詳細 |
|---|---|
| ペイント点滅 | 再ペイントする必要があるページの領域を緑色にハイライトします。光過敏性てんかんを起こしやすいユーザーには適さない可能性があります |
| レイアウトシフト領域 | シフトされた領域を青色にハイライトします。光過敏性てんかんを起こしやすいユーザーには適さない可能性があります |
| レイヤの枠線 | レイヤの枠線をオレンジまたはオリーブ、タイルをシアンで表示します |
| フレームレンダリング統計情報 | フレームスループット、フレーム落ちの分布、GPUメモリをプロットする |
| スクロールのパフォーマンスの問題 | タップイベントハンドラ、ホイールイベントハンドラやその他のメインスレッドのスクロール状況など、スクロール操作が低速になる可能性がある要素を青緑をハイライトします |
| 広告フレームをハイライト表示する | 広告として検出されたフレームを赤色にハイライトします |
| ウェブに関する主な指標 | ウェブに関する主な指標でオーバーレイを表示する |
| ローカルフォントを無効にする | @font-faceルール内のlocal()ソースを無効にします。ページ再読み込みを適用する必要があります |
| フォーカスのあるページをエミュレートする | ページにフォーカスしたままにします。消失要素のデバッグに主に使用されます |
| 自動ダークモードを有効にする | 自動ダークモードを有効にしてprefers-color-schemaをdarkに設定します |
少しわかりにくいですが、サイトを利用するユーザーにとって大切なパフォーマンスやレイアウトシフトなどを視覚的に確認できるようにしてくれます！
アクセシビリティだけでなく、パフォーマンスに関する指標を確認できるのは非常に嬉しいですね！
ページが出来上がった際にぜひ確認してみてください！
CSSに関するエミュレート
| エミュレート内容 | 詳細 |
|---|---|
| CSSメディア特性prefers-color-schemeをエミュレートする | CSS prefers-color-schemeのメディア特性を強制します |
| CSSメディアタイプをエミュレート | 印刷スタイルとスクリーンスタイルのテストでメディアタイプを強制します |
| CSSメディア特性forced-colorsをエミュレート | CSS強制色のメディア機能を自動適用します |
| CSSメディア特性prefers-contrastをエミュレートする | CSS prefers-contrastメディア特性を強制します |
| CSSメディア特性prefers-reduced-motionをエミュレート | CSS prefers-reduced-motionメディア特性を強制します |
| CSSメディア特性prefers-reduced-transparencyエミュレートする | CSS prefers-reduced-transparencyメディア特性を強制します |
| CSSメディア特性color-gamuntをエミュレートする | CSS color-gamuntメディア特性を強制します |
CSSのエミュレートはさらに聞きなれないワードがたくさんあります…。
詳細はMDNを確認いただきたいですが、それぞれユーザーが色のテーマやコントラストの高い低いなどを要求した場合の表示をエミュレートできます。
CSS prefers-color-scheme
ユーザーが「明るい色」と「暗い色」どちらのテーマを要求しているかを検知するために利用されます。
いわゆる、「ライトテーマ」と「ダークテーマ」のことですね。
CSS prefers-contrast
こちらは2024年7月現在実験的な機能のようです。
コントラストの「高い」と「低い」どちらを要求しているか検知するための利用されます。
CSS prefers-reduced-transparency
こちらは2024年7月現在実験的な機能のようです。
透明や半透明のレイヤー効果を減らす設定の検知のために利用されます。
CSS color-gamunt
ユーザーエージェントや出力機器が対応している色をおおよその範囲を調べるために利用されます。
その他
| エミュレート内容 | 詳細 |
|---|---|
| 色覚異常をエミュレート | 色覚異常のエミュレーションを強制します |
| AVIF画像形式1を無効にする | ページ再読み込みを適用する必要があり、画像をリクエストに対しキャッシュを無効にします |
| WebP画像形式を無効にする | ページ再読み込みを適用する必要があり、画像リクエストに対しキャッシュを無効にします |
画像に関しては、AVIFやWebPの画像形式に対応していないブラウザでの表示を確認するために利用できます。
まとめ
これまでアクセシビリティに関する表示確認について全く知識がありませんでした…。
このエミュレータで全てがカバーできるわけではありませんが、活用することでアクセシビリティの改善に取り組みやすいと感じました！
アクセシビリティ活動されている企業も多いので、個人としてもキャッチアップ進めていきたいと思います。
-
オープンな映像コーデックやフォーマットを検討する非営利団体「Alliance for Open Media（AOM）」が開発した次世代画像フォーマット ↩