使用瀏覽器開(kāi)發(fā)工具測(cè)試網(wǎng)站可訪問(wèn)性的七種方法
前言
有很多方法可以測(cè)試你的網(wǎng)站是否具有可訪問(wèn)性。服務(wù)、軟件包，甚至是人工測(cè)試公司。他們都有自己的位置，通常最好是對(duì)真實(shí)的人進(jìn)行測(cè)試。然而，對(duì)于一個(gè)快速的初步測(cè)試，你無(wú)需安裝任何東西或支付服務(wù)費(fèi)用。瀏覽器內(nèi)置了開(kāi)發(fā)者工具，這些工具具有出色的可訪問(wèn)性測(cè)試特性。以下是微軟Edge和谷歌Chrome等瀏覽器的開(kāi)發(fā)者工具。
Issues面板
Issues面板顯示了當(dāng)前網(wǎng)頁(yè)的各種問(wèn)題。你可以直接打開(kāi)它，或者點(diǎn)擊右上角的Issues圖標(biāo)（藍(lán)色對(duì)話框）。Issues也會(huì)在控制臺(tái)中公布。
在面板中可以導(dǎo)航到 "可訪問(wèn)性"部分，可以查看是否有任何問(wèn)題。每一個(gè)報(bào)告的問(wèn)題都有一個(gè)解釋，說(shuō)明問(wèn)題所在和原因，并有一個(gè)到開(kāi)發(fā)人員工具部分的鏈接，您可以檢查和修復(fù)問(wèn)題。
Issues面板是由Webhint提供的，這是一個(gè)檢查各種類型問(wèn)題的服務(wù)（以及 NPM 包，以備您在 CI/CD 工作流中使用）。
帶有可訪問(wèn)性信息覆蓋的元素選擇器
當(dāng)打開(kāi)開(kāi)發(fā)者工具時(shí)，可以使用元素選擇器工具來(lái)高亮和檢查頁(yè)面的某些部分。疊加層顯示了所有類型的信息：
HTML元素的類型和class/ID信息。
元素的尺寸
文本顏色
使用的字體
間距信息
此外，還可以獲得可訪問(wèn)性信息。
前景與背景的對(duì)比度--如果有足夠的對(duì)比度，可以看到一個(gè)綠色的對(duì)勾，否則就會(huì)看到一個(gè)紅色的感嘆號(hào)圖標(biāo)。
公布的輔助技術(shù)名稱，如讀屏器。
ARIA的作用
元素是否可在鍵盤上對(duì)焦的指示器（綠色的對(duì)勾或灰色的圓圈）。
這些信息應(yīng)該能讓你走得很遠(yuǎn)。一旦發(fā)現(xiàn)顏色對(duì)比度不夠的元素，就可以使用顏色選擇器來(lái)修復(fù)它。
帶對(duì)比度檢查的拾色器
一旦意識(shí)到頁(yè)面上的某些顏色有對(duì)比度問(wèn)題，可以使用元素工具的拾色器來(lái)查看如何修復(fù)它們。通過(guò)點(diǎn)擊元素CSS中的任何一個(gè)顏色樣本來(lái)打開(kāi)拾色器。
在拾色器中，會(huì)得到一個(gè)顯示對(duì)比度的部分以及該對(duì)比度是否符合AA或AAA網(wǎng)頁(yè)指南。對(duì)于沒(méi)有足夠?qū)Ρ榷鹊念伾吧饕矔?huì)建議使用符合要求的顏色。要選擇它們，只需點(diǎn)擊色板。
拾色器還在顏色選擇框上顯示兩條線，表示符合AA或AAA標(biāo)準(zhǔn)。這樣一來(lái)，你就可以很快看到你所需要的顏色是否屬于其中的任何一個(gè)部分。
不過(guò)，這種算法有一個(gè)問(wèn)題，因?yàn)樗](méi)有考慮某種字體的字重，而只考慮前景色和背景色的對(duì)比度。一個(gè)具有足夠?qū)Ρ榷鹊妮p型字體可能尚不可讀。這就是為什么目前的對(duì)比度算法將很快就被一個(gè)考慮到這一點(diǎn)的算法所取代，你可以在開(kāi)發(fā)者工具設(shè)置中開(kāi)啟新的算法。
當(dāng)你打開(kāi)實(shí)驗(yàn)并重新加載開(kāi)發(fā)者工具后，拾色器對(duì)比部分看起來(lái)不一樣了，只顯示一行有效顏色。
視力缺陷模擬
你感知網(wǎng)站的方式并不是世界對(duì)它的感知。這就是為什么我們添加了一個(gè)選項(xiàng)來(lái)模擬不同的視力缺陷。在開(kāi)發(fā)者工具的渲染窗格中使用這個(gè)功能，就可以看到你的產(chǎn)品對(duì)于不同用戶的樣子。
視力模糊 - 用戶難以專注于細(xì)節(jié)
原發(fā)性視力 - 患者無(wú)法察覺(jué)任何紅光。
弱視 - 患者無(wú)法感知任何綠光。
三色盲 - 患者無(wú)法感知任何藍(lán)光。
色盲 - 患者無(wú)法感知任何顏色，這使得所有顏色都變成灰色。
從其中一個(gè)選項(xiàng)中選擇，網(wǎng)站將自動(dòng)改變顏色。
渲染模擬(暗、亮、高對(duì)比度、減少運(yùn)動(dòng))
渲染視圖也有一些功能來(lái)模擬不同的操作系統(tǒng)設(shè)置。其中之一是模擬減少運(yùn)動(dòng)，這非常重要，可確保你的動(dòng)畫不會(huì)顯示給不想要或無(wú)法應(yīng)付網(wǎng)絡(luò)動(dòng)畫的用戶。
你還可以從暗模式切換到亮模式，而無(wú)需改變電腦的設(shè)置。
很快，還可以模擬高對(duì)比度模式，而無(wú)需改變你的操作系統(tǒng)。我很快就會(huì)在博客上寫出更多的內(nèi)容。
無(wú)障礙網(wǎng)頁(yè)樹(shù)
開(kāi)發(fā)工具的可訪問(wèn)性面板還顯示了文檔的可訪問(wèn)性樹(shù)。這與你在元素面板中看到的不同，但卻是輔助技術(shù)對(duì)你的文檔有所幫助。通過(guò)使用可訪問(wèn)性樹(shù)，你可以檢查一個(gè)元素是否以應(yīng)有的方式聲明，例如，屏幕閱讀器。
源順序查看器（實(shí)驗(yàn)性的）
使用CSS你可以改變?cè)卦谄聊簧系娘@示順序。然而，這種改變并不是文檔源代碼的一部分，因此不會(huì)被屏幕閱讀器等輔助技術(shù)所識(shí)別。通過(guò)使用源碼順序查看器，開(kāi)發(fā)者工具將在瀏覽器中疊加每個(gè)元素的順序號(hào)，你可以看到它們是否不僅在視覺(jué)上接近另一個(gè)元素顯示，而且對(duì)于非視力正常的用戶或搜索引擎來(lái)說(shuō)也是如此。
關(guān)于本文 譯者：@飄飄 作者：@Christian Heilmann 原文：https://christianheilmann.com/2021/01/11/seven-ways-to-test-for-accessibility-of-your-web-site-with-browser-developer-tools/
最后
歡迎加我微信(winty230)，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...
