在上篇中，我們了解了 Carousel 元件所要具備的基本無障礙功能與特色，在這篇中，我們將繼續來討論各種關於 carousel 的無障礙話題。雖然 carousel 在網頁上非常常見，但是實際上在無障礙方面所帶來的挑戰並不少，我們一起來看看吧！
關於這個問題， 無障礙專家以及 WebAIM 的主導人之一 Jared Smith 做了一個有趣的迷你網站來告訴大家，其實輪播元件元件沒有想像中的那麼好用！根據調查，雖然一個輪播元件可以包含多個內容，但實際上僅有 1% 的使用者會與輪播作互動，意思就是，輪播元件的大部分內容都是被使用者忽略的。
此外，輪播元件的無障礙對於設計與工程都是個挑戰，有非常多的細節要注意，一不小心就會做得不好。因此，他的建議是，如果能盡量不用輪播元件就盡量不用，如果上級或是團隊成員堅持使用的話，可以讓他們使用螢幕閱讀器體驗看看，並做好完善的無障礙考量。
自動輪播看起來是一個使用者友善的功能，但是它可能帶來一些無障礙的問題：
- 分散認知障礙使用者的注意力：對於有認知障礙的使用者，例如注意力不足障礙，不斷改變的內容可能會造成分心，使他們難以專注於網站並與網站互動
- 使用者閱讀時間差異：每個人都會以自己的速度閱讀和處理資訊。自動切換的輪播元件可能會讓需要更多時間來理解內容的使用者感到挫折，因為幻燈片可能會在他們理解資訊以前就改變
- 沒有為螢幕閱讀器使用者帶來便利：輪播內容自動切換時，視覺上雖然明顯，但對螢幕閱讀器使用者卻不直觀，可能難以察覺變更。即使設置了 aria-live，其作用仍然有限，使用者還是需返回輪播區塊去檢視新內容。
為了確保所有人都能輕鬆使用輪播元件，可以考慮以下幾種解決方案：
- 移除自動輪播功能，讓使用者完全控制內容變換的時間
- 對於偏好不啟用動畫的使用者 (prefers-reduced-motion)，不應開啟自動輪播
- 如果無法移除自動輪播功能，則加入 Rotation Control 的按鈕
- 當使用者將鍵盤焦點停在輪播元件內的元素上時，暫停自動輪播
- 當使用者將滑鼠懸停在輪播元件內的元素上時，暫停自動輪播
@media (prefers-reduced-motion: reduce) {
/* 如果使用者的裝置設定為偏好減少動態，所應用的樣式 */
}
const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
if (isReduced) {
// 不執行 JS 動畫
} else {
// 執行 JS 動畫
}
有些輪播元件僅允許在觸控螢幕上使用滑動手勢進行瀏覽，儘管這看起來很直覺，但卻排除了無法做這種手勢的使用者，例如有肢體障礙的使用者，讓他們完全無法與輪播元件進行互動。
此外，這種作法對於依賴鍵盤的使用者來說也是完全無法使用的，因此，在滑動操作以外，請務必提供可透過點擊來使用的操作，這可以讓使用者輕鬆地在幻燈片間移動，而不需要複雜的手勢。
在一個輪播元件中可能包含不同的可聚焦元素，因此我們需要確保焦點的順序對於螢幕閱讀器使用者是合理的、易操作的，而不會因為焦點變化或缺失而感到困惑。
例如，在輪播元件中，第一個可聚焦的元素必須是切換自動輪播狀態按鈕，好方便螢幕閱讀器使用者可以快速地操作這個重要功能。如果今天設計稿上自動輪播按鈕呈現在前、後輪播元件按鈕的後面時，在實作上，元素在 DOM 中的順序與視覺上的順序可以不同。 在 DOM 上我們還是可以維持自動輪播按鈕為第一個可聚焦元素，但是透過 CSS Flex 或 Grid 的方式去改變元素的呈現順序。
使用 aria-live 的方式可以有效地讓螢幕閱讀器在幻燈片內容變化時自動播報，幫助輔助科技使用者了解當前顯示的內容。然而，應謹慎使用，避免對使用者造成干擾：
- 當幻燈片切換時，應自動播報新的幻燈片內容，讓使用者及時獲知當前資訊
- 如果輪播元件處於自動播放模式，當播放狀態發生改變（例如自動輪播暫停、重新開始或切換幻燈片）時，也應通知螢幕閱讀器使用者這一變化
- 重要提示：如果內容變化不是由使用者的主動操作引起，就不應使用 aria-live，以避免不必要的干擾
如同其他複雜的 UI 元件，輪播元件同樣必須注意關於視覺呈現的無障礙體驗，以避免對於不同障礙類型的使用者造成困難。一些常見的問題包括：
- 顏色對比不足： 當按鈕或箭頭與其背景缺乏足夠的對比度時，使用者幾乎看不到這些按鈕或箭頭，使他們難以與輪播元件互動
- 缺乏明顯焦點樣式： 如果對比度變化太小或寬度不足，使用者可能無法意識到某個元素已獲得焦點，尤其是有視覺障礙的使用者
- 觸控目標尺寸過小： 較小的按鈕或觸控目標會讓使用者難以與輪播元件互動，尤其是切換到特定幻燈片的操作按鈕
- 缺乏進度指標： 許多輪播元件都無法清楚地顯示目前的滑動位置。如果沒有可存取的進度指示器，使用者可能無法知道他們正在檢視哪一張幻燈片
要讓輪播元件符合無障礙不是一件容易的事，有非常多的細節需要去關注。但是，可以總結為以下這些點：
- 允許使用者能夠停止或暫停輪播元件
- 不要只依賴滑動操作，使用簡單的點擊就能與輪播元件互動
- 使用語意化 HTML，讓輔助科技使用者可以理解輪播元件的結構
- 使用 ARIA 標籤來提供充足的語意與功能
- 在 DOM 中合理安排元素的位置，不一定要與視覺位置相同
- 可互動元素都能透過鍵盤操作，並且具有可訪問名稱
- 若採用一系列元素來切換幻燈片，建議遵守 APG Tab Pattern
- 提供清楚可見的焦點樣式
- 確保輪播元件中的元素有足夠的對比度和尺寸
參考資料
