無障礙網頁檢測培訓課程

第九章 輪播

輪播

說明

網站有時會使用輪播(跑馬燈/幻燈片) 或閃動等效果來呈現資訊，目的是以此效果引起使用者的注意。

輪播的項目有可能是單純的圖片，那就需要有圖片的態樣，也可能是可點擊的圖片連結，那就需要連結與圖片的態樣。

輪播與閃爍的速度不能太快，輕則造成頭暈不適，重則可能刺激到腦部疾病患者，如引起癲癇發作等狀況。

輪播項目需要控制介面，讓每個使用者調整成對自己舒服的方式，例如輪播速度的快慢或想暫停甚至關閉輪播功能等需求。

輪播的項目很容易造成導讀軟體來不及讀完該則資訊，或者焦點失焦的困擾，無法讓導讀軟體取得完整資訊也是經常發生的問題。

輪播的形式有：

1. 幻燈片：一次輪換一張圖片，一個畫面只看得到一張，沒有跑動效果
2. 跑馬燈：左右或上下移動的文字為主
3. 輪播項目：同時好幾個項目在輪換，一次可以看到一個或多個項目

總體而言，輪播項目的弊大於利，不推薦使用，若必須使用則需要遵守相關規範。

操作

1. 因為輪播中的項目不是圖片就是連結，所以沒有什麼特別的操作方式
2. 可以開啟點顯器以確認項目在輪播時是否會影響點顯器的顯示，通常在輪播區之後的所有區塊皆會被影響

態樣

1. 導讀軟體能夠搭配鍵盤讀取輪播項目之資訊
2. 需額外提供暫停或停止介面
3. 焦點移至可聚焦輪播項目時會自動暫停輪播，待焦點離開後再繼續輪播
4. 項目閃動速度一秒不得超過三次
5. 避免導讀軟體未讀完相關資訊就輪播其他項目
6. 輪播項目若有操作介面則需能支援鍵盤搭配導讀軟體之操作
7. 輪播項目在輪播時，焦點已在輪播項目外，不能影響點顯器之顯示，若有暫停或關閉機制則可通過檢測
8. 要有方法讓導讀軟體獲得所有輪播項目之資訊

設定

1. 當輪播項目影響點顯器之顯示時，為了便於進行後續其他檢測，可設定
   • NVDA 功能表 -> 偏好 -> 設定 -> 點字 -> 「點字游標跟隨」 選擇「系統焦點」

原碼範例

編號 1 跑馬燈

原碼

<marquee>第一則新聞</marquee>
<marquee>第二則新聞</marquee>

範例 1 跑馬燈

補充

實務上由於輪播效果通常需要使用套件或搭配其他前端程式語言產生效果，因此主要著重在實測範例

規範

1. GN1220201E 建立閃動少於5秒鐘的內容
2. GN1220205E 動畫GIF圖檔之閃動時間不超過五秒鐘
   • 動畫閃動長度多於5秒
3. GN1220200E 讓內容能加以暫停，並可從暫停處重新開始
   • 輪播項目未提供暫停機制
   • 焦點移到輪播項目駐點後，輪播效果沒有暫停
4. GN1220202E 在網頁內使用可以停止移動、閃動、自動更新等內容的控制元件
   • 輪播效果聲音干擾又無法暫停
5. GN1220203E 使用能由使用者代理關閉閃動內容的科技
   • 未提供關閉機制(實務上提供關閉或暫停擇一即可)
6. GN1220204E 提供鏈結、按鈕，或任何可以不閃動內容即重新載入頁面的機制
   • 未提供載入頁面機制並停止動態內容功能(實務上很少用)
7. GN1230100E 使用工具來確認內容不會超出一般閃爍閾值或紅閃爍閾值，或者確認在任何一秒鐘的週期內，沒有任何內容元素會閃爍超過三次
8. GN3230200E 確認在任何一秒鐘的週期內，沒有任何內容元素會閃爍超過三次
   • 一秒鐘有超過閃動三次的項目
9. GN1230101E 能讓閃爍區域保持夠小
   • 整個畫面超過一個地方有閃動項目(實務上很少用)
   • 閃動項目區塊過大(實務上很少用)
10. GN1210100E 提供由鍵盤觸發的事件處理程式
    • 輪播相關介面只能用滑鼠觸發。
11. GN1210101E 確認所有功能都能透過鍵盤介面來操作
    • 輪播相關介面不能用鍵盤操作或瀏覽。
12. GN3210300E 僅提供由鍵盤觸發的事件處理程式
    • 輪播項目未提供鍵盤與其他設備觸發。

實測

1. NVDA 台灣平臺 中央區塊輪播項目
   • 按快速鍵到中央區塊
   • 使用方向鍵往下操作並觀察
   • 通過，輪播項目取得焦點會暫停，也有提供手動暫停與開始之播放功能
   • 通過，輪播項目可瀏覽可操作
