基于WAI-ARIA的網頁導航欄地標屬性的標識方法

摘要： 針對多樣化網頁上視障用戶導航的難題， 提出一種自動標識導航欄地標的方法， 以提高網頁無障礙性. 首先， 通過設計啟發式規則， 根據導航欄內有序元素排列以及子元

素內常含超鏈接和精煉文字等規則， 自動提取導航欄內的元素; 其次， 采用決策樹二分類算法， 用于分類導航欄中特征差異顯著的元素; 最后， 對已識別的導航欄元素進行地標屬

性注入. 在對100個網站的實驗評估中， 該方法成功識別了92.6%的導航欄元素， 而注入的地標屬性則顯著提升了網站的無障礙性能， 從而改善了視障用戶的使用體驗.

關鍵詞： 網頁無障礙； 地標； 導航欄識別； 決策樹算法

中圖分類號： TP311.5" 文獻標志碼： A" 文章編號： 1671-5489（2024）03-0697-07

Landmark Attribute Identification Method ofWebpage Navigation Bar Based on WAI-ARIA

LI Yucong1， WANG Shiqin2， ZHANG Mengxi2， LIU Huaxiao2

（1. The First Hospital of Jilin University， Changchun 130021， China；2. College of Computer Science and Technology， Jilin Univ

ersity， Changchun 130012， China）

Abstract： Aiming at the problem of" the navigational challenges for visually impaired users on diverse webpages， we proposed a

method for automatically identifying navigation bars to improve" webpage accessibility. Firstly， by designing heuristic rules， elements within the navigation bars

were" autonomously extracted based on the ordered element arrangement within the navigation bar， as well as rules such as hyperlinks and succinct textual content within sub-elements.

Secondly， a decision tree binary classification algorithm was used to categorize elements with pronounced feature disparities in the navigation bars. Finally， the identified navigation bar elements

were subject to the injection of Landmark attributes. In experimental evaluations of" 100 websites， the method successfully identified" 92.6% of navigation bar elements，

and the infusion of Landmark attributes significantly improves website accessibility， thereby ameliorating the user experience for visually impaired individuals.

Keywords： webpage accessibility; Landmark; navigation bar recognition; decision tree algorithm

收稿日期： 2023-08-04.

第一作者簡介： 李玉聰（1980—）， 男， 漢族， 碩士， 助理研究員， 從事計算機軟件的研究， E-mail： leeyc@jlu.edu.cn.

通信作者簡介： 劉華虓（1986—）， 男， 漢族， 博士， 副教授， 從事智能化軟件工程、 數據挖掘和人機交互的研究， E-mail： liuhuaxiao@jlu.edu.cn.

基金項目： 吉林省自然科學基金（批準號： 20230101070JC）.

互聯網技術的不斷創新和發展使人們越來越依賴互聯網進行學習、 購物、 娛樂等日常活動［1＼|2］. 網絡在提供便利的同時， 也為殘障人士， 尤其是視障群

體提供了認知世界的工具和媒介［3］. 視障用戶是指那些由于視覺缺陷或盲癥而在日常生活中依賴非視覺方式獲取信息和導航的個體， 通常分為全盲用戶

、 低視力用戶和弱視力用戶， 為視障用戶提供必要且無障礙化的互聯網服務是改善他們生活， 打開新“視”界的有效方法［4-6］.

開發人員在設計網站時通常會忽略視障用戶這一特殊群體的需求， 導致網站中存在大量可訪問性問題， 如未加標簽、 導航欄缺少地標（Landmark）屬性等， 使視障用戶難

以通過屏幕閱讀器訪問并使用網站［7］. 其中， 導航欄作為用戶了解網頁框架的主要欄目， 其能使屏幕閱讀器在閱讀導航欄信息時附加地標信息， 幫助視障用

戶快速掌握網頁信息， 精準定位和訪問所需的功能按鈕. 而一旦導航欄中缺少地標屬性， 用戶便無法清楚地認知導航欄所展示的內容， 增加其理解難度， 甚至會被導航欄內的超鏈接誘

導而產生誤操作. 上述情況在視障用戶需要頻繁訪問的醫療領域相關網站中更突出［8］.

