頁籤設計需注意事宜
- 點閱:20800
- 資料來源:本服務網
- 日期:111-06-17
- 當瀏覽器不支援頁籤功能時,必須在網頁上顯示不支援提示說明,並提供替代顯示方案,如列出全部內容。
- 必須提供鍵盤操作的模式,勿僅能使用滑鼠操作。
- 提供鍵盤操作時,請注意鍵盤游標的移動規則。
遊走方式說明
範例1:每個頁籤內的訊息內容皆依序遊走之方式
假設有4個不同的標題的頁籤及訊息,可使用鍵盤「Tab」鍵依序先遊走標題再走內容的方式,遊走方式為「由上而下」後「由左而右」,先走完第一個頁籤的內容後,再遊走第二頁籤的內容,再遊走第三個頁籤的內容,最後再走第四個頁籤的內容。也可以使用鍵盤「SHIFT」+「TAB」鍵往回遊走。

範例網站:「數位發展部-政府網站營運交流平台」(另開新視窗)|;網址:https://www.webguide.nat.gov.tw/。
範例2:先遊走並選取頁籤標題後再遊走頁籤訊息內容之方式
假設有多個不同標題的頁籤及訊息內容,依「先左而右」再「由上而下」的順序,使用鍵盤「TAB鍵」或「Shift」+「Tab」鍵左右遊走「標題」,選定「標題」頁籤後再遊走該「頁籤」內資訊內容。

範例網站:「金融監督管理委員會全球資訊網」(另開新視窗)|;網址:https://www.fsc.gov.tw/ch/index.jsp。
範例3:使用左右方向鍵選取頁籤標題後再以Tab鍵遊走頁籤訊息內容之方式
假設有多個不同標題的頁籤及訊息內容,依「先左而右」再「由上而下」的順序,使用左、右方向鍵遊走「標題」,選定「標題」頁籤後,再以Tab鍵繼續遊走該「頁籤」內資訊內容。

範例網站:「臺北市立中崙高級中學」(另開新視窗)|;網址:https://www.zlsh.tp.edu.tw/。
參考資料:
【網站無障礙規範(110.07)】
指引2.1:鍵盤可操作 - 讓所有的功能都能透過鍵盤使用
成功準則2.1.1:鍵盤 (檢測等級A)
內容的所有功能都能透過鍵盤介面來操作,而且不能額外要求在限定時間內完成按鍵操作。特殊目的的網頁(例如遊戲網頁要求在特定時間內完成指定操作)不在此限。
GN1210100E 提供由鍵盤觸發的事件處理程式
GN1210101E 確認所有功能都能透過鍵盤介面來操作
指引2.4:可導覽 - 提供協助使用者導覽、尋找內容及判斷所在的方法。
成功準則2.4.3:焦點順序 (檢測等級A)
如果網頁能依序導覽,且導覽順序將會影響到意義或操作,則可取得焦點的元件要以能保留意義與操作性的順序,來取得焦點。
GN1240300E 按照內容的序列及關連性來安排互動元件的放置順序
【網站無障礙規範2.0版】
指引五(鍵盤可操作):讓所有的功能都能透過鍵盤使用
5.1(檢測等級A)內容的所有功能都能透過鍵盤介面來操作,而且不能額外要求在限定時間內完成按鍵操作。特殊目的的網頁(例如遊戲網頁要求在特定時間內完成指定操作)不在此限。
相關稽核評量碼
EV1050100:提供由鍵盤觸發的事件處理程式
EV1050101:確認所有功能都能透過鍵盤介面來操作