Tạo băng chuyền hỗ trợ tiếp cận

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

Ngày xuất bản: 29 tháng 9 năm 2025

Dù bạn thích hay không thích, băng chuyền là một mẫu hình được sử dụng rộng rãi và theo yêu cầu. Vì vậy, khi triển khai băng chuyền, bạn nên đảm bảo băng chuyền hoạt động ổn định và dễ truy cập. Thành phần này phải có tính tương tác ở lần hiển thị đầu tiên, có tính khai báo để dễ bảo trì hơn và được xây dựng bằng cấu trúc ngữ nghĩa đã được kiểm thử bằng các công nghệ hỗ trợ.

Tuy nhiên, việc giúp băng chuyền dễ tiếp cận thường gặp nhiều khó khăn. Việc quản lý tiêu điểm, nhận thông báo chính xác từ trình đọc màn hình và xử lý các phần tử tương tác ngoài màn hình rất phức tạp, do đó, người dùng không thể truy cập vào các băng chuyền trên nhiều trang web. Những thách thức này đã khiến nhóm Chrome phải nghiên cứu về băng chuyền CSS tương tác trong CSS Overflow Module Level 5 (Mô-đun tràn CSS cấp 5) được phát hành trong Chrome 135.

Sau lần ra mắt đầu tiên của tính năng này trong Chrome, chúng tôi đã nhận được rất nhiều ý kiến phản hồi từ cộng đồng và chúng tôi đã nỗ lực để giải quyết những ý kiến đó. Bản phát hành này bao gồm chức năng mới như hỗ trợ các chế độ đánh dấu vị trí cuộn riêng biệt và điều hướng, cũng như nhiều bản sửa lỗi. Ví dụ:

Chúng tôi tin rằng các tính năng trong CSS Overflow 5 có thể tạo ra những băng chuyền mạnh mẽ và dễ tiếp cận, có tính tương tác ngay từ lần hiển thị đầu tiên. Bài đăng này sẽ hướng dẫn bạn cách thực hiện việc đó, tập trung vào cách sử dụng các tính năng này để giải quyết các vấn đề về khả năng tiếp cận đã tồn tại từ lâu.

Để biết thông tin giới thiệu chung hơn về băng chuyền, hãy xem bài viết Băng chuyền bằng CSS. Lưu ý: không có giao diện người dùng nào được đảm bảo có thể truy cập ngay lập tức, bạn luôn cần kiểm thử khả năng hỗ trợ tiếp cận của các trang.

Trước khi bắt đầu viết mã, bạn cần biết loại băng chuyền mà bạn đang tạo. Chiến lược hỗ trợ tiếp cận phù hợp phụ thuộc vào cách người dùng trải nghiệm nội dung. Bài đăng này đề cập đến 3 loại phổ biến:

Băng chuyền một mặt hàng

Một băng chuyền có một mục trên màn hình và các điểm đánh dấu để chọn các mục khác.

Với băng chuyền một mục, chỉ có một trang trình bày hiển thị đầy đủ và có thể tương tác tại một thời điểm (ví dụ: biểu ngữ chính hoặc bản trình bày).

Băng chuyền được phân trang tự động

Một băng chuyền có nhiều trang trình bày xuất hiện cùng lúc.

Băng chuyền được phân trang tự động sẽ hiển thị "các trang" nội dung, chẳng hạn như danh sách sản phẩm hoặc chương trình truyền hình.

Băng chuyền nhiều mặt hàng

Trong băng chuyền có nhiều mục, nhiều mục trong băng chuyền sẽ xuất hiện cùng một lúc, nhưng bạn vẫn có thể cuộn qua từng mục mà không cần phân trang.

Mỗi loại băng chuyền có các điểm cần cân nhắc về khả năng tiếp cận và phương pháp hay nhất riêng.

Băng chuyền một mặt hàng

