Currently working on a client website, who is hot on accessibility. They want to be able to push and promote 4 different pages at a time in the hero section. I've pushed back on using a carousel, but a little stuck on what to use as an alternative?
< rant > It seems that the UX community is awakening to the notion that carousels are usually a bad idea, to which, I ask, “What took you so long?” They’ve been around for about 10 years and it should have been apparent from the start that animation is distracting, users ignore things that look like ads, people don’t passively watch websites like it’s TV –they start scrolling/swiping/clicking right away, people need to control what they see and for how long –they don’t all read everything at the same speed, so either a slide stays too long and the user scrolls away, or the slide disappears before the user is finished with it. Oh, yeah, and carousels have accessibility issues. < /rant >
As for alternatives:
Nothing. Okay, your client probably won’t accept this, but often it is the right thing. From what I’ve seen, carousels are most often used to push things on the user. In other words, by definition, they are not what the user came to the site for, and yet we put them at the top of the home page like they’re the most important content. So, here’s radical idea: how about putting the most important information to the user at the top of the home page? Put the “push” content somewhere else, like at the bottom of product pages or on the purchase confirmation page –wherever the users are at the end of their task, when maybe they are open to starting a new task. Or put the content in the right margin like advertisements, which is, in fact, what they are. Another use of carousels I’ve seen is to simply replicate other information on the home page, but in a more engaging format (by “engaging,” I mean “distracting”). It's actually necessary to replicate important carousel content in the home page, since carousels, well, kind of suck for finding or clicking on things. In any case, for many home pages, you can simply remove the carousel and shift content up, and not lose anything. In fact, you improve it.
Static Content. Rather than periodically rotating content with big pictures and lots of text, show all the content statically in some sort of menu, like any ordinary home page. In your case, take the hero space dedicated to the carousel and divide it into quarters and put content for each page in each quarter. Design each quarter to be as compelling as possible at a glance for users who may be interested in it: carefully choose a few words and use clear but smaller images. It is often more effective to multiplex though space than multiplex through time. With space, content is smaller, but it’s seen almost all at once, so it actually has a better chance of catching an interested user than expecting the user to see a carousel slide at just the right time (given they scroll them out of view as soon as they can). If the importance of the content justifies it (it really is the main content of the home page as far as the user is concerned, not just something marketing wants to push), then give it more space. Make it a full-page menu. Make it a list, if there are a lot of items, and let the user scroll the page to get through them all. Scrolling is more familiar to users than carousel controls, given the latter vary from site to site, so this is superior to a “manual carousel” or “overflow pattern.” Or, if you really want large images, scatter them around the page or site so users happen upon them while scrolling and clicking (which users do), not sitting passively (which they don’t).
Alternating Content on Load. Rather than a carousel switching content after a set time, show a random alternative content each time the page loads. This is best when the carousel is really just there to set the mood or background (e.g., pictures of happy customers using the website’s products), and not something the user interacts with. Or, you might want to consider it if the content is on the homepage anyway (as one of many things on a menu) but you want to highlight it. This is as good as you’re going to get with a carousel anyway since users rarely look past the first slide they see. At least this way, you’re giving all the content an equal shot of getting seen, you won’t have distracting animation, and you’ve solved the accessibility issues.
I am curious as to why you would push back on the carousel in the first place. If it's a concern regarding accessibility, then you should be able to implement it correctly.
Basically, you just need to make sure it doesn't move too fast and the movement can be paused, stopped, or hidden entirely. Many pages currently implement this pretty well, you'll see a play/pause button near the markers to control the movement.
Success Criterion 2.2.2 Pause, Stop, Hide (Level A)
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential;
For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
Success Criterion 2.3.1 Three Flashes or Below Threshold (Level A)
Web pages do not contain anything that flashes more than three times in any one-second period, or the flash is below the general flash and red flash thresholds.