iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 18
1
Modern Web

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

實作無障礙網頁功能:輪播圖 Carousel

這系列無障礙的鐵人賽文章,實踐的內容主要是根據 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 要顯示的內容。


鍵盤的可訪問性

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

上一篇
實作無障礙網頁功能:超連結還能怎樣無障礙呢?
下一篇
實作無障礙網頁功能:全都要不行嗎...之 checkbox 複選元件
系列文
實踐無障礙網頁設計(Web Accessibility)30

尚未有邦友留言

立即登入留言