Carousel（輪播元件）是一種常見的網頁元件，可以用來展示多種類型的內容（如圖片、文字、影片等）。使用者可以手動或自動切換輪播元件中的幻燈片，讓網頁在節省空間的情況下提供更多資訊。這種設計常見於電子商務、新聞、作品集展示網站上。
輪播元件通常提供一組按鈕或左右/上下滑動手勢的操作，讓使用者可以手動切換上一張/下一張幻燈片；另一個常見的功能則是會搭配一組沒有文字標籤的小按鈕，讓使用者可以快速切換到特定的幻燈片上。此外，當頁面載入時，有些輪播元件會做成自動開始播放幻燈片的設計。
- Slide: 輪播元件中的幻燈片。
- Rotation Control: 用來關閉或開啟自動輪播的按鈕。
- Next Slide Control: 用來切換到下一個幻燈片的按鈕，通常具有箭頭樣式。
- Previous Slide Control: 用來切換到上一個幻燈片的按鈕，通常具有箭頭樣式。
- Slide Picker Controls: 一組讓使用者可以開啟特定幻燈片的元素，通常會以一系列圓點來呈現。
- 具有切換到上一張幻燈片、下一張幻燈片的按鈕
- 可使用一系列操作元件來顯示特定的幻燈片 (建議可用 Tab Pattern 來實作)
如果輪播元件會自動輪播：
- 必須要有可以切換自動輪播狀態(播放/停止)的按鈕，此按鈕須為輪播元件中「第一個」可聚焦元素
- 當鍵盤焦點移至輪播元件內的元素時，停止自動輪播。除非使用者主動開啟，否則不會重新開始自動輪播
- 當滑鼠 hover 在輪播元件上方時，停止自動輪播
輪播元件容器 Carousel Container
- 輪播元件容器 (包含底下所有子元件，幻燈片、控制按鈕等的容器的元素)，必須有 role=”region” 或 role=”group”。至於這兩個 role 該選擇哪一個，則必須依照頁面的資訊架構來決定(可參考 Landmark Regions Practice)
- 輪播元件容器需設定 aria-roledescription=”carousel”
- 輪播元件容器需有可訪問名稱，可使用 aria-label 或 aria-labelledby 實作
切換自動輪播狀態的按鈕 Rotation Control
- 此按鈕具有可訪問名稱，此名稱會隨著按鈕執行的動作而改變，例如「停止(自動輪播)」或「開始(自動輪播)」
幻燈片 Slide
- 每個幻燈片的容器必須有 role=”group”，並設定 aria-roledescription=”slide”。
- 每個幻燈片需具有可訪問名稱：
- 可以使用 aria-label 或是 aria-labelledby 實作
- 如果每個幻燈片並沒有可供辨識的特殊名稱，可使用數字與群組大小，例如 “3 of 10”，來做為可訪問名稱。不過在一般情況下，並不建議這種做法。
- 包含所有幻燈片的容器可設定 aria-atomic=”false”，並針對不同的情境設定 aria-live 的值：ㄋ
- aria-live=”off”：若自動輪播開啟時，設定為 “off” 避免造成干擾
- aria-live=”polite”：若自動輪播關閉時，設定 “polite” 在切換幻燈片時報讀新幻燈片的資訊
在 APG 網站上的 Carousel Pattern 提供了兩個範例，一個是單純以按鈕來實作，一個是使用了 Tab Pattern 來實作 Slide Picker Controls 。
範例一：以按鈕為控制元件的自動輪播元件
這個輪播元件範例中有切換自動輪播狀態按鈕，以及切換到上、下一張幻燈片的按鈕。它展示了輪播模式的一些基本特色，例如，當使用者將焦點移動到輪播元件或將滑鼠 hover 在輪播元件的內容上時，自動輪播就會停止。
範例二：以 Tabs 為控制元件的自動輪播元件
範例二與範例一同樣都有切換自動輪播狀態按鈕，不過，這個範例使用 Tab Pattern 來實作可以快速切換到特定幻燈片的操作元件。對於 Tab Pattern 還不熟悉的讀者，可以先閱讀這篇文章：理解 Accessible Components: Tabs 篇。
除了上一段所提到的功能與 ARIA 屬性外，這兩個範例還增加了一些提升使用者體驗的功能：
- 前面提到當焦點移動到輪播元件的內容上時，會停止自動輪播，但唯一的例外是焦點停在 Rotation Control 的按鈕上，自動輪播不會停止
- 當焦點移出輪播元件時，除非滿足以下條件，否則返回預設狀態(網頁初始載入時的狀態)
- 滑鼠仍 hover 在輪播區域上
- 使用者點擊了切換撥放的按鈕，由於使用者已明確表達希望自動輪播的狀態，因此不回復預設狀態
- 如果作業系統已設定為減少動畫或停用動畫，自動輪播預設狀態就應該是暫停的
範例中沒提到，但還可以做的優化
- 不管目前自動輪播的狀態啟用與否，當使用者主動切換幻燈片的時候就應該使用 aria-live 的技巧來讓螢幕閱讀器報讀出切換的資訊， 這樣一來，使用者才知道切換的動作是有完成的。
- 在視覺上被隱藏(非顯示中)的幻燈片，在 accessibility tree 上也要一致的被隱藏，可以用 aria-hidden 來實作。
在下篇中，我們會繼續來看一些與輪播元件相關的無障礙討論，包括：自動輪播的功能可能會帶來哪些無障礙陷阱？有哪些小技巧可以用來提升輪播元件的無障礙體驗？
