Tworzenie dostępnych karuzel

Robert Flack

Penny McLachlan

Lucas Radaelli

Opublikowano: 29 września 2025 r.

Karuzela to powszechnie stosowany i pożądany wzorzec. Dlatego po wdrożeniu karuzeli powinna ona być niezawodna i dostępna. Powinien być interaktywny od pierwszego wyrenderowania, deklaratywny, aby ułatwić konserwację, i zbudowany w oparciu o strukturę semantyczną, która jest testowana za pomocą technologii wspomagających.

Jednak zapewnienie dostępności karuzel jest często trudne. Zarządzanie fokusem, prawidłowe odczytywanie komunikatów przez czytnik ekranu i obsługa interaktywnych elementów poza ekranem są skomplikowane, dlatego karuzele na wielu stronach są niedostępne. Te wyzwania skłoniły zespół Chrome do pracy nad interaktywnymi karuzelami CSS w ramach modułu CSS Overflow na poziomie 5, który został wprowadzony w Chrome 135.

Po początkowym wprowadzeniu tej funkcji w Chrome otrzymaliśmy wiele opinii od społeczności, które staramy się uwzględniać. Obejmuje to nowe funkcje, takie jak obsługa trybów znacznika przewijania (dyskretnego i nawigacyjnego), oraz poprawki błędów. Na przykład:

• Obsługa liczników w tekście alternatywnym, która została wprowadzona w Chrome 140.
• Rozwiązaliśmy problem polegający na tym, że wyłączony element ::scroll-button state nie był prawidłowo odczytywany przez czytniki ekranu.
• Sprawdzanie, czy element ::scroll-marker otrzymuje nazwę etykiety ARIA z wartości treści.
• Naprawiliśmy błąd polegający na tym, że wszystkie pseudoelementy ::scroll-marker były odczytywane jako „wybrane”.

Uważamy, że funkcje w CSS Overflow 5 mogą tworzyć solidne i dostępne karuzele, które są interaktywne od pierwszego renderowania. W tym poście wyjaśniamy, jak to zrobić, i skupiamy się na tym, jak używać tych funkcji do rozwiązywania długotrwałych problemów z dostępnością.

Ogólne wprowadzenie do karuzel znajdziesz w artykule Karuzela w CSS. Pamiętaj, że nie można zagwarantować, że interfejs użytkownika będzie dostępny od razu po wyjęciu z pudełka. Zawsze musisz przetestować dostępność swoich stron.

Jakiego typu karuzeli potrzebujesz?

Zanim zaczniesz pisać kod, musisz wiedzieć, jaki typ karuzeli chcesz utworzyć. Odpowiednia strategia ułatwień dostępu zależy od tego, jak użytkownik ma korzystać z treści. W tym poście omówimy 3 typy:

karuzele z jednym elementem;

W przypadku karuzel z jednym elementem tylko 1 slajd jest w pełni widoczny i interaktywny (np. banery główne lub pokazy slajdów).

Automatycznie dzielone karuzele

Karuzela z automatycznym podziałem na strony wyświetla „strony” z treściami, np. listę produktów lub programów telewizyjnych.

Karuzela z wieloma elementami

W karuzelach z wieloma elementami widocznych jest kilka elementów naraz, ale nadal możesz przewijać je pojedynczo bez podziału na strony.

Każdy typ karuzeli ma inne aspekty związane z ułatwieniami dostępu i sprawdzone metody.

karuzele z jednym elementem;

To klasyczny pokaz slajdów. W danym momencie odczytywany jest tylko jeden element podrzędny, chociaż w wielu przypadkach użytkownicy widzą „podgląd” następnego lub poprzedniego elementu, co daje im kontekstowe wskazówki dotyczące dodatkowych treści. Celem jest zapewnienie, że interaktywny jest tylko środkowy, w pełni widoczny slajd.

Oto instrukcja krok po kroku, jak to zrobić.

Krok 1. Wymuś pojedyncze skupienie za pomocą przyciągania przewijania

Aby mieć pewność, że kontener przewijania zawsze „zatrzaśnie się” na slajdzie i żaden element nie utknie między nimi, użyj przyciągania przewijania CSS. Dzięki temu po przewinięciu element jest idealnie „przyciągany” do właściwej pozycji, co zapewnia wygodę użytkownikom.

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

Krok 2. Ogłoś zmiany w karuzeli i slajdzie

Użytkownik korzystający z czytnika ekranu musi wiedzieć, że wszedł do karuzeli i kiedy zmienia się slajd. Wymaga to kilku atrybutów ARIA w kontenerze karuzeli:

Oto struktura HTML:

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

Krok 3. Ustaw interaktywność tylko dla widocznego slajdu

Jest to bardzo ważne z punktu widzenia dostępności, ponieważ zapobiega przypadkowemu przełączaniu się użytkowników za pomocą klawisza Tab na przyciski lub linki na slajdach poza ekranem. Aby to zrobić, użyj nowego zapytania o kontener scroll-state i właściwości interactivity.

