Carusel accesibil (slider)

Sliderul hero de pe pagina principală și caruselele cu imagini de produs sunt printre cele mai criticate modele în accesibilitate — în parte pentru că sunt adesea construite prost, în parte pentru că oamenii rareori se uită dincolo de primul slide. Dacă folosiți unul, faceți-l controlabil. Această pagină face parte din seria modele de interfață accesibile.

Când folosiți un carusel

APG descrie un carusel ca prezentând „un set de elemente, numite slide-uri, prin afișarea secvențială a unui subset de unul sau mai multe slide-uri”. Folosiți-l pentru imaginile de produs pe o pagină de produs sau pentru un set scurt de elemente înrudite. Pentru promoții care contează fiecare în parte, luați în calcul afișarea lor ca blocuri separate: nimic nu este ascuns și nimic nu se mișcă.

APG semnalează două probleme concrete: slide-urile ascunse nu trebuie să rămână accesibile cititoarelor de ecran (de exemplu, doar mutate în afara ecranului), iar rotirea neanunțată îi derutează pe utilizatorii de cititoare de ecran, care ajung brusc în conținutul altui slide.

Criterii WCAG relevante

• 2.2.2 Pauză, oprire, ascundere (A): conținutul în mișcare care „(1) pornește automat, (2) durează mai mult de cinci secunde și (3) este prezentat în paralel cu alt conținut” are nevoie de „un mecanism prin care utilizatorul să îl pună pe pauză, să îl oprească sau să îl ascundă”. W3C enumeră prezentările care avansează automat printre exemple.
• 2.1.1 Tastatură (A): toate controalele funcționează cu tastatura; glisarea nu este singura cale.
• 2.5.1 Gesturi cu pointerul (A): glisarea are nevoie de o alternativă cu un singur punct de contact, de exemplu butoanele următor și anterior.
• 1.1.1 Conținut non-text (A): imaginile slide-urilor au alternative text; textul din imaginile de banner trebuie să apară și el în alternativă.
• 1.4.5 Imagini cu text (AA): textul promoțional ar trebui să fie text real, nu integrat în imagine.
• 4.1.2 Nume, rol, valoare (A): butoanele au nume; selectorul arată slide-ul curent.
• 2.5.8 Dimensiunea țintei (minim) (AA): indicatorii cu puncte sunt adesea mult sub 24 pe 24 de pixeli CSS.
• 2.4.3 Ordinea focusului (A): slide-urile ascunse nu primesc focusul.

Exemplu de cod

<section class="carousel" aria-roledescription="carousel" aria-label="Oferte de toamnă">
  <button type="button" class="rotation" aria-label="Opriți rotirea slide-urilor">⏸</button>
  <button type="button" aria-controls="slides" aria-label="Slide-ul anterior">‹</button>
  <button type="button" aria-controls="slides" aria-label="Slide-ul următor">›</button>

  <div id="slides" aria-live="off" aria-atomic="false">
    <div role="group" aria-roledescription="slide" aria-label="1 din 3">
      <a href="/ro/geci-toamna">
        <img src="jackets.jpg" alt="Geci de toamnă, reducere de 20% până duminică">
      </a>
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 din 3" hidden>…</div>
    <div role="group" aria-roledescription="slide" aria-label="3 din 3" hidden>…</div>
  </div>
</section>

Ce specifică APG:

• Containerul este un region (o section cu nume) sau un group cu aria-roledescription="carousel" și o etichetă care nu conține cuvântul „carusel”.
• Fiecare slide este un group cu aria-roledescription="slide" și un nume; dacă slide-urile nu au nume unice, merge și o poziție precum „3 din 10”.
• Învelișul slide-urilor are aria-atomic="false"; aria-live este off cât timp caruselul se rotește automat și polite când nu se rotește, ca schimbările manuale să fie anunțate.
• Eticheta butonului de rotire descrie acțiunea — „Opriți rotirea slide-urilor” sau „Porniți rotirea slide-urilor” — așa că nu are nevoie de aria-pressed.
• Rotirea se oprește când focusul tastaturii intră în carusel și reîncepe doar dacă utilizatorul o cere; se pune pe pauză și cât timp mouse-ul stă deasupra caruselului.
• Un selector de slide-uri poate fi construit ca taburi (slide-urile devin tabpanel) sau ca un grup etichetat de butoane, în care butonul slide-ului curent are aria-disabled="true" în loc de disabled, ca să rămână în secvența Tab.

Interacțiunea cu tastatura

APG pune controlul de rotire primul în secvența Tab, înaintea conținutului care se rotește.

Greșeli frecvente în magazinele online

• Slidere hero care se rotesc la fiecare trei secunde fără buton de pauză.
• Slide-uri ascunse mutate în afara ecranului, cu linkuri care primesc totuși focusul, așa că Tab sare în conținut invizibil.
• Punctele ca singură navigare, minuscule și fără nume („buton”, „buton”, „buton”).
• Text promoțional doar în imagine, cu alt="banner".
• Carusele cu imagini de produs care funcționează doar prin glisare pe mobil și doar cu miniaturi care sunt elemente div pe desktop.
• Rotirea continuă cât timp utilizatorul citește sau ajunge cu Tab în slide.
• Slide-uri clonate pentru buclă infinită, care dublează linkurile și ID-urile.

Ce găsesc verificările automate și ce rămâne pentru testarea manuală

Toate sunt carduri în biblioteca noastră de reguli. 2.2.2 nu poate fi testat automat: dacă sliderul se mișcă, cât timp și dacă poate fi pus pe pauză trebuie verificat de o persoană. Testați și cu tastatura că rotirea se oprește la focus, că slide-urile ascunse nu pot fi accesate și că un cititor de ecran anunță schimbările manuale de slide.

Rulați verificarea gratuită a unei pagini pe pagina principală. Este o verificare automată, nu un audit complet.

Întrebări frecvente

Permite WCAG caruselele care se rotesc automat?

Da, cu o modalitate de a le opri. 2.2.2 Pauză, oprire, ascundere cere un mecanism pentru a pune pe pauză, a opri sau a ascunde conținutul în mișcare care pornește automat, durează mai mult de cinci secunde și este afișat în paralel cu alt conținut.

Ce controale are nevoie un carusel accesibil?

Conform APG: butoane pentru slide-ul anterior și următor, opțional butoane sau taburi pentru alegerea slide-ului, iar pentru caruselele cu rotire automată un buton de oprire și pornire a rotirii, primul în ordinea Tab.

Trebuie să se oprească rotirea când utilizatorul focalizează caruselul?

Da. APG spune că rotirea se oprește când focusul tastaturii intră în carusel și nu reîncepe decât dacă utilizatorul o cere, iar cât timp mouse-ul stă deasupra caruselului rotirea este pusă pe pauză.

Cum știu cititoarele de ecran ce slide este afișat?

Fiecare slide este un grup cu aria-roledescription="slide" și un nume precum „3 din 5”, iar containerul slide-urilor are aria-live="polite" când caruselul nu se rotește automat, astfel încât schimbările manuale de slide sunt anunțate.

Poate o verificare automată să testeze un carusel?

Găsește imagini de slide fără text alternativ, butoane fără nume, linkuri focalizabile în slide-uri ascunse și ținte mici. Nu poate testa dacă rotirea poate fi pusă pe pauză sau dacă se oprește la focus.

Surse

• 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