iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 22
1
Modern Web

實踐無障礙網頁設計(Web Accessibility)系列 第 22

實作無障礙網頁功能:頁籤 Tabs

這系列無障礙的鐵人賽文章,實踐的內容主要是根據 W3C:WAI-ARIA 的實踐,從設計模式及組件(Design Patterns and Widgets)裡面挑選最想嘗試的,如果有朋友想瞭解全部 Widget 該怎麼實作及其規範,歡迎自行爬規範內容,也許我們可以討論一下;若以下文章內容理解有任何錯誤,請多指教~

(圖片來源:Element UI

頁籤 Tabs(打開文件

3.22 Tabs
Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.

Tabs 是由一系列層疊的內容區域(tab panels)組成的,一次只展示一個 tabpanel。每個 tabpanel 有一個與之關聯的 tab 元素,寫完發現唸起來好繞口,乾脆引用上面的 Element UI 頁籤圖片,將接下來會提及的專有名詞做成示意圖來表示,大家會更一目瞭然。

  • 一整組的頁籤,包含頁籤關聯的內容稱之為 TabsTabbed Interface
    • Tab List:含有「一系列」頁籤標題的區塊。
      • tab:讓使用者可以點擊切換顯示內容的元素。
    • tabpanel:當關聯的 tab 被觸發,顯示 tabpanel 的內容。

了解這幾個名詞的意義及他們之間的關係,可以幫助理解後面無障礙的說明。


上一篇
實作無障礙網頁功能:表格(Table)原來可以補充的語義這麼多!
下一篇
實作無障礙網頁功能:此 Switch 非彼 Switch,可訪問的雙狀態開關作法。
系列文
實踐無障礙網頁設計(Web Accessibility)30

尚未有邦友留言

立即登入留言