Accessibility for Embla Carousel

This plugin adds ARIA-spec compliance to the amazing Embla Carousel

Installation

First you need to follow the installation instructions for Embla Carousel, after that you can add aria support:

npm install --save embla-carousel-aria  # yarn add embla-carousel-aria

JavaScript / TypeScript

import EmblaCarousel from 'embla-carousel';
import AriaPlugin from 'embla-carousel-aria';

// initialize Embla Carousel
const embla = EmblaCarousel(
  emblaNode,
  {
    inViewThreshold: 0.25, // Note: Your slide must be in view for it to be tabbable! A high view threshold is recommended.
  },
  [AriaPlugin()]
);

React

import { useEmblaCarousel } from 'embla-carousel-react';
import AriaPlugin from 'embla-carousel-aria';

const EmblaCarouselComponent = ({ children }) => {
  const [emblaRef, embla] = useEmblaCarousel(
    {
      inViewThreshold: 0.25, // Note: Your slide must be in view for it to be tabbable! A high view threshold is recommended.
    },
    [AriaPlugin()]
  );

  // ...
};

Options

locale

Type: string
Default: en-US

Locale to be used in IETF's BCP 47 format.

live

Type: false | "off" | "polite" | "assertive"
Default: false

Whether the screen reader should announce slide changes. Recommended to be turned off if autoscroll is used.

debounce

Type: number
Default: 300

The debounce to use when updating aria properties.

onFocusChange

Type: Function
Default: (evt: HTMLElement, target: HTMLElement) => void

A callback function that is invoked when the focus is moved by the Aria plugin.

Global Options

You can also set global options that will be applied to all instances. This allows for overriding the default plugin options with your own:

AriaPlugin.globalOptions = {
  debounce: 1000,
};

OS & Browser Support

• Mac OS (Chrome, Firefox, Safari, Edge), Magic Mouse, Magic Trackpad
• Windows (Chrome, Firefox, Edge), Microsoft Precision Touchpads

Thanks

Kudos to David Jerleke for creating Embla Carousel with its open API 🙏

License

MIT.