Maak toegankelijke carrousels

Robert Flack

Penny McLachlan

Lucas Radaelli

Gepubliceerd: 29 september 2025

Of je ze nu leuk vindt of niet, carrousels zijn een veelgebruikt en veelgevraagd patroon . Wanneer een carrousel wordt geïmplementeerd, moet deze dus robuust en toegankelijk zijn. Hij moet vanaf het eerste moment interactief zijn, declaratief voor eenvoudiger onderhoud en gebouwd met een semantische structuur die getest is met ondersteunende technologieën.

Het toegankelijk maken van carrousels is echter vaak een uitdaging. Het beheren van de focus, het correct weergeven van schermlezermeldingen en het verwerken van interactieve elementen buiten het scherm is complex, waardoor de carrousels op veel sites niet toegankelijk zijn. Deze uitdagingen hebben het Chrome-team ertoe aangezet om te werken aan interactieve CSS-carrousels als onderdeel van CSS Overflow Module Level 5 , dat werd meegeleverd met Chrome 135.

Na de eerste lancering van de functie in Chrome hebben we veel feedback van de community ontvangen, waar we aan hebben gewerkt. Dit omvat nieuwe functionaliteit, zoals ondersteuning voor discrete en navigatie -scrollmarkeringsmodi , en diverse bugfixes. Bijvoorbeeld:

• Ondersteuning voor tellers in alt-tekst , beschikbaar vanaf Chrome 140.
• Er is een probleem opgelost waarbij een uitgeschakelde ::scroll-button state niet correct werd voorgelezen door schermlezers.
• Zorgt ervoor dat ::scroll-marker een ARIA-labelnaam krijgt van de inhoudswaarde .
• Er is een bug opgelost waarbij alle ::scroll-marker pseudo-elementen als "geselecteerd" werden gelezen.

Wij geloven dat de functies in CSS Overflow 5 robuuste en toegankelijke carrousels kunnen creëren die vanaf het eerste moment interactief zijn. Dit artikel legt uit hoe je dat kunt doen, met een focus op hoe je deze functies kunt gebruiken om hardnekkige toegankelijkheidsproblemen op te lossen.

Voor een meer algemene introductie tot carrousels, bekijk het artikel Carrousels met CSS . Onthoud: geen enkele gebruikersinterface kan gegarandeerd direct toegankelijk zijn; je moet altijd de toegankelijkheid van je pagina's testen.

Welk type draaimolen heeft u nodig?

Voordat je aan de slag gaat met coderen, is het belangrijk om te weten wat voor soort carrousel je bouwt. De juiste toegankelijkheidsstrategie hangt af van hoe de gebruiker de content moet ervaren. Dit bericht behandelt drie veelvoorkomende typen:

Carrousels met één item

Bij carrousels met één item is slechts één dia tegelijk volledig zichtbaar en interactief (bijvoorbeeld heldenbanners of diavoorstellingen).

Automatisch gepagineerde carrousels

Automatisch gepagineerde carrousels tonen 'pagina's' met inhoud, zoals een lijst met producten of tv-programma's.

Carrousels met meerdere items

In een carrousel met meerdere items zijn meerdere items in de carrousel tegelijk zichtbaar, maar u kunt er nog steeds afzonderlijk doorheen scrollen zonder paginering.

Elk type carrousel heeft andere overwegingen en beste praktijken voor toegankelijkheid.

Carrousels met één item

Dit is een klassieke diavoorstelling. Er is slechts één subelement tegelijk bedoeld om te worden gelezen, hoewel gebruikers in veel gevallen een 'voorproefje' van het volgende of vorige item zien om contextuele aanwijzingen te geven over aanvullende content. Het doel is om ervoor te zorgen dat alleen de gecentreerde, volledig zichtbare dia interactief is.

Hier leest u stap voor stap hoe u het toegankelijk kunt maken.

Stap 1: Eén focus afdwingen met scroll snapping

Om te garanderen dat de scrollcontainer altijd aan een dia 'vastklikt' en er geen items onhandig tussen blijven staan, gebruikt u CSS-scrollsnapping . Dit zorgt ervoor dat een item na het scrollen perfect op de juiste positie wordt 'vastgeklikt', wat zorgt voor een overzichtelijke gebruikerservaring.

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

Stap 2: Kondig de carrousel en schuifwijzigingen aan

Een gebruiker met een schermlezer moet weten dat hij een carrousel is binnengegaan en wanneer de dia verandert. Hiervoor zijn een aantal ARIA-attributen in de carrouselcontainer nodig:

Dit is de HTML-structuur:

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

Stap 3: Maak alleen de zichtbare dia interactief

