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画像形式¹を無効にする	ページ再読み込みを適用する必要があり、画像をリクエストに対しキャッシュを無効にします
WebP画像形式を無効にする	ページ再読み込みを適用する必要があり、画像リクエストに対しキャッシュを無効にします

画像に関しては、AVIFやWebPの画像形式に対応していないブラウザでの表示を確認するために利用できます。

まとめ

これまでアクセシビリティに関する表示確認について全く知識がありませんでした…。

このエミュレータで全てがカバーできるわけではありませんが、活用することでアクセシビリティの改善に取り組みやすいと感じました！

アクセシビリティ活動されている企業も多いので、個人としてもキャッチアップ進めていきたいと思います。

オープンな映像コーデックやフォーマットを検討する非営利団体「Alliance for Open Media（AOM）」が開発した次世代画像フォーマット ↩