2022年6月20日

上網瀏覽前先認識網頁元素

一般人打開瀏覽器上網是再平常不過的事,但對視障者來說卻有難度,原因在於網頁的內容是以非常視覺化的型式呈現,要如何將視覺化的內容經由適當的轉換傳達給視障者,需依靠螢幕報讀軟體如 NVDA 的幫忙。
視障者雖借由螢幕報讀軟體的協助瀏覽網頁,但與一般人瀏覽網頁的行為截然不同,一般人瀏覽網頁是一次看到一個平面的範圍,因此很容易知道一個範圍內的內容及它們之間的關係,哪裡有文字、圖片或連結等一目了然,視障者透過螢幕報讀軟體瀏覽網頁是線性式的閱讀,而不是一個面的範圍,就像我們在聽音樂一樣,播過去了才知道內容是什麼,還沒播到的部份就不知道是什麼內容,因應這樣的瀏覽特性,視障者瀏覽網頁時要能夠辨別分類網頁內容,有系統的進行瀏覽。

網頁內容是經由 HTML 語言將文字、圖片、表格等組織起來,透過瀏覽器的轉換呈現在我們眼前,為了使網頁上的內容能以適當的方式呈現或能夠與使用者互動,HTML 語言中定義了許多標籤來包裝,這些被包裝起來的內容即我們常說的元素。
以 NVDA為例, 瀏覽網頁時 NVDA 是解讀這些元素所使用的標籤並提示使用者該元素為何物,因此使用者會得到諸如連結、表格、按鈕等對元素類型的提示,這些元素有些跟我們對傳統印刷文件上所呈現的內容或是電腦使用環境的認知是相同的,故理解上不致有什麼困難,有些則是網頁環境才有的元素。
從視覺角度而言,瀏覽網頁就是觀看螢幕上所呈現出來的內容,這些內容是用什麼方法或技術產生的使用者並不需要知道,也就是說網頁上的內容使用了什麼 HTML 標籤並不重要,以致於對網頁元素的理解認知是有限的,而 NVDA 卻偏偏告知的是元素所使用的標籤,如何將 NvDA 的解讀與視覺上的呈現能相互𧏳轉換是剛開始學習以 NVDA 瀏覽網頁的人最感困難之處。

網頁內容的構成元素除了你能想到的文字、圖片、表格外,還包括標題、連結、清單、表單等,以下說明這些常見的元素。

  • 文字:文字是構成頁面內容最主要的元素,也是傳達粢訊最主要的方式,沒有了文字,網頁就沒有了生命力。
  • 連結:連結就像一條捷徑,讓你可以直通到另一個網站或是網頁,有了連結網路世界就能四通八達無遠弗界。連結一般可分為文字連結與圖片連結兩種,連結除可連到另一個頁面外也可以是同一個網頁的某個位置,有些連結則被賦予了執行動作的功能。
  • 表格:表格是表現粢料相互關係一個很好的方法,不過在網頁的呈現上表格不一定只是用來呈現資料,它也可能用於版面的編排,使頁面的內容具有整齊美觀的效果,當用於版面編排用途時通常不會有格線,所以看不出來有表格在頁面上。
  • 圖像:有句話說「一圖解千文」,有些時候文字的敘述不如用圖或照片來表示更容易讓人理解,另外為了版面美觀的關係會有一些裝飾性的圖片,使得頁面較活潑不至於太單調。
  • 清單:清單就是條列式的項目,有些清單有數字編號,有些是以符號的方式代替編號,也有的是項目前無任何編號或符號,清單一般來說是上下排列的方式,但在網頁上基於版面編排的關係也有可能是水平排列的方式。較特別的是網頁上清單裡的項目彼此未必就是我們認知有相關性的條列項目,很多時候是用於將網頁元素進行邏輯結構上的分組。
  • 表單:在網頁上要填寫一些資料,或是選擇條件時就會用到所謂的表單,表單是一個統稱,它包括文字欄位、選擇鈕、核取方塊、下拉式方塊及按鈕,這些剛好跟 Windows 環境下視窗或對話方塊裡的控制項有部份是一樣的,外觀上也相似。
  • 標題:標題可以用來彰顯網頁內容編排的層次,其層次的關係可分1到6層,標題的文字通常較大較粗,看上去也較為醒目,不同層次的標題文字大小有別,愈上層文字愈大,反之則愈小。
  • 物件:網頁上的聲音或是影片播放都是物件,也是網頁內容豐富精彩的重要元素,一般人很難不被吸引。
  • 頁框:頁框也是一個用於呈現網頁內容的區塊,只不過其內容可與頁框以外的網頁內容沒有任何關系,是嵌入網頁的獨立範圍,頁框內容變更或捲動時網頁上的其它部份可不受到影響,視覺上通常看不出哪裡是頁框的區塊,與網頁內容的呈現合而為一。
  • 結構元素:網頁內容的呈現多彩繽紛,看似恣意揮灑實則有規則可尋,我們常說的整體架構在網頁內容的組成上同樣存在,只不過視覺上看不出來。前述提及的各種元素都會被以結構化的方式編排在網頁的整體架構中,這些構成整體網頁架構的元素即為結構元素,它們承載了上述提及的各種外顯可見的元素,本身卻是低調不可見的存在。對於結構元素目前 NvDA 有提示的包括「橫幅區、表單區、導覽區、主要內容區、補充區、資訊區」,相關說明可參考文末延伸閱讀的〈我看到地標了……但不是101〉一文。

這些被以不同標籤包裝的元素在視覺的呈現上往往是看不出來的,這就是為什麼你會對 NVDA 的提示感到不解的原因,如果把這些提示拿掉,你對網頁的認知理解比起視覺上的認知恐怕更加遙遠。

HTML 語言所呈現出來的是以靜態的內容為主,對於需要動態與互動的內容還需利用 Javascript 語言來助一臂之力,兩者搭配運用使得現今網頁內容的呈現與互動效果更為靈活多變,不過這也導致有些網頁元素無法順利以報讀軟體讀取或操作,加入 ARIA 技術的運用可有效改善這種情況,若網頁內容的呈現能進一步符合國際無障礙網頁規範的要求,視障者將能順利使用報讀軟體瀏覽網頁並進行互動操作。

延伸閱讀