Appearance

Accessibility ​

What Logo Carousel does for keyboard, screen reader and motion-sensitive visitors, and the choices that are still yours to make.

Moving content is hard to use if you can't see it, can't use a mouse, or find motion physically uncomfortable. Logo Carousel handles a lot of this for you, but an accessible logo showcase is mostly a series of sensible choices, not one switch. This page covers both.

The short version ​

If you only do five things:

  1. Give every logo alt text (the company name is usually right).
  2. Turn Autoplay off, or at least keep Pause on Hover on and slow it down.
  3. Keep Tabs and Key Navigation on for carousels.
  4. Show navigation arrows, and check their contrast against the background.
  5. Leave Pause on Hover on for marquees.

Alt text comes first ​

A screen reader announces an image by its alt text. For a logo, that's almost always the company's name: "Acme Corporation", not "logo" or "image".

Logo Carousel uses, in order:

  1. The logo's Logo Alt Text, if you've set one.
  2. Otherwise, the logo's Title.
  3. Otherwise, the word "Logo".

So a logo with a title is already announced sensibly. To set alt text explicitly, open the logo editor; see Edit a logo. Keep it short (the field allows 125 characters), and don't start with "Logo of": screen readers already say it's an image.

A logo whose image file is missing is shown as a placeholder that screen readers announce as "Missing logo: …" with the logo's name, rather than a broken image. See Missing images.

Motion and autoplay ​

Autoplay is the most common accessibility problem in carousels. It moves content away from people who read slowly, distracts people with attention-related conditions, and can cause real discomfort for people with vestibular (balance) disorders.

Autoplay is on by default on the Carousel block, because that's what most logo rows want. If the logos carry information people need to read, turn it off. If you keep it:

SettingWhereWhy
Pause on HoverLayouts → Carousel tab, on by defaultLets a mouse user stop the movement.
Autoplay DelaySame tab, 3000 ms by defaultRaise it. 5000 ms or more gives people time to take in each set of logos.
Pause on Hover (Marquee)The Marquee layout settings, on by defaultA marquee never stops otherwise. Leave it on.

Note that autoplay carries on after a visitor uses the arrows or drags the carousel.

Reduced motion ​

Many people ask their operating system to reduce motion. Logo Carousel honors that setting for:

  • Motion Effects: entrance and scroll effects don't run, and logos simply appear.
  • Marquee: the scrolling stops, and the Wave style shows a still frame.
  • The Staggered carousel style's entrance animation.
  • The Grid's crossfade when filtering by category.
  • The Logo Details popup opening animation.

Carousel autoplay isn't covered by this setting, which is one more reason to think twice before leaving it on.

Keyboard access ​

Some visitors navigate entirely with Tab, Enter and the arrow keys: screen reader users, people with motor impairments, and anyone without a working mouse.

What's built in:

  • Navigation arrows are real buttons, labelled "Previous logos" and "Next logos", so they can be reached with Tab and announced properly.
  • Tabs and Key Navigation (Carousel tab, on by default) lets visitors move the carousel with the arrow keys while it's on screen. It isn't available on the Staggered style.
  • Arrows set to Visibility on Hover (Navigation Arrows) also appear when keyboard focus moves into the carousel, so keyboard users aren't left without controls.
  • Tooltips can be opened from the keyboard: Tab to a logo to show a hover tooltip, or press Enter/Space for a click tooltip. Esc closes it. See Tooltips.
  • Popup triggers are buttons, and the popup's close and previous/next controls are labelled for screen readers.

What to check:

  • Load the page and press Tab repeatedly. You should reach the arrows, the dots and every clickable logo, and see where focus is each time. If the focus outline vanishes, your theme is hiding it, which is worth fixing site-wide.
  • Logos set to Logo URL open in a new tab. That's expected, but it's worth knowing when you test.

Screen readers ​

  • Carousels include standard screen reader support for slides and controls.
  • Marquees repeat logos to fill the loop, but the copies are hidden from screen readers, so each logo is read once.
  • A tooltip's text is linked to its logo while it's open, so screen readers announce it as the logo's description.

Color and contrast ​

Arrows, dots, filter buttons and logo titles all need enough contrast against what's behind them. Aim for the WCAG AA minimum: 4.5:1 for normal text and 3:1 for large text and controls like arrows and dots.

Watch for:

  • Light arrows on a light section. Give the arrows a background color in the Navigation Arrows Style tab.
  • Grayscale or faded logos. Low-opacity or grayscale effects look elegant but can make logos hard to recognize. Keep them recognizable at rest, not only on hover.
  • Active dot vs inactive dots. If they differ only by a subtle color, some visitors can't tell which is current. Pick a pagination style that also changes shape or size.

Hiding blocks per device ​

The Visibility tab in Advanced Settings can hide a block on desktop, tablet or mobile. Hidden blocks are fully hidden from screen readers too. If a phone layout drops a logo row, make sure nothing important was only in that row.

Testing checklist ​

  • [ ] Every logo has a title or alt text that names the company.
  • [ ] You can reach and use every control with Tab and Enter, and see the focus outline.
  • [ ] Autoplay is off, or slow with Pause on Hover on.
  • [ ] Arrows and dots have at least 3:1 contrast with everything behind them.
  • [ ] The page still makes sense with reduce motion turned on in your OS.

Known limits ​

A moving carousel is never the most accessible way to show content. If every logo matters equally, a Grid or List shows them all at once, needs no controls, and works everywhere. Use motion when the motion is the point.