2. 台北市政府 中央區塊幻燈片
   • 按快速鍵到中央區塊
   • 按 l 到幻燈片連結清單(輪播項目1、輪播項目2等連結)
   • 不通過，沒有暫停輪播機制
   • 不通過，輪播項目連結提示文字目的不明確
3. 東吳大學 中央區塊之前的輪播區
   • 按快速鍵到中央區塊
   • 按 shift + l 到輪播項目連結清單
   • 通過，輪播項目有補充文字說明，可操作可瀏覽
   • 通過，輪播項目區塊可關閉
4. 衛生福利部草屯療養院 活動相簿前的圖檔輪播
   • 從網頁最上方按 2 到「活動相簿」第二級標題
   • 使用上方向鍵移到圖檔xxx為輪播項目
   • 不通過，沒有暫停輪播機制
5. 基隆旅遊網 中央區塊的幻燈片
   • 從網頁最上方按 b 跳到幻燈片項目的暫停按鈕「pause」
   • 使用 tab 鍵及方向鍵觀察幻燈片項目
   • 通過，連結有替代文字，可瀏覽可操作
   • 通過，可手動暫停與開始輪播
6. 台北市松山區公所 中央區塊的幻燈片
   • 按快速鍵到中央區塊
   • 使用 tab 鍵及方向鍵觀察幻燈片項目
   • 不通過，沒有暫停輪播機制
7. 花蓮觀光資訊網 中央區塊幻燈片
   • 從畫面最上方按 g 跳到幻燈片的第一個圖片
   • 使用 tab 鍵及方向鍵觀察幻燈片項目
   • 不通過，沒有暫停輪播機制
   • 不通過，當焦點可駐點時無法暫停輪播
8. 台南市白河區公所 中央區塊跑馬燈
   • 按快速鍵到中央區塊
   • 使用 tab 鍵及方向鍵觀察幻燈片項目(在最新消息前的那兩個連結)
   • 通過，兩個項目跑馬燈不影響導讀軟體之操作，連結態樣正確
9. 台南市白河區公所 中央區塊輪播項目
   • 在網頁最上方搜尋「上一則」連結
   • 往上觀察輪播項目(上一則的上面有三個專區連結為輪播項目)
   • 不通過，沒有暫停輪播機制
10. 新北市垃圾收運資訊查詢網 中央區塊開始處的輪播
    • 按快速鍵到中央區塊
    • 使用 tab 鍵及方向鍵觀察輪播項目(在索引標籤之前)
    • 不通過，沒有暫停輪播機制
11. 內政部警政署保安警察第二總隊 中央區塊一開始的跑馬燈
    • 按快速鍵到中央區塊
    • 使用方向鍵觀察跑馬燈項目(在索引標籤之前)
    • 通過，此跑馬燈不影響導讀軟體之操作，文字有呈現可瀏覽
12. 台中市政府 中央區塊輪播項目
    • 按快速鍵到中央區塊
    • 使用 tab 鍵及方向鍵觀察輪播項目(在索引標籤之前)
    • 不通過，沒有暫停輪播機制
    • 不通過，不當使用 aria-live 屬性，導讀軟體被強制朗讀輪播資訊，干擾其他操作與閱讀

補充

全盲檢測人員如何確認畫面上是否有輪播項目的方法：

1. 開啟點顯器，將「點字游標跟隨」設定成「檢閱游標」，並把焦點移到網頁底部，觀察點顯器若會自己跳動，代表該頁面可能有輪播項目
2. 輪播項目通常會有控制介面，如「上一個、下一個」、「左移、右移」、「暫停、開始輪播」等，表示該區塊附近可能有輪播項目
3. 確認焦點移到項目上，放置數秒後，若焦點已經失焦或到其他項目上，可能是輪播效果
4. 記住第一個或最後一個項目後離開該區塊，數秒後再進入查看，若發現項目有所改變則可能是輪播效果
5. 聽讀到一些文字，每則都是獨立的，但又被放在同一行內，可能是跑馬燈
6. 如果懷疑是跑馬燈，可以使用之前提到的讀取元件位置資訊的附加元件來確認該元件是否有在做橫向或直向的移動
7. 在頁面操作時，導讀軟體不斷回應一些固定資訊干擾操作，有可能是輪播項目加上 aria-live 屬性的效果 (為方便檢測，從原始碼移除或關閉 aria-live 或 NVDA功能表 -> 偏好 -> 設定 -> 物件呈現 -> 不勾選「讀出動態內容變化」)
8. 如果網站裡有輪播項目，有很高的機率會出現在首頁，所以檢測首頁可以多留意
9. 懷疑有輪播項目時，最後請明眼或弱視者來進行確認