Najpierw ustaw domyślnie każdy element slajdu jako nieaktywny za pomocą symbolu interactivity: inert. Następnie użyj zapytania o kontener scroll-state, aby wybrać slajd, który jest obecnie „przyciągnięty” do widocznego obszaru, i ustawić jego zawartość na 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;
    }
  }
}

W tym przypadku przeglądarka automatycznie określa, które elementy można zaznaczyć. Do zarządzania indeksem tabulacji nie jest już potrzebny kod JavaScript. Zapytanie scroll-state sprawia, że wszystkie slajdy oprócz bieżącego są nieaktywne.

Karuzela z podziałem na strony

Ten wzorzec jest często używany w galeriach produktów lub wyborów, w których treści są pogrupowane na stronach. Dostępność można zapewnić na 2 sposoby w zależności od tego, jak chcesz prezentować treści.

Karuzela z osobnymi stronami

Użyj kontenera z wartością role="region" z pojedynczym elementem z wartością role="tabpanel" w środku. Ten panel kart zostanie zaktualizowany, aby odzwierciedlać aktywną kartę lub stronę.

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

Aby zarządzać interaktywnością, użyj sprytnej sztuczki animacyjnej powiązanej z view()osią czasu. Dzięki temu kolejność tabulatora będzie obejmować tylko aktualnie widoczne elementy na ekranie.

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

listę treści;

Jeśli treść jest w zasadzie listą, użyj elementu <ul>, aby uzyskać prawidłową semantykę.

Na przykład:

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

W tym wzorcu nie używaj właściwości interaktywności, aby wyłączyć zawartość poza ekranem. Wpłynie to na liczbę elementów odczytywanych przez czytniki ekranu, dlatego wszystkie treści muszą pozostać w drzewie dostępności.

Karuzela z wieloma elementami

Ten wzorzec jest przeznaczony dla karuzel, w których jednocześnie może być widocznych i czytelnych wiele elementów podrzędnych. Na przykład półka „Powiązane produkty” w witrynie e-commerce.

Te karuzele działają inaczej w zależności od odpowiedzi na to pytanie: czy chcesz kierować uwagę użytkownika na jeden element naraz, czy chcesz umożliwić mu swobodny dostęp do wszystkich widocznych treści?

Wzorzec 1. Pojedynczy element interaktywny wśród widocznych elementów

W tym modelu widocznych jest wiele elementów, ale tylko główny lub „bieżący” element jest interaktywny. Pozostałe widoczne elementy są nieaktywne. Ten wzorzec jest przydatny, gdy chcesz przeprowadzić użytkownika przez zestaw elementów jeden po drugim.

Aby prawidłowo utworzyć ten element, użyj tego samego wzorca ułatwień dostępu co w przypadku karuzeli z jednym elementem, o której pisaliśmy wcześniej. Obejmuje to:

• Użyj zapytania o kontener stanu przewijania, aby zastosować interaktywność: od elementów nieaktywnych do nieaktywnych.
• Dodaj wystarczająco dużo miejsca wokół elementów, aby każdy z nich mógł zostać przyciągnięty do pozycji głównej (np. środka obszaru przewijania). Dzięki temu model nawigacji pojedynczej wydaje się celowy i płynny.

Wzorzec 2. Wszystkie widoczne elementy są interaktywne

Jeśli chcesz, aby użytkownicy mogli swobodnie wchodzić w interakcję ze wszystkimi widocznymi elementami, najlepszym rozwiązaniem jest upewnienie się, że żadna treść nie jest nieaktywna.

W przypadku tego wzorca:

• Jeśli treść jest semantycznie listą, użyj elementu <ul>, ponieważ zapewnia on prawidłowy kontekst dla użytkowników czytników ekranu.
• Nie używaj zarządzania interaktywnością (interactivity: inert). Cała widoczna treść powinna pozostać w drzewie ułatwień dostępu i być dostępna za pomocą klawisza Tab.

Podsumowanie

CSS Overflow 5 umożliwia deklaratywne tworzenie typowych, interaktywnych wzorców karuzeli z mniejszą liczbą problemów z dostępnością. Łącząc semantyczny HTML, nowoczesny CSS, np. stan przewijania i interaktywność, oraz odpowiednie role ARIA, możesz tworzyć wydajne, dostępne i interaktywne od pierwszego wyrenderowania strony środowiska.

Wypróbuj te nowe interfejsy API. Jak zawsze, chociaż te wzorce i interfejsy API mają ułatwiać tworzenie interaktywnych, szybkich i dostępnych komponentów, nie zastąpią one pełnych testów dostępności. Zawsze musisz sprawdzić, czy kod jest dostępny i działa w przypadku docelowego poziomu podstawowego.