Carousel

Demo 與 Accessibility Tree

近期活動

秋季特展

展期到 11 月底，持學生證可享半價。

Accessibility Tree

觀察對象：群組式輪播的容器。

元素目前不在無障礙樹中。

Accessibility Tree

觀察對象：目前顯示的投影片。

元素目前不在無障礙樹中。

Accessibility Tree

觀察對象：對應目前這張的選取按鈕。

元素目前不在無障礙樹中。

近期活動（Tab 型選取器）

秋季特展

展期到 11 月底，持學生證可享半價。

Accessibility Tree

觀察對象：目前作用中的分頁。

元素目前不在無障礙樹中。

Accessibility Tree

觀察對象：目前顯示的投影片。

元素目前不在無障礙樹中。

鍵盤操作

按鍵	行為
`Tab`	逐一移入控制元件。群組式的選取按鈕全部留在 Tab 順序裡，包含目前那一張的 —— 它標的是 aria-disabled 而非原生 disabled，使用者走得過去才知道自己在第幾張。
`Enter / Space`	啟動聚焦中的控制元件。上一張、下一張、播放與選取按鈕都是原生 <button>，這個行為由平台提供。
`← / →`	Tab 型選取器才有：在分頁之間移動並切換投影片。群組式的選取按鈕是獨立按鈕，各佔一個停留點，不接方向鍵。
`Home / End`	Tab 型選取器才有：跳到第一張或最後一張。

ARIA 屬性

屬性	值	用途
`role（容器）`	`group`	輪播容器。只有在這個輪播適合成為地標、值得讓使用者從地標清單直接跳進來時才用 region；否則用 group。這個範例的頁面還有別的內容更該被跳到，所以是 group。
`aria-roledescription`	`carousel`	螢幕閱讀器會唸這個字取代角色名 ——「carousel」而不是「群組」。它不改變角色，輔助科技操作這個元素的方式仍然照 group 走。面板的 Role 列把兩個都列出來。
`aria-labelledby（容器）`	`可見標題的 id`	輪播的名稱。名稱裡不要再出現「輪播」—— 角色描述已經說過一次，重複會唸成「carousel，近期活動輪播」。
`aria-roledescription（投影片）`	`slide`	群組式的投影片用 role=group 加上這個角色描述。Tab 型的投影片是 tabpanel，不得加角色描述 —— 名稱已由對應的 tab 提供，再加一次會變成兩層重複的播報。
`aria-label（投影片）`	`第 1 張，共 3 張：秋季特展`	每張投影片要有能辨識內容的名稱。給不出獨特名稱時才退回位置式的「第 3 張，共 10 張」。名稱裡不要再出現「投影片」。
`aria-live`	`off / polite`	放在投影片的外層容器上。自動輪播中是 off，停下來才是 polite —— 使用者自己按下一張的結果需要被報讀，但每四秒自動插話一次會讓螢幕閱讀器無法用。
`aria-atomic`	`false`	有 aria-live 就要一起設。false 表示只報讀換掉的那一部分；少了它，部分輔助科技會把整個容器從頭重讀一次。
`aria-label（播放控制）`	`播放輪播 / 停止輪播`	名稱要說出按下去會發生什麼，隨狀態改變。不要用 aria-pressed —— 那是 Toggle Button 的做法，而這顆按鈕已經靠名稱表達狀態，兩者併用會唸出互相矛盾的資訊。
`aria-disabled（選取按鈕）`	`true`	群組式選取器中，對應目前這張的按鈕要標上它 —— 按下去不會有任何變化。但必須留在 Tab 順序裡，所以不能用原生 disabled。
`role（Tab 型選取器）`	`tablist / tab`	Tab 型的選取按鈕是 tablist 裡的 tab，整組只佔一個停留點。tablist 的 aria-label 要說明這組 tab 的用途，每個 tab 的名稱要指出它顯示哪一張。
`aria-controls`	`目前投影片的 id`	指出這個控制元件操作的是哪個元素。支援程度不一，但它不會有害，而且在 Tab 型裡是 tab 與 tabpanel 關聯的必要環節。

WCAG 對應

等級 A1.3.1 資訊及關聯性
投影片與選取控制、控制與它操作的投影片，關聯都以 role 與 aria-controls 表達。
等級 A2.1.1 鍵盤
切換、選取與播放控制都能只用鍵盤完成。
等級 A2.2.2 暫停、停止、隱藏
自動輪播預設關閉，啟動後可隨時停止。超過五秒的自動動態內容必須提供停止的方法 —— 預設不動是比「動了可以停」更省事的做法。
等級 AA2.4.7 焦點可見
所有控制元件聚焦時都有橘色 focus ring，包含那幾顆圓點。
等級 A4.1.2 名稱、角色、值
容器、投影片與每個控制元件都有正確的角色與名稱；播放狀態以名稱表達，選取狀態以 aria-selected 或 aria-disabled 表達。
等級 AA4.1.3 狀態訊息
手動切換投影片時以 aria-live=polite 報讀新內容；自動輪播期間改為 off，避免持續打斷。

APG 規則