Đây là một bản trình chiếu thông thường. Chỉ một phần tử con được đọc tại một thời điểm, mặc dù trong nhiều trường hợp, người dùng sẽ thấy "xem trước" mục tiếp theo hoặc mục trước đó để cung cấp manh mối theo ngữ cảnh về nội dung bổ sung. Mục tiêu là đảm bảo chỉ có trang trình bày ở giữa và hiển thị đầy đủ mới có thể tương tác.

Sau đây là hướng dẫn từng bước về cách giúp mọi người truy cập được vào video.

Bước 1: Áp dụng một tiêu điểm duy nhất bằng tính năng cuộn nhanh

Để đảm bảo rằng vùng chứa có thể cuộn luôn "chụp" vào một trang trình bày, không để lại mục nào bị kẹt ở giữa, hãy sử dụng tính năng chụp ảnh màn hình khi cuộn bằng CSS. Điều này đảm bảo rằng sau khi cuộn, một mục sẽ được "chụp" hoàn hảo vào đúng vị trí, mang lại trải nghiệm người dùng mượt mà.

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

Người dùng sử dụng trình đọc màn hình cần biết rằng họ đã truy cập vào một băng chuyền và thời điểm trang trình bày thay đổi. Việc này yêu cầu một số thuộc tính ARIA trên vùng chứa băng chuyền:


Thuộc tính ARIA
Giải thích

role="region"
Xác định băng chuyền là một vùng mốc trên trang, giúp người dùng dễ dàng di chuyển đến.

aria-label
Đặt tên mô tả cho khu vực, chẳng hạn như "Trình chiếu sản phẩm nổi bật".

aria-live="polite"
Đây là nguyên liệu kỳ diệu. Thuộc tính này hướng dẫn trình đọc màn hình thông báo một cách lịch sự về những thay đổi trong khu vực này, chẳng hạn như khi một trang trình bày mới cuộn vào chế độ xem mà không làm gián đoạn người dùng.

Sau đây là cấu trúc HTML:

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

Bước 3: Chỉ cho phép tương tác với trang trình bày đang hiển thị

Điều này rất quan trọng đối với khả năng hỗ trợ tiếp cận vì nó ngăn người dùng vô tình nhấn phím Tab vào các nút hoặc đường liên kết trên các trang trình bày ngoài màn hình. Để đạt được điều này, hãy sử dụng truy vấn vùng chứa scroll-state và thuộc tính interactivity mới.

Trước tiên, hãy đặt mọi mục trong trang trình bày ở trạng thái tĩnh theo mặc định bằng cách sử dụng interactivity: inert. Sau đó, hãy dùng một truy vấn vùng chứa scroll-state để nhắm đến trang trình bày hiện đang được "chụp nhanh" trong khung nhìn và đặt nội dung của trang trình bày đó thành 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;
    }
  }
}

Với CSS này, trình duyệt sẽ tự động xử lý những mục có thể lấy làm tâm điểm. Không cần thêm JavaScript để quản lý chỉ mục thẻ. Truy vấn scroll-state khiến tất cả các trang trình bày khác ngoài trang trình bày hiện tại không hoạt động.

Băng chuyền phân trang

Mẫu này thường được dùng cho các thư viện sản phẩm hoặc lựa chọn, trong đó nội dung được nhóm thành các trang. Bạn có thể xử lý vấn đề về khả năng tiếp cận theo 2 cách, tuỳ thuộc vào cách bạn muốn trình bày nội dung.

Sử dụng một vùng chứa có role="region" với một phần tử duy nhất có role="tabpanel" bên trong. Bảng điều khiển thẻ này sẽ cập nhật nội dung để phản ánh thẻ hoặc trang đang hoạt động.

<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>

Để quản lý tính tương tác, hãy sử dụng một thủ thuật ảnh động thông minh gắn liền với dòng thời gian view(). Điều này đảm bảo thứ tự thẻ chỉ đạt đến các mục hiện đang hiển thị trên màn hình.

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

Danh sách nội dung

