無障礙設計是可以讓更多人存取網站的實際作為,從Firefox 61開始內建無障礙網頁檢測工具(Accessibility Inspector),幫助開發者製作出視覺障礙人士友善的網頁,這項功能在開發工具DevTools中是預設關閉的,開發者需要手動啟用,啟用後在DevTools的上下文選單也將會出現更多選項等其他額外功能。

無障礙目的在於盡可能避免因為使用者因為生理上的障礙,或是裝置、網路速度以及地理位置等外在情況,而被排除在存取網站之外。無障礙網頁檢測工具最主要的功能,便是協助開發向視障人士公開網頁資訊的功能。網頁瀏覽器的無障礙API可以揭示頁面上各種元素的功能資訊,像是文字、按鈕、連結或是表格等元素。而語意DOM元素的角色(Role)則預設暗示了這些元素的功能,但例如<div>等非語意標籤並沒有預設角色,則需要進行額外設定。

瀏覽器無障礙API會將這些角色與資訊以階層式的架構表現,這個結構被稱為無障礙樹(Accessibility Tree),形式跟DOM樹很像,只是有許多元素的限制以及紀錄不同的資訊,螢幕閱讀器輔助技術需要使用這項資訊,來告訴用戶頁面上的內容,並且使他們能與頁面互動。而Firefox的無障礙網頁檢測工具也同樣使用這個資訊,在DevTools上提供無障礙除錯的功能。

DevTools上的無障礙面板介面很簡單,主要分為兩部分,一半會以樹狀圖顯示現在網頁上的無障礙樹,開發者可以透過點擊箭頭來展開所有的子項目,以檢視這些元素是否存在正確的值。每個項目都有兩個屬性,分別是角色與名稱,角色通常指的是頁面上的元素的功能,諸如按鈕或是頁腳等,可以是瀏覽器預設也可以是使用者自訂的。而名稱則是該元素在頁面上的名字。面板的另一部分則是當前所選項目的更多詳細資訊,除了角色與名稱外,還會顯示值、DOMNode、描述或是屬性等。

Mozilla提到,從Firefox 61開始預設內建無障礙網頁檢測工具,但由於對於瀏覽器效能有負面影響,因此功能預設關閉,開發者需要自行到DevTools中啟用。而在啟用無障礙網頁檢測工具之後,Firefox中的上下文選單的選項會增加,開發者可以直接在網頁上點選右鍵檢視無障礙屬性,而且在無障礙頁籤中,當滑鼠游標停在無障礙物件上,將會在頁面上對應的物件上高亮度提示。


Advertisement

更多 iThome相關內容