頁面結構
輪播容器的角色設定須符合頁面的資訊架構
包含控制元件與投影片的輪播容器，只有在該輪播適合成為地標（landmark）時才使用 role=region，否則須使用 role=group。
元件語意
輪播容器須標記 carousel 的角色描述
輪播容器須設定 aria-roledescription=carousel。
元件語意
輪播容器須具有無障礙名稱
輪播有可見標題時，輪播容器須以 aria-labelledby 提供無障礙名稱，否則須使用 aria-label；名稱中不得重複出現「輪播」一詞。
元件語意
上一張與下一張的控制元件須具備 button 角色語意
上一張與下一張投影片的控制元件，須使用原生 button 元素，或完整實作 Button Pattern。
元件語意
播放控制元件的標籤須說明點擊後的下一步動作
播放控制元件的名稱須隨下一個動作改變，例如「停止輪播」或「開始輪播」，且不得使用 aria-pressed。
元件語意
基本輪播與群組式輪播的每張投影片須具備 group 角色與 slide 角色描述
基本輪播與群組式輪播中，每個投影片容器須設定 role=group 與 aria-roledescription=slide；Tab 型輪播則改用 tabpanel 結構，另行檢測。
元件語意
基本輪播與群組式輪播的每張投影片須具備有意義的無障礙名稱
基本輪播與群組式輪播中，每張投影片須以 aria-labelledby 或 aria-label 提供能辨識其內容的無障礙名稱；若無法給出各自獨特的名稱，可改用位置與總數，例如「第 3 張，共 10 張」。名稱中不得重複出現「投影片」一詞。
狀態訊息選做
輪播的 aria-live 設定須與播放狀態相符
若投影片外層容器使用 aria-live，須同時設定 aria-atomic=false；自動播放進行中時 aria-live 須為 off，未自動播放時則為 polite。
元件語意選做
Tab 型輪播投影片使用 tabpanel 角色語意
若採用 Tab 型投影片選取器，每個投影片容器須設定 role=tabpanel 而非 role=group，且不得設定 aria-roledescription。
元件語意選做
Tab 型輪播選擇器的 Tab 須對應標示各投影片
若採用 Tab 型投影片選取器，每個 Tab 的無障礙名稱須以名稱或編號指出其所顯示的投影片。
元件語意選做
Tab 型輪播選擇器的 tablist 須具備說明其用途的標籤
若採用 Tab 型投影片選取器，其 tablist 須以 aria-label 說明這組 Tab 的用途。
元件語意選做
群組式輪播選取器的容器須具備無障礙名稱
若採用群組式按鈕作為投影片選取器，這些按鈕須置於 role=group 的容器內，且該容器的無障礙名稱須說明這組控制元件的用途。
元件語意選做
群組式輪播選取器的控制元件須以 Button 實作
若採用群組式按鈕作為投影片選取器，每個選取控制元件須使用原生 button 元素，或完整實作 Button Pattern。
元件語意選做
群組式輪播選取器的按鈕須具備與對應投影片相符的無障礙名稱
若採用群組式按鈕作為投影片選取器，每個選取按鈕的無障礙名稱須與其所顯示的投影片相符。
元件語意選做
群組式輪播目前顯示投影片的選取器的按鈕須標記 aria-disabled
群組式輪播中，對應目前顯示投影片的選取按鈕須設定 aria-disabled=true，且仍須保留在頁面的 Tab 鍵順序中。
焦點管理
播放控制元件為輪播中第一個 Tab 鍵停駐點
若輪播提供播放控制元件，該元件須是輪播內 Tab 鍵順序中的第一個元素。
動態內容
鍵盤聚焦時自動播放應暫停
若輪播會自動播放，輪播內任一元素取得鍵盤焦點時，須停止播放，且在使用者主動要求前不得自行恢復。
動態內容
滑鼠懸停時自動播放應暫停
若輪播會自動播放，只要滑鼠停留在輪播範圍內，就須停止播放。
焦點管理
輪播中的互動元素須依循頁面的 Tab 鍵順序
Tab 鍵與 Shift+Tab 鍵須依頁面既有的 Tab 鍵順序在輪播的互動元素間移動，不得另外撰寫程式改寫 Tab 鍵行為。
焦點管理
操作輪播控制元件時不應改變鍵盤的聚焦位置
觸發播放、上一張或下一張控制元件後，鍵盤焦點須留在原控制元件上，不得移動。
鍵盤操作選做
Tab 型輪播選擇器完整實作 Tabs Pattern
若採用 Tab 型投影片選取器，其 tablist、tab 與 tabpanel 的角色、關聯、狀態與鍵盤操作，須完全依循 Tabs Pattern 的定義。
動態內容
自動輪播須提供播放控制元件
若輪播具備自動播放功能，須提供可停止與重新開始自動播放的按鈕。
閱讀順序
隱藏中的輪播投影片不應被輔助科技讀取
未在畫面上顯示的投影片，須確實對輔助科技隱藏，不得只是移到畫面外。
焦點管理
隱藏中的輪播投影片不能被鍵盤聚焦
未在畫面上顯示的投影片，其內部的可聚焦元素須排除於頁面的鍵盤焦點順序之外。