檢查所有元素狀態的可及性，例如在狀態下的 hover 文字顏色對比。
Inspect 工具一次報告一個州的無障礙問題。 要檢查元素各狀態的可及性，請在樣式標籤中使用 ：hov (切換元素狀態) 區塊，如本文所述。
我們首先說明使用 檢查 工具時為何需要狀態模擬，接著示範如何使用狀態模擬。
在預設狀態下檢查文字色彩對比度
要檢查網頁上各個元素的文字顏色對比，請使用 Inspect 工具的頁面覆蓋層：
請在新視窗或分頁中開啟 無障礙測試示範網頁 。
要開啟 DevTools，請右鍵點擊網頁，然後選擇 檢查。 或者，在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。 DevTools 開啟。
點擊 DevTools 左上角的 Inspect (
) 按鈕，讓該按鈕 (藍色) 被高亮亮出。將滑鼠移到渲染網頁中的元素上。 檢查 工具的 資訊覆蓋層會出現，顯示滑鼠指標下方元素的資訊。
若有對比度資訊， 檢查 覆蓋層會顯示對比度及一個勾選框項目。 綠色勾勾圖示表示對比度足夠，黃色警示圖示表示對比度不足。
例如，側邊欄導覽選單中的連結有足夠的對比度，如 Inspect 覆蓋層所示：
捐贈狀態區塊中的綠色狗狗清單項目對比度不足，因此在檢查覆蓋層中會被警告標記：
當檢查工具啟動時，懸停不會顯示懸停狀態下的文字顏色對比
Inspect 工具的資訊覆蓋層僅代表單一狀態。 頁面上的元素可以有不同的狀態，這些狀態都需要經過測試。 例如，當你將滑鼠指標移到無障礙測試試玩頁面的選單上時，選單項目會變色。
首先，確認你的動畫在不使用 Inspect 工具時也能執行：
請在新視窗或分頁中開啟 無障礙測試示範網頁 。
將滑鼠移到側邊欄導覽選單的藍色選單項目上。 滑鼠滑鼠時，選單項目的顏色會被動畫呈現：
接著，確認使用檢查工具時動畫不會執行：
在網頁任意位置右鍵點擊，然後選擇 檢查。 或者，按 F12。 DevTools 會在網頁旁邊開啟。
點擊 DevTools 左上角的檢查工具 (檢查
) 按鈕。在渲染後的網頁中，將滑鼠移到側邊欄導覽選單的藍色連結上。 選單項目的動畫不會執行。 取而代之的是，選單項目會以顏色高亮顯示，作為 flexbox 覆蓋層。
使用 Inspect 工具時，你無法達到
hover元素的狀態來測試文字對比度，因為hover你的樣式中的狀態沒有被觸發。
用這種方式檢查足夠的文字對比度是不夠的，因為頁面上的元素可能有不同的狀態。
使用狀態模擬來模擬動畫選單項目的懸停狀態
當 檢查 工具啟動時，你不需要將滑鼠移到動畫元素上，而是模擬選單項目的狀態。 要模擬選單項目的狀態，請使用 樣式 窗格中的狀態模擬。 Styles 面板有一個 ：hov (切換元素狀態) 按鈕，顯示一組標示為 Force 元素狀態的勾選框。
使用檢查工具時開啟懸浮狀態：
請在新視窗或分頁中開啟 無障礙測試示範網頁 。
在網頁任意位置右鍵點擊，然後選擇 檢查。 或者，按 F12。 DevTools 會在網頁旁邊開啟。
點擊 DevTools 左上角的 Inspect (
) 按鈕，讓圖示 (藍色) 高亮。在渲染後的網頁中，點擊側邊欄導覽選單中的藍色 Cats 連結。 Elements 工具開啟，選取了以下元素
<a href="#cats">Cats</a>：
在樣式面板中，點擊 ：hov) 按鈕 (切換元素狀態。 「 原力元素狀態 」勾選框區塊會出現：
點擊 ：hover 勾選框。 在 DOM 中，元素左側
<a href="#cats">Cats</a>出現黃色點，表示該元素處於模擬狀態。 貓 隊選 單項目現在會像指標懸停在網頁上一樣出現，選單上的動畫可能會播放：
滑鼠移到元素上方時檢查對比度
模擬狀態套用後，您可以再次使用 檢查 工具，當使用者將滑鼠移到元素上方時，檢查其對比度，如下：
從上方繼續，點擊 DevTools 左上角的 「檢查 (
) 按鈕，使該圖示 (藍色) 被高亮顯示。將滑鼠移到側邊欄導覽選單中的藍色 Cats 連結上。 連結現在變成淺藍色，因為模擬懸停狀態。 檢查 工具的 資訊覆蓋層會出現，在 對比 度列顯示橘色驚嘆號，表示對比度不夠高：
狀態模擬也是檢查是否考慮不同使用者需求的好方法，例如鍵盤使用者的需求。 透過使用 力場元素狀態 勾選框，你可以模擬狀態並 :focus 檢查可聚焦元素是否改變，表示它們有焦點。 缺乏元素何時被聚焦的指標是無障礙問題。 欲了解更多，請參閱 「分析鍵盤焦點缺乏跡象」。