Nếu nội dung về cơ bản là một danh sách, hãy sử dụng phần tử <ul> để có ngữ nghĩa chính xác.

Ví dụ:

<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>

Đối với mẫu này, đừng dùng thuộc tính tương tác để làm cho nội dung ngoài màn hình không hoạt động. Việc này sẽ ảnh hưởng đến số lượng mục mà trình đọc màn hình thông báo, vì vậy, tất cả nội dung phải nằm trong cây hỗ trợ tiếp cận.

Băng chuyền nhiều mặt hàng

Mẫu này dành cho băng chuyền nơi nhiều phần tử con có thể xuất hiện và đọc được cùng một lúc. Ví dụ: kệ "sản phẩm có liên quan" trên một trang web thương mại điện tử.

Các băng chuyền này hoạt động theo cách khác nhau tuỳ thuộc vào câu trả lời của bạn cho quyết định sau: bạn có hướng sự tập trung của người dùng vào một mục tại một thời điểm hay cho phép họ truy cập vào tất cả nội dung hiển thị một cách tự do?

Mẫu 1: Một mục tương tác duy nhất trong số các mục hiển thị

Trong mô hình này, nhiều mục có thể nhìn thấy, nhưng chỉ mục chính hoặc mục "hiện tại" là có thể tương tác. Các mục khác có thể nhìn thấy nhưng không hoạt động. Mẫu này hữu ích khi hướng dẫn người dùng xem từng mục trong một nhóm.

Để tạo thành phần này đúng cách, bạn nên sử dụng cùng một mẫu hỗ trợ tiếp cận như băng chuyền một mục đã thảo luận trước đó. Việc này bao gồm:

  • Sử dụng truy vấn vùng chứa trạng thái cuộn để áp dụng tính tương tác: từ các mục không hoạt động sang các mục không hoạt động.
  • Thêm đủ khoảng đệm xung quanh các mục để đảm bảo rằng mọi mục đều có thể được điều chỉnh cho vừa với vị trí chính (ví dụ: tâm của cổng cuộn). Điều này giúp mô hình điều hướng từng bước trở nên có chủ đích và mượt mà.

Mẫu 2: Tất cả các mục hiển thị đều tương tác được

Nếu mục tiêu của bạn là cho phép người dùng tự do tương tác với tất cả các mục có thể nhìn thấy, thì phương pháp hay nhất là đảm bảo không có nội dung nào là nội dung tĩnh.

Đối với mẫu này:

  • Sử dụng phần tử <ul> nếu nội dung là một danh sách theo ngữ nghĩa, vì điều này cung cấp ngữ cảnh chính xác cho người dùng trình đọc màn hình.
  • Không sử dụng tính năng quản lý tương tác (interactivity: inert). Tất cả nội dung hiển thị phải nằm trong cây hỗ trợ tiếp cận và có thể truy cập bằng cách sử dụng thao tác nhấn phím Tab trên bàn phím.

Kết thúc

CSS Overflow 5 cho phép bạn khai báo để tạo các mẫu băng chuyền tương tác, phổ biến mà không gặp nhiều vấn đề về khả năng tiếp cận. Bằng cách kết hợp HTML ngữ nghĩa, CSS hiện đại (chẳng hạn như trạng thái cuộn và tính tương tác) và các vai trò ARIA phù hợp, bạn có thể tạo ra những trải nghiệm có hiệu suất cao, dễ tiếp cận và có tính tương tác ngay từ lần hiển thị đầu tiên.

Hãy dùng thử các API mới này! Như thường lệ, mặc dù các mẫu và API này được thiết kế để giúp việc xây dựng các thành phần tương tác, nhanh chóng và dễ truy cập trở nên dễ dàng hơn, nhưng không có gì thay thế được việc kiểm thử khả năng hỗ trợ tiếp cận đầy đủ. Bạn sẽ luôn cần xác minh rằng mã của bạn có thể truy cập và hoạt động cho mục tiêu Cơ sở của bạn.