Dostępna karuzela (slider)

Slider na stronie głównej i karuzele zdjęć produktu należą do najczęściej krytykowanych wzorców w dostępności – po części dlatego, że bywają źle zbudowane, a po części dlatego, że rzadko kto ogląda coś poza pierwszym slajdem. Jeśli go Państwo używają, powinien dać się kontrolować. Ta strona należy do serii dostępne wzorce interfejsu.

Kiedy używać karuzeli

APG opisuje karuzelę jako prezentację „zestawu elementów, zwanych slajdami, przez kolejne wyświetlanie podzbioru jednego lub kilku slajdów”. Warto jej użyć do zdjęć produktu na stronie produktu lub krótkiego zestawu powiązanych pozycji. Jeśli każda promocja jest ważna, można pokazać je jako osobne bloki: nic się wtedy nie ukrywa i nic się nie rusza.

APG wskazuje dwa konkretne problemy: ukryte slajdy nie mogą pozostać dostępne dla czytników ekranu (np. po prostu przesunięte poza ekran), a nieogłoszone przewijanie dezorientuje użytkowników czytników ekranu, którzy nagle trafiają w treść z innego slajdu.

Kryteria WCAG

• 2.2.2 Pauza, zatrzymanie, ukrycie (A): ruchoma treść, która „(1) uruchamia się automatycznie, (2) trwa dłużej niż pięć sekund i (3) jest prezentowana równolegle z inną treścią”, wymaga „mechanizmu pozwalającego użytkownikowi ją wstrzymać, zatrzymać lub ukryć”. W3C wymienia wśród przykładów automatycznie zmieniające się prezentacje.
• 2.1.1 Klawiatura (A): wszystkie kontrolki działają z klawiatury; przesunięcie palcem nie jest jedyną drogą.
• 2.5.1 Gesty dotykowe (A): przesuwanie wymaga alternatywy jednym wskaźnikiem, np. przycisków następny i poprzedni.
• 1.1.1 Treść nietekstowa (A): obrazy slajdów mają alternatywy tekstowe; tekst wewnątrz obrazów banerów musi się też znaleźć w alternatywie.
• 1.4.5 Obrazy tekstu (AA): tekst promocyjny powinien być prawdziwym tekstem, a nie wpieczonym w obraz.
• 4.1.2 Nazwa, rola, wartość (A): przyciski mają nazwy; wybór slajdu pokazuje bieżący slajd.
• 2.5.8 Rozmiar celu (minimum) (AA): kropki wskaźnika są często znacznie mniejsze niż 24 na 24 piksele CSS.
• 2.4.3 Kolejność fokusu (A): ukryte slajdy nie otrzymują fokusu.

Przykład kodu

<section class="carousel" aria-roledescription="carousel" aria-label="Jesienne oferty">
  <button type="button" class="rotation" aria-label="Zatrzymaj przewijanie slajdów">⏸</button>
  <button type="button" aria-controls="slides" aria-label="Poprzedni slajd">‹</button>
  <button type="button" aria-controls="slides" aria-label="Następny slajd">›</button>

  <div id="slides" aria-live="off" aria-atomic="false">
    <div role="group" aria-roledescription="slide" aria-label="1 z 3">
      <a href="/pl/kurtki-jesienne">
        <img src="jackets.jpg" alt="Kurtki jesienne, 20% taniej do niedzieli">
      </a>
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 z 3" hidden>…</div>
    <div role="group" aria-roledescription="slide" aria-label="3 z 3" hidden>…</div>
  </div>
</section>

Co określa APG:

• Kontener to region (section z nazwą) lub group z aria-roledescription="carousel" i etykietą, która nie zawiera słowa „karuzela”.
• Każdy slajd to group z aria-roledescription="slide" i nazwą; jeśli slajdy nie mają unikalnych nazw, sprawdza się pozycja, np. „3 z 10”.
• Element otaczający slajdy ma aria-atomic="false"; aria-live ma wartość off, gdy karuzela przewija się automatycznie, i polite, gdy nie, aby ręczne zmiany były ogłaszane.
• Etykieta przycisku przewijania opisuje akcję – „Zatrzymaj przewijanie slajdów” lub „Uruchom przewijanie slajdów” – więc nie potrzebuje aria-pressed.
• Przewijanie zatrzymuje się, gdy fokus klawiatury wejdzie do karuzeli, i wznawia się tylko na prośbę użytkownika; wstrzymuje się też, gdy nad karuzelą jest kursor myszy.
• Wybór slajdu można zbudować jako zakładki (slajdy stają się tabpanel) lub jako opisaną grupę przycisków, w której przycisk bieżącego slajdu ma aria-disabled="true" zamiast disabled, dzięki czemu pozostaje w kolejności tabulacji.

