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

（來源：Unsplash）

輪播圖 Carousel（打開文件）

3.6 Carousel
A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides. Typically, one slide is displayed at a time, and users can activate a next or previous slide control that hides the current slide and "rotates" the next or previous slide into view.

Carousel 這個單字是「旋轉木馬的意思」，用這個字代表輪播圖組件實在很有意思，旋轉木馬繞了一圈又會回到最一開始的那隻馬，就像照片按照清單輪流播放，直到最後一張，又會從第一張開始。其實自己手刻輪播圖需要蠻多時間的，我有手刻過（汗顏），不過第一次使用別人寫好的輪播圖組件就是在剛開始學習用 CSS Framework 切版的時候了！

輪播圖這個功能基本上要滿足以下功能：

• 顯示「上一張」與「下一張」的按鈕
• 如果輪播圖是自動播放的話
  • 提供可以「停止播放」與「繼續播放」的按鈕，這對於不支援鍵盤與滑鼠的輔助科技尤其重要。
  • 當「鍵盤焦點」在「輪播圖」組件上時，請停止播放，除非使用者自己重啟播放機制，比如說按了「繼續播放」按鈕。
  • 當「滑鼠游標」移到「輪播圖」組件上時，也請停止播放，可以使用 mouseover 事件監聽「輪播圖」組件。
• （可選的）設計讓使用者可選擇要顯示哪一張的一組操作選項。比如說，可以使用 tab 這個設計模式的概念（如下圖），使用者可以點選 tab list 中的任何一個 tab 去操縱 tabpanel 要顯示的內容。

鍵盤的可訪問性

• 當輪播圖是自動播放的情境下
  • 若輪播圖組件或是組件中的任一控制按鈕取得鍵盤焦點時，就停止播放。
• Tab 與 Shift + Tab
  • 讓輪播圖中的每個控制元素都能按照 DOM 順序排列，這樣透過 Tab 與 Shift + Tab 取得控制元素焦點時，都能與預期相符，我們也不用在撰寫程式碼去控制焦點的順序。
  • 按鈕元素就按照「button 模式」定義的鍵盤互動建議即可。使用者在觸發輪播控制項，如「停止播放」、「上一張」、「下一張」等，焦點保持在剛剛觸發的按鈕上面（也就是不進行移動的意思），這樣一來，使用者可以繼續順利地操作。
  • 將輪播的控制項「停止播放」、「繼續播放」的功能放在 Tab 順序中的第一個，讓使用者在取得焦點時，能立即地操作輪播圖組件。
  • 上個段落有提及「使用者可選擇要顯示哪一張的一組操作選項」，是可選的，如果你今天提供的這個輪播圖控制項，那麼請符合「 Tabs Pattern」的最佳建議。