How to make an accessible carousel

A good indication that a carousel is a poor choice of interface is that the term derives from a kind of spinning disk festooned with impaled horses. –@heydonworks

You know those ubiquitous B2B home page sliders, aka carousels, aka The Great Compromise? The user interface pattern used when nobody can agree on what is most important? The UI element typically implemented with the worst accessibility you can manage?

If you absolutely must use one… Here’s how to do a content slider well, ensuring accessibility and good usability, while avoiding some of the awfulness often associated with them. It includes a complete working demo with full markup, styles and script.

Excerpts below, with some bold emphasis added by me.
Original article: https://inclusive-components.design/a-content-slider/

Principle of Design

In the broadest terms, any inclusive component should be:

Clear and easy to useInteroperable with different inputs and outputsResponsive and device agnosticPerformantUnder the user's control

Inclusive design is not about giving everyone the same experience. It's about giving as many people as possible a decent experience. 

Multimodal Interaction

'Multimodal' means "can be operated in different ways". Supporting different modes of operation may sound like a lot of work, but browsers are multimodal by default. Unless you screw up, all interactive content can be operated by mouse, keyboard, and (where supported) touch.

The Inclusive Component Slider shows how to do all of…

• ARIA roles and labeling, including focus and hover handling

• Scrolling

• Keyboard navigation

• Visual Affordances

• Touch handling

• Performance and Lazy Loading

• No-JavaScript fallback

• Prev/Next buttons

• Snap points

• Rational button grouping

• Support for Edge, IE, and Safari

And the complete script for the slider comes in at 1.7k. Not bad at all. It’s really a masterclass in great execution. Get it here: https://inclusive-components.design/a-content-slider/