跳到主要內容區塊

網站導覽的無障礙設計

網站幫助使用者導覽的方法,包括協助使用者瀏覽方式、尋找內容及知道身處何處的位置識別等方式。在這些方法裡面,對於內容可及性最可能產生明顯的問題是焦點順序,使用鍵盤是否能遊走每個可獲得焦點的項目(鍵盤焦點三寶:連結、按鈕、輸入框),不會因跳過沒游走到而錯過內容,如果沒有被游走到或順序亂跳,對於需要依靠鍵盤操作的使用者,將造成明顯的使用障礙,那些無法游走進入的焦點就如同消失的密室,讓使用者無法一窺究竟。然而,其他方法主要在於幫助使用者更有效率的使用網站服務,因為這些導覽方法如果不明確時,使用者需要每個都去試試看,當個探險活寶,並不會發生無法使用的情形,不過,話雖如此,這卻將帶給使用者不方便,以及很不友善的網站使用體驗。

有關協助使用者瀏覽方式,首先,網站必須提供跳過重複內容區塊的方法,包括跳到主要內容區、跳過群組的連結等,並且提供多重的瀏覽方法,如網站導覽、內容目錄、搜尋功能等,讓使用者可以有效率地到達想去的地方,獲得想要的內容與服務(A)。再者,針對內容脈絡中的連結,能以程式化的方式將內容脈絡與連結串起來,如連往相同資源的毗鄰圖片與文字(A)。對於單獨存在的連結,需具明確揭露連結的目的,如使用aria-label或aria-labelledby(AAA)。

有關協助使用者尋找內容方面,最基本要項就是網頁需有標題(Title),針對各個頁面給予描述該頁面特點的標題,而不是網站內所有頁面都一樣,可以讓使用者可以很快地從標題得知頁面內容資訊,尤其對於螢幕報讀器的使用者,除了馬上得知頁面標題,同時提供感知網頁脈絡的改變(A)。再者,提供頁面中的資訊內容具備描述性質的標頭(Headings)及標籤(Labels),讓使用者了解頁面內有甚麼內容及如何組織,加上使用H1~H6,可以提供程式化判讀,此外,對於頁面上提供使用者輸入的表單組件,如果表單是必填的欄位,需使用label標籤且標示「必填」的文字描述(AA)。最後,對於網頁中的資訊內容較複雜、篇幅較長時,適當地分段,並使用H標籤組織頁面的資訊內容,可以讓使用者更容易理解內容(AAA)。

有關協助使用者進行位置識別方面,必須讓取得焦點的元素按照具有邏輯意義安排的順序跳位,一般而言,視覺上看見的順序應與語法(Tabindex)的設定相同,使用鍵盤的Tab鍵時,通常的順序為由上而下、由左至右(A)。鍵盤遊走焦點時,必須提供永久可視且具高可見度的焦點標示(AA)。最後,提供使用者知道所在的網頁位置,如網站導覽、路徑連結列(breadcrumb)、步驟指示等方法(AAA),幫助使用者在網站瀏覽的歷程中不會迷路。

表1:網站導覽與等級對照表

導覽方法與等級

A

AA

AAA

瀏覽方式

跳過重複的內容區塊

--

單獨存在的連結

內容脈絡中的連結

多重瀏覽方法(如網站導覽、內容目錄、搜尋等)

尋找內容

網頁標題

標頭及標籤

區段標頭來組織內容

位置識別

焦點順序

焦點具高可見度

判斷所在位置

 

備註:「--」表示無該等級的要求。

 

參考來源:

  1. 無障礙網路空間服務網,https://www.handicap-free.nat.gov.tw/Home/Info
  2. Web Content Accessibility Guidelines (WCAG) 2.0,https://www.w3.org/TR/WCAG20/