基于此， 本文面向視障用戶提出一種針對網站中導航欄內缺失的地標元素的自動化識別及屬性注入方法. 首先， 通過設計啟發式規則， 識別并提取導航欄中的子元素、 超鏈接

和文本描述， 建立導航欄屬性庫； 其次， 使用決策樹分類算法［9］， 對導航欄中特征差異明顯的元素進行二分類， 進一步識別所需的導航欄信息； 最后， 針

對缺少地標屬性的導航欄， 通過遍歷已識別到的導航欄元素， 為其自動化注入“role=navigation”的地標屬性. 評估實驗結果驗證了本文方法的有效性， 可提高網站的無

障礙性， 改善視障用戶的使用體驗.

1" 方法設計

首先利用Selenium工具搜集網站信息， 建立包括網站URL（uniform resource locator）、 網站內標簽〈div〉所包含元素以及存在Landmark標記信息的數據集； 其次， 對網站

中的導航欄信息， 利用設定好的啟發式規則和決策樹二分類算法分別進行內部元素特征篩選和整體特征分類， 提取并識別導航欄地標； 最后， 遍歷所有導航欄元素， 獲取含有〈nav〉

標簽的元素列表， 進而借助WebDriver庫為缺少地標屬性的元素自動注入“role=navigation”. 本文方法流程如圖1所示.

1.1" 數據集的提取

由于無障礙屬性均依附于網站而存在， 因此要對數據進行分析， 先要獲得網站的URL列表. 而Selenium是在Web應用中進行自動化測試的工具， 可模擬真實用戶進行一系列操作. 同時，

網站中的各種屬性值也可通過Selenium提供的WebDriver庫提取， 以支持本文方法的后續處理過程. 其中： Selenium是一個開源框架， 用于自動化進行網絡瀏覽器交互， 使開發人員能夠模擬用戶操作和測試網絡應用程序;

WebDriver 是一個程序接口和協議， 其定義了一個語言中立的接口， 用于控制Web瀏覽器的行為.

本文所需數據集的提取過程可分為三步： 首先， 導入必要的Selenium庫并初始化WebDriver， 使用Selenium提供的WebDriver初始化瀏覽器實例， 如ChromeDriver; 其次， 使用WebDriv

er的元素定位方法（如find_element_by_xpath，find_element_by_css_selector等）找到目標〈div〉元素， 使用WebDriver的相關方法（如get_attribute）提取目標〈div〉元素的

URL信息和屬性; 最后， 將提取到的URL信息和〈div〉屬性存儲到相應的數據結構（.csv）中.

通過上述方法獲取到所需的元素能夠完成下一步對元素屬性的提取以及對篩選后元素的注入. 獲取到元素的屬性則可以在進行標注后作為機器學習的數據集進行訓練及模型評估［10］.

1.2" 導航欄地標識別和提取

導航欄地標角色即為網頁中的導航欄部分， 通常用來導航實現站內跳轉或者鏈接其他站點. 對于視障用戶， 導航欄地標在提供網頁導航和內容訪問方面起關鍵作用. 通過在

導航欄中標識和區分不同的導航元素， 視障用戶可更容易地定位和選擇所需的導航目標， 以實現快速的頁面導航和內容瀏覽［11］. 圖2為一個網頁中導航欄的實例圖及部分對應的網頁代碼.

本文通過對WDC（web data commons）中100網站導航欄的研究， 發現導航欄的內部元素有以下具有辨識的特征.

規則1（元素特征提取規則）" 令N表示導航欄地標， 其中N是一個非空集合. 對任意的n∈N， 令S（n）表示n的子元素集合. 對任意的n∈N， 滿足以下條件：

1） S（n）gt;3， 表示n內部的子元素數量大于3個;

2） 對任意的m1，m2∈S（n）， 滿足以下條件：

① m1≠m2， 表示子元素m1和m2不同;

② m1≈m2， 表示子元素m1和m2大小相近;

③ m1在S（n）中的位置小于m2， 表示兩者在排列中的位置有序;

3） 對任意的m∈S（n）， m包含至少一個跳轉鏈接.

規則2（文字特征提取規則）" 令N表示導航欄地標， 其中N是一個非空集合. 對任意的n∈N， 令S（n）表示n的子元素集合.