Obsługa klawiaturą

APG umieszcza kontrolkę przewijania na początku kolejności tabulacji, przed przewijaną treścią.

Typowe błędy w sklepach internetowych

• Slidery na stronie głównej przewijające się co trzy sekundy, bez przycisku pauzy.
• Ukryte slajdy przesunięte poza ekran, których linki nadal otrzymują fokus, więc Tab wskakuje w niewidoczną treść.
• Same kropki jako nawigacja, maleńkie i bez nazw („przycisk”, „przycisk”, „przycisk”).
• Tekst promocyjny wyłącznie w obrazie, z alt="baner".
• Karuzele zdjęć produktu działające tylko po przesunięciu palcem na telefonie, a na komputerze tylko z miniaturami, które są elementami div.
• Przewijanie trwa, gdy użytkownik czyta lub wchodzi tabulatorem w slajd.
• Sklonowane slajdy do nieskończonej pętli, które duplikują linki i identyfikatory.

Co wychwytuje kontrola automatyczna, a co wymaga testu ręcznego

Wszystkie to karty z naszej biblioteki reguł. Kryterium 2.2.2 nie da się przetestować automatycznie: to, czy slider się porusza, jak długo i czy można go wstrzymać, musi ocenić człowiek. Proszę też sprawdzić klawiaturą, czy przewijanie zatrzymuje się po ustawieniu fokusu, czy do ukrytych slajdów nie da się dotrzeć i czy czytnik ekranu ogłasza ręczne zmiany slajdów.

Darmowa kontrola jednej strony uruchomiona na stronie głównej to automatyczna kontrola, a nie pełny audyt.

Najczęstsze pytania

Czy WCAG dopuszcza automatycznie przewijane karuzele?

Tak, pod warunkiem że można je zatrzymać. Kryterium 2.2.2 Pauza, zatrzymanie, ukrycie wymaga mechanizmu wstrzymania, zatrzymania lub ukrycia ruchomej treści, która uruchamia się automatycznie, trwa dłużej niż pięć sekund i jest wyświetlana równolegle z inną treścią.

Jakich kontrolek potrzebuje dostępna karuzela?

Według APG: przycisków poprzedniego i następnego slajdu, opcjonalnie przycisków lub zakładek wyboru slajdu, a przy karuzeli przewijanej automatycznie przycisku zatrzymania i wznowienia przewijania, który jest pierwszy w kolejności tabulacji.

Czy przewijanie powinno się zatrzymać, gdy użytkownik ustawi fokus na karuzeli?

Tak. APG mówi, że przewijanie zatrzymuje się, gdy fokus klawiatury wejdzie do karuzeli, i nie wznawia się, dopóki użytkownik o to nie poprosi, a także wstrzymuje się, gdy nad karuzelą znajduje się kursor myszy.

Skąd czytniki ekranu wiedzą, który slajd jest widoczny?

Każdy slajd to grupa z aria-roledescription="slide" i nazwą, np. „3 z 5”, a kontener slajdów ma aria-live="polite", gdy karuzela nie przewija się automatycznie, dzięki czemu ręczne zmiany slajdów są ogłaszane.

Czy kontrola automatyczna przetestuje karuzelę?

Znajduje obrazy slajdów bez tekstu alternatywnego, przyciski bez nazw, linki przyjmujące fokus w ukrytych slajdach i małe cele. Nie sprawdzi, czy przewijanie można wstrzymać ani czy zatrzymuje się po ustawieniu fokusu.

Źródła

• W3C WAI, APG Carousel pattern: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
• W3C, Understanding 2.2.2 Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html