Dit is cruciaal voor de toegankelijkheid, omdat het voorkomt dat gebruikers per ongeluk naar knoppen of links op dia's buiten het scherm gaan. Gebruik hiervoor de nieuwe query- en interactivity voor scroll-state container.

Maak eerst elk dia-item standaard inert met behulp van interactivity: inert . Gebruik vervolgens een scroll-state containerquery om de dia te selecteren die momenteel is 'vastgeklikt' in de viewport en stel de inhoud ervan in op 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;
    }
  }
}

Met deze CSS bepaalt de browser automatisch welke items focusbaar zijn. Er is geen JavaScript meer nodig om een ​​tabindex te beheren. De scroll-state query zorgt ervoor dat alle dia's behalve de huidige dia inert zijn.

Gepagineerde carrousels

Dit patroon wordt vaak gebruikt voor productgalerijen of keuzes waarbij content is gegroepeerd in pagina's. Toegankelijkheid kan op twee manieren worden aangepakt, afhankelijk van hoe u de content wilt presenteren.

Een carrousel met afzonderlijke pagina's

Gebruik een container met role="region" met daarin één element met role="tabpanel" . Dit tabpanel werkt de inhoud bij om het actieve tabblad of de actieve pagina weer te geven.

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

Om de interactiviteit te beheren, gebruik je een slimme animatietruc die gekoppeld is aan de view() -tijdlijn. Dit zorgt ervoor dat de tabvolgorde alleen de items bereikt die op dat moment zichtbaar zijn op het scherm.

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

Een inhoudsopgave

Als de inhoud in principe een lijst is, gebruik dan een <ul> -element voor de juiste semantiek .

Bijvoorbeeld:

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

Gebruik voor dit patroon de interactiviteitseigenschap niet om off-screen content inert te maken. Dit zou van invloed zijn op het aantal items dat door schermlezers wordt aangekondigd, dus alle content moet in de toegankelijkheidsboom blijven.

Carrousels met meerdere items

Dit patroon is geschikt voor carrousels waarbij meerdere onderliggende elementen tegelijkertijd zichtbaar en leesbaar kunnen zijn. Bijvoorbeeld een plank met 'gerelateerde producten' op een webshop.

Deze carrousels gedragen zich verschillend, afhankelijk van uw antwoord op de volgende vraag: stuurt u de focus van de gebruiker naar één item tegelijk, of geeft u ze vrije toegang tot alle zichtbare content?

Patroon 1: Een enkel interactief item tussen zichtbare items

In dit model zijn meerdere items zichtbaar, maar alleen het primaire of 'huidige' item is interactief. De andere zichtbare items zijn inert. Dit patroon is handig om een ​​gebruiker één voor één door een reeks items te leiden.

Om dit correct te bouwen, moet u hetzelfde toegankelijkheidspatroon gebruiken als de eerder besproken carrousel met één item. Dit omvat:

• Gebruik een scroll-state containerquery om interactiviteit: inert toe te passen op niet-actieve items.
• Voeg voldoende opvulling toe rond uw items, zodat elk item op de primaire positie kan worden geplaatst (bijvoorbeeld het midden van de scrollport). Dit zorgt ervoor dat het één-op-één navigatiemodel doelbewust en vloeiend aanvoelt.

Patroon 2: Alle zichtbare items zijn interactief

Als het uw doel is om gebruikers vrij te laten interacteren met alle zichtbare items, is het verstandig om ervoor te zorgen dat de inhoud niet inert is.

Voor dit patroon:

• Gebruik een <ul> -element als de inhoud semantisch gezien een lijst is, omdat dit de juiste context biedt voor gebruikers van schermlezers.
• Gebruik geen interactiebeheer ( interactivity: inert ). Alle zichtbare inhoud moet in de toegankelijkheidsboom blijven en bereikbaar zijn via het tabblad op het toetsenbord.

Afronden

Met CSS Overflow 5 kun je declaratief veelgebruikte, interactieve carrouselpatronen bouwen met minder toegankelijkheidsproblemen. Door semantische HTML, moderne CSS zoals scroll-state en interactiviteit, en de juiste ARIA-rollen te combineren, kun je hoogwaardige, toegankelijke ervaringen creëren die vanaf het eerste moment interactief zijn.

Probeer deze nieuwe API's eens uit! Hoewel deze patronen en API's zijn ontworpen om het bouwen van interactieve, snelle en toegankelijke componenten te vereenvoudigen, is er zoals altijd geen vervanging voor volledige toegankelijkheidstesten. U moet altijd controleren of uw code toegankelijk is en werkt voor uw Baseline-doel.