In this post I want to share thinking on ways to create horizontal scrolling experiences for the web that are minimal, responsive, accessible and work across browsers and platforms (like TVs!). Try the demo.
If you prefer video, here’s a YouTube version of this post:
We’ll be building a horizontal scroll layout meant for hosting thumbnails of media or products. The component begins as a humble
prefers-reduced-data, is used to turn the media scroller into a lightweight title scroller experience.
Start with accessible markup #
A media scroller is made of just a couple of core components, a list with items. A list, in its simplest form, can travel all over the world and be clearly consumed by all. A user landing at this page can browse a list and click a link to view an item. This is our accessible base.
Deliver a list with a