製作無障礙輪轉介面

Robert Flack
Penny McLachlan
Penny McLachlan
LinkedIn Bluesky
Lucas Radaelli
Lucas Radaelli
X LinkedIn

發布日期：2025 年 9 月 29 日

無論你喜不喜歡，輪播都是廣為使用且備受歡迎的模式。因此，實作輪播時，應確保輪播功能穩定且易於存取。應在首次算繪時提供互動功能，並採用宣告式設計，方便維護，且建構時應使用語意結構，並透過輔助技術進行測試。

不過，讓輪播內容無障礙通常很困難。管理焦點、正確發布螢幕閱讀器公告，以及處理畫面外的互動元素相當複雜，因此許多網站上的輪播內容無法存取。為解決這些挑戰，Chrome 團隊著手開發互動式 CSS 輪播效果，並納入 CSS Overflow Module Level 5，於 Chrome 135 中推出。

這項功能在 Chrome 推出後，我們收到許多社群意見回饋，並致力於解決相關問題。包括支援離散和導覽捲動標記模式等新功能，以及多項錯誤修正。例如：

我們相信 CSS Overflow 5 中的功能可以建立強大且無障礙的輪轉介面，在首次算繪時即可互動。本文將逐步說明如何使用這些功能解決長期存在的無障礙問題。

如需輪轉介面的基本介紹，請參閱「使用 CSS 的輪轉介面」一文。請注意，任何 UI 都無法保證開箱即用，您一律需要測試網頁的可存取性。

開始編寫程式碼前，請務必瞭解要建構的輪播類型。適當的無障礙策略取決於使用者體驗內容的方式。這篇文章將介紹三種常見的類型：

單一項目輪轉介面

輪轉介面，畫面上顯示一個項目，並提供標記來選取其他項目。

單一項目輪播一次只會完整顯示並互動一張投影片 (例如主打橫幅或投影片)。

自動分頁輪播內容

輪播介面，一次顯示多張投影片。

自動分頁輪播內容會顯示「頁面」，例如產品或電視節目清單。

多項目輪轉介面

在多個項目的輪轉介面中，輪轉介面會一次顯示多個項目，但你仍可個別捲動瀏覽這些項目，不必分頁。

每種輪播內容都有不同的無障礙考量和最佳做法。

單一項目輪轉介面

這是傳統投影片。一次只能讀取一個子項元素，但使用者通常會「預覽」下一個或上一個項目，藉此取得其他內容的脈絡線索。目標是確保只有位於中央且完全可見的投影片可供互動。

以下是逐步操作說明。

步驟 1：使用捲動貼齊功能強制執行單一焦點

如要確保捲動容器一律「貼齊」至某個投影片，不會有項目卡在中間，請使用 CSS 捲動貼齊。這可確保項目在捲動後「貼齊」至正確位置，打造流暢的使用者體驗。

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

使用螢幕閱讀器的使用者需要知道自己已進入輪播，以及輪播內容何時變更。這需要在輪轉介面容器上使用幾個 ARIA 屬性：


ARIA 屬性
說明

role="region"
將輪轉介面識別為網頁上的地標區域，方便使用者瀏覽。

aria-label
為區域提供描述性名稱，例如「精選產品輪播」。

aria-live="polite"
這就是魔法食材。這項屬性會指示螢幕閱讀器禮貌地播報這個區域內的變更，例如捲動到新投影片時，不會中斷使用者操作。

HTML 結構如下：

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

步驟 3：只讓顯示的投影片具有互動性

這對無障礙功能至關重要，因為可防止使用者意外將焦點移至螢幕外投影片上的按鈕或連結。如要達成這個目標，請使用新的 scroll-state 容器查詢和 interactivity 屬性。

首先，請使用 interactivity: inert，預設讓每個投影片項目都處於非作用中狀態。 然後，使用 scroll-state 容器查詢，以目前在可視區域中「對齊」的投影片為目標，並將其內容設為 interactivity: auto。

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

使用這項 CSS 時，瀏覽器會自動處理可聚焦的項目。管理 tabindex 時不再需要 JavaScript。scroll-state 查詢會讓目前投影片以外的所有投影片都處於閒置狀態。

分頁輪轉介面

這種模式通常用於產品或選項的圖片庫，內容會分組顯示在不同頁面。視內容呈現方式而定，可透過兩種方式處理無障礙功能。

使用含有 role="region" 的容器，其中包含一個 role="tabpanel" 元素。這個分頁面板會更新內容，以反映目前的分頁或頁面。

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

如要管理互動性，請使用與 view() 時間軸相關的動畫技巧。這樣可確保 Tab 鍵順序只會到達螢幕上目前顯示的項目。

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

內容清單

如果內容基本上是清單，請使用 <ul> 元素，確保語意正確。

例如：

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

在這個模式中，請勿使用互動性屬性，讓螢幕外內容處於閒置狀態。這麼做會影響螢幕閱讀器播報的項目數量，因此所有內容都必須保留在無障礙樹狀結構中。

多項目輪轉介面

這個模式適用於輪播，可同時顯示及讀取多個子元素。例如電子商務網站上的「相關產品」專區。

這些輪播內容的行為會有所不同，取決於您對下列決策的回答：您是否要引導使用者一次專注於一個項目，還是要允許他們自由存取所有可見內容？

模式 1：可見項目中的單一互動式項目

在這個模型中，多個項目都會顯示，但只有主要或「目前」項目可互動。其他可見項目則為惰性。這個模式可引導使用者逐一瀏覽一組項目。

如要正確建構這個項目，請使用與稍早討論的單一項目輪轉介面相同的無障礙模式。這些行為包括：

  • 使用捲動狀態容器查詢，對非使用中的項目套用互動性：惰性。
  • 在項目周圍加入足夠的邊框間距，確保每個項目都能貼齊主要位置 (例如捲動埠的中央)。這讓逐一瀏覽模式感覺更自然流暢。

模式 2：所有顯示項目都是互動式項目

如果目標是讓使用者自由與所有可見項目互動，最佳做法是確保所有內容都不是靜態。

這個模式：

  • 如果內容在語意上是清單，請使用 <ul> 元素，因為這會為螢幕閱讀器使用者提供正確的背景資訊。
  • 請勿使用互動管理 (interactivity: inert)。所有可見內容都應保留在無障礙樹狀結構中，並可透過鍵盤 Tab 鍵存取。

總結

CSS Overflow 5 可讓您以宣告方式建構常見的互動式輪轉介面模式，減少無障礙功能方面的問題。結合語意 HTML、捲動狀態和互動性等現代 CSS，以及適當的 ARIA 角色，您就能建立高效能的無障礙體驗，在首次算繪時提供互動功能。

歡迎試用這些新 API！一如往常，雖然這些模式和 API 的設計宗旨是簡化互動式、快速且無障礙元件的建構作業，但仍無法取代完整的無障礙測試。您一律需要驗證程式碼是否可存取，並適用於基準目標。