對任意的n∈N及任意的m∈S（n）， 滿足以下條件：

1） m≤8， 表示子元素m的文字內容不超過8個字；

2） 子元素m的文字內容與網站的類別高度相關.

根據上述導航欄特征， 本文對網站內的元素信息進行初步篩選. 注意當開發人員設置導航欄時， 開發人員會使用HTML5（hyper text markup language 5）標準語義標簽

〈nav〉和無語義的塊級元素標簽〈div〉對導航欄進行設置. 因為〈nav〉標簽自帶隱式的導航欄信息， 因此本方法主要針對在不具備語義的〈div〉元素中區分出導航欄元素.

但如果只針對導航欄元素內部的特征進行篩選， 可能會獲得其他與導航欄格式相同但功能無關的元素， 如由〈Recyclerview〉生成的列表視圖. 因此本文方法以導航欄作為整體， 分

析其特征信息， 做進一步的篩選. 其中， 導航欄的整體特征包括位置特征和尺寸特征.

特征1（位置特征）" 令M表示導航欄， 其中M是一個非空集合. 對任意的m∈M， 滿足以下條件：

1） 導航欄M的位置相對固定；

2） 導航欄M的位置主要分布在網頁的左側、 上側， 有時也會出現在右側的側邊；

3） 導航欄M的位置靠近網頁邊界.

特征2（尺寸特征）" 令M表示導航欄， 其中M是一個非空集合. 對任意的m∈M， 滿足以下條件：

導航欄M長寬比存在顯著大或顯著小的特征， 通常橫跨網頁或者縱貫網頁.

上述兩種特征沒有固定的數值， 也沒有固定的區間， 無法直接進行基于規則的篩選， 因此本文采用決策樹的二分類方法對導航欄的整體特征進行分析.

決策樹是針對選擇的不同進行不同的決策從而產生不同走向建立的樹， 是一種依托于選擇和預測建立的具有數據預測功能

的樹［12］， 該樹的整體架構如圖3所示. 其中， 檢測樣例輸入決策樹中， 從根節點開始遍歷， 根據樣例屬性和設定的判定規則決定該樣例在分支中的走向［9］.

本文建立決策樹的基本步驟如下：

步驟1） 假設一個訓練樣本集T={（x1，y1），（x2，y2），…，（xm，ym）}；

步驟2） 從T的屬性集中選擇最能區別T中樣本的屬性A={A1，A2，…，Am}；

步驟3） 創建一個樹節點， 其值為A， 創建該節點的子節點序列， 每個子節點代表A的唯一值或唯一區間， 使用A的值將樣本細分， 得到新的更小的樣本集；

步驟4） 在每個新的樣本集中重復步驟3）的操作， 但屬性集不能包括已選擇過的屬性.

執行上述步驟進行二分類的一個重要指標是確定何時分類方法停止迭代， 因此， 本文采用信息熵評估算法的穩定性［13］， 計算公式為

Entropy（D）=-∑mi=1pilog2pi，

其中， Entropy（D）表示將樣本集D中不同類別進行區分所需的信息量， m表示樣本集D中類別A的個數， pi表示D記錄為Ai的概率.

綜上， 本文方法識別導航欄地標元素的算法流程如下：

輸入： 網站的URL及對應的HTML文檔；

輸出： 該網站的導航元素信息；

步驟1） 利用規則1和規則2對網站中的導航欄進行特征分析；

步驟2） 根據導航欄的特征1和特征2， 采用有監督學習的決策樹算法對導航欄進行二分類；

步驟3） 結合信息熵函數對二分類任務進行評估， 確定最終的導航欄元素.

1.3" 導航欄地標屬性注入

地標屬性是指用于標識和描述導航欄的關鍵屬性， 如名稱、 角色、 位置等. 缺少地標屬性的導航欄可能會導致視障用戶無法準確地理解導航欄的功能和導航選項. 通過進行地標屬性

注入， 可將關鍵屬性添加到導航欄中， 以使其更具可訪問性. 從而視障用戶可通過輔助技術（如屏幕閱讀器）獲取導航欄的相關信息， 并準確地導航到所需的頁面或鏈接

［14］. 地標屬性的注入包括添加角色標記、 設置適當的名稱和描述、 指定位置信息等， 以便視障用戶能更好地理解和使用導航欄［15］.

本文對擁有〈nav〉標簽但不具有role屬性的元素， 給出地標屬性注入方法流程如下：

1） 根據網站源代碼， 獲取到含有nav標簽的元素列表；

2） 對獲得的元素列表進行一遍篩選， 去除已經含有role=navigation的元素；

3） 將剩下的元素列表進行遍歷， 給每個元素都加上導航欄的role屬性.

1.4" 地標識別及注入算法實現

給定一個待檢測網頁， 其地標識別和屬性注入過程如下： 將該網頁輸入到本文方法中， 首先提取其中的導航欄元素特征； 其次， 對導航欄整體特征進行二分類， 得到的結果用于

指導地標屬性的注入； 最后， 明確所需注入地標屬性的元素列表， 根據前端技術對每個元素添加地標屬性.

網頁中導航欄地標的內部元素特征識別算法由Python提供的WebDriver庫完成. 先使用Chrome瀏覽器進行加載， 并初始化browser對象， 通過直接調用庫中自帶的find_element_by_

xpath（ ）函數， 填入參數可以直接獲得如〈header〉等標簽元素， 獲得地標元素及aria其他屬性則需要使用選擇器方法， 再使用csv庫將獲取的元素都以csv形式存儲. 導航欄本身的

整體特征識別采用決策樹二分類算法， 部署于PyCharm version 2020.2.4， 輔以numpy， scikit-learn和pandas三個庫完成. Class DecisionTree描述決策樹模型， 包含模型的初始化

（_init_（self））、 模型的訓練（train（self，data，labels））和模型的預測（predict（self，sample））.

注入地標屬性的具體方法和技術取決于網頁的結構和技術實現. 本文使用HTML，CSS（cascading style sheet）和JavaScript等前端技術實現地標屬性的注入. 同時借助輔助技術

標準和規范， 如WAI-ARIA（web accessibility initiative-accessible rich internet applications）指導地標屬性的注入過程， 以確保符合無障礙性標準和最佳實踐.

2" 實驗驗證

2.1" 獲取實驗數據集

為便于研究人員對網頁信息進行分析， WDC（web data commons）通過對互聯網上的公共數據進行抓取和處理， 收集了來自不同領域的網站信息. 其提供的數據集主要包括： 網頁數

據集（web tables dataset）， 該數據集收集了互聯網上的結構化數據表格， 包括HTML表格、 CSV（comma separated values）文件和JSON數據等， 這些結構化數據涵蓋了各種主

題和領域， 如產品信息、 地理數據、 統計數據等; 鏈接數據集（link data set）收集了網頁之間的鏈接關系， 形成了一個大規模的鏈接圖譜， 該圖譜可用于網絡分析、 鏈接預測、 搜索引擎優化等.

本文從WDC提供的網頁數據集中共爬取了100個網站用于實驗， 其中包含29個醫療領域網站、 18個娛樂領域網站、 21個教育領域網站、 12個產品和商務領域網站以及20個社交媒體

領域網站. 在得到這些網站URL的同時， 本文也獲取了其對應的結構化數據表格， 用于后續利用規則和導航欄特征提取地標， 并為他們注入地標屬性.

2.2" 實驗方法

根據搜集到的數據集， 本文首先評估了規則1和規則2的準確性. 主要方法如下：

1） 利用上述規則提取100個網站的導航元素；

2） 分析這些元素在網站HTML表格中的具體表現是否為導航元素；

3） 按如下公式計算規則所提取元素的準確度：

Accuracyrule=CorrectSamplesTotalSamples，

其中Accuracyrule表示兩條規則的準確性， CorrectSamples表示正確標識的樣本數， TotalSamples表示總樣本數.

其次， 本文進一步討論了所采用的決策樹二分類算法的有效性. 主要使用混淆矩陣對分類模型進行分析， 進而計算精準率、 召回率和F1值3項指標對結果

進行評估. 精確率（Precision）、 召回率（Recall）和F1值的計算公式如下：

Precision=TPTP+FP，Recall=TPTP+FN，

F1-Score=2×Precision×RecallPrecision+Recall，

其中TP表示將正樣本預測為正樣本的概率， FP表示將負樣本預測為正樣本的概率， FN表示將正樣本預測為負樣本的概率.

一個二分類模型的混淆矩陣可簡化為如表1所示， 其中： 真陽性（true positive， TP）表示樣本被預測為正， 其真實情況也為正; 假陽性（1 positive， FP）表示樣本被預測為正， 其真實情況卻為負;

假陰性（1 negative， FN）表示樣本被預測為負， 其真實情況也為負; 真陰性（true negative， TN）表示樣本被預測為負， 其真實情況卻為正.

此外， 本文通過展示注入地標屬性前后這100個網站在WAVE（web accessibility evaluation tool）中的評分變化考察本文提出的地標注入方法的可用性.

2.3" 實驗結果和分析

利用規則1和規則2對100個網站導航元素的提取情況如下： 共提取到425個導航欄， 其中標識結果與原網站設計結果一致的有326個， 準確率達81.1%. 因此， 本文

總結出的規則能有效提取網站中的導航元素， 為進一步分析注入地標屬性的有效性提供數據支撐. 但在實驗過程中， 仍存在一些導航欄被識別錯誤的情況， 主要為網頁中所呈現

的其他類型的導航欄， 這種導航結構為網頁導航欄內細分出的導航結果. 該結果表明， 僅使用基于導航欄元素內部的規則進行導航欄篩選的工作存在一定局限性， 更體

現了結合導航欄的整體特征進行綜合分析的重要性. 進而， 本文將數據集網站的整體導航欄

和細分導航欄進行了標記， 其中80%提供給決策樹二分類模型進行訓練， 并討論模型在剩下20%的測試集上的有效性.

表2為二分類模型在10次交叉驗證后的評估結果. 由表2可見， 決策樹二分類方法的平均精確率達92.6%， 平均召回率達90.6%， 平均F1值達92%. 可見， 本文選擇的決策樹二分類模型分類效果較好.

在對數據集中100個網站注入導航地標屬性前后的可訪問性進行評分后的結果表明， 所有網站在注入地標屬性后的評分均有提升， 約平均提升7.8分， 其中醫療領域的網站提升最高，

平均達17.5分， 這主要是因為該領域內網站的功能多樣且復雜， 有更多功能亟需導航地標幫助視障用戶訪問和使用. 同時， 此類網站也是視障用戶頻繁訪問的網站之一， 對其可

訪問性的提高能極大改善視障用戶的使用體驗.

綜上所述， 本文針對網頁無障礙屬性中的導航欄地標進行了自動化識別的屬性注入， 通過為網站添加地標屬性， 幫助視力障礙者更好地對網頁全局有清楚的認識，

添加導航欄地標可使用戶清楚導航欄的位置， 并能通過快捷鍵直接定位到導航欄部分. 實驗結果表明， 該方法對元素的分類準確率可達92.6%， 且注入后的網站可訪問性有顯著提高.

參考文獻

［1］" CHEN J， CHEN C， XING Z， et al. Unblind Your APPs： Predicting Natural-Language Labels f

or Mobile Gui Components by Deep Learning ［C］//International Conference on Software Engineering. Piscataway， NJ： IEEE， 2020： 322-334.

［2］" 鄧愛林， 馮鋼， 劉夢婕. 5G+工業互聯網的關鍵技術與發展趨勢 ［J］. 重慶郵電大學學報（自然科學版）， 2022， 34（6）： 967＼|975.

（DENG A L， FENG G， LIU M J. Key Technologies and Development Trends in 5G+ Industrial Internet ［J］. Journal of Chongqing University of Posts and

Telecommunications （Natural Science Edition）， 2022， 34（6）： 967＼|975.）

［3］" ALSHAYBAN A， AHMED I， MALEK S. Accessibility Issues in Android APPs： State of

Affairs， Sentiments， and Ways Forward ［C］//International Conference on Software Engineering. Piscataway， NJ： IEEE， 2020： 1323-1334.

［4］" XU T L， WANG B S， LIU H， et al. Prevalence and Causes of Vision Loss in China fro

m 1990 to 2019： Findings from the Global Burden of Disease Study 2019 ［J］. The Lancet Public Health， 2020， 5（12）： e682-e691.

［5］" 工業和信息化部， 中國殘疾人聯合會. 中國殘聯關于推進信息無障礙的指導意見

［EB/OL］. （2020-09-11）［2023-05-16］. http：//www.scio.gov.cn/xwfbh/xwbfbh/wqfbh/42311/44021/xgzc44027/Docu

ment/1690214/1690214.htm. （MINISTRY OF INDUSTRY AND INFORMATION TECHNOLOGY， CHINA DISABLED PERSONS’ FEDERATION.

China Disabled Persons’ Federation Guidelines on Promoting Information Accessibility ［EB/OL］. （2020-09-11）［2

023-05-16］. http：//www.scio.gov.cn/xwfbh/xwbfbh/wqfbh/42311/44021/xgzc44027/Document/1690214/1690214.htm.）

［6］" 國家發展和改革委員會. 關于印發《“十四五”公共服務規劃》的通知

［EB/OL］. （2021-01-10）［2023-05-18］. https：//www.ndrc.gov.cn/xxgk/zcfb/ghwb/202201/t20220110_1311622.html？code=amp;state=123. （

NATIONAL DEVELOPMENT AND REFORM COMMISSION. The 14th Five-Year Plan on Public Service ［EB/OL］. （2021-01-10）［2023-05-18］. https：//www

.ndrc.gov.cn/xxgk/zcfb/ghwb/202201/t20220110_1311622.html？code=amp;state=123.）

［7］" BAJAMMAL M， MESBAH A. Semantic Web Accessibility Testing via Hierarchical Vis

ual Analysis ［C］//International Conference on Software Engineering. Piscataway， NJ： IEEE， 2021： 1610-1621.

［8］" SONG S Y， BU J J， WANG Y， et al. Web Accessibility Evaluation in a Crowdsourci

ng-Based System with Expertise-Based Decision Strategy ［C］//International Cross-Disciplinary Conference on Web Accessibility. New York： ACM， 2018： 1-4.

［9］" CHARBUTY B， ABDULAZEEZ A. Classification Based on Decision Tree Algorithm f

or Machine Learning ［J］. Journal of Applied Science and Technology Trends， 2021， 2（1）： 20-28.

［10］" 崔景洋， 陳振國， 田立勤， 等. 基于機器學習的用戶與實體行為分析技術綜述 ［J］. 計算機工程， 2022， 48（2）： 10＼|24.

（CUI J Y， CHEN Z G， TIAN L Q， et al. Overview of User and Entity Behavior Analytics Technology Based on Machine Learning ［J］. Computer Engineering， 2022， 48（2）： 10＼|24.）

［11］" PEREIRA L S， DOMINIQUE A. Correlating Navigation Barriers on Web 2.0 with Accessibility Guidelines ［C］//

International Conference on Computers for Handicapped Persons. Piscataway， NJ： IEEE， 2018： 14-21.

［12］" 王進， 余薇， 孫開偉， 等. 基于聚類提升樹的多標簽學習 ［J］. 江蘇大學學報（自然科學版）， 2021， 42（4）： 428＼|437.

（WANG J， YU W， SUN K W， et al. Multi＼|label Leaning Based on Boosting Clustering Trees ［J］. Journal of Jiangsu University （Natural Science Edition）， 2021， 42（4）： 428＼|437.）

［13］" SEAL D B， SAHA S， MUKHERJEE M， et al. Gene Ranking： An Entropy amp; Decision Tree Based Approac

h ［C］//Annual Ubiquitous Computing， Electronics amp; Mobile Communication Conference. Piscataway， NJ： IEEE， 2016： 1-5.

［14］" GRANT J， SUMILANG G， PROVIDENTI M， et al. Accountability for the Hidden C

odes toward a Better User Experience： Case Study of HRsimple Communication Desig

n for Web Accessibility and SEO ［C］//International Conference on Design of Communication. New York： ACM， 2021： 347-350.

［15］" ACOSTA-VARGAS P， SALVADOR-ULLAURI L A， LUJN-MORA S. A Heuristic Method to

Evaluate Web Accessibility for Users with Low Vision ［J］. IEEE Access， 2019， 7： 125634-125648.

（責任編輯： 韓" 嘯）