# Performance & Accessibility

> How far to take accessibility, what to trade for speed, and whether media should autoplay: three performance and accessibility decisions for ecommerce stores.

- Type: Design decision guide
- Level: Intermediate
- Reading time: About 27 minutes
- Audience: Written for store owners, builders, and designers refining high-performance ecommerce stores.
- Last updated: 2026-10-15
- Canonical page: https://academy.getzenbasket.com/design-decisions/performance-and-accessiblity/
- Part of: [Design decisions](https://academy.getzenbasket.com/design-decisions/) on ZenBasket Academy

---

## How far do you take accessibility?

· 8 min

*The four-pass audit, how to test your own store with no special tools, is *your store accessibility checklist*. This page is about how much to do, where to start, and what's legally required of you.*

This gets treated as a spectrum from "nothing" to "perfect", which is why most stores land on nothing. It isn't a spectrum. There's a legal floor that may or may not apply to you, a practical floor that applies to everyone, and a long tail beyond both.

### Who does what

| | |
|---|---|
| **Your theme handles** | The mechanics, focus order, markup, form labels, keyboard operation |
| **You control** | Colors, text sizes, image descriptions, video captions, whether things move on their own |
| **You decide** | Which theme, which colors, and whether to check before or after launch |
| **Genuinely yours** | A meaningful share of what an audit finds is content, not code |

That last row is the point most merchants miss. Accessibility sounds like a developer problem and a large part of it is a content problem, and the content part is the part you can fix this afternoon.

### The legal floor, which may apply to you

The rules changed recently and a lot of guidance hasn't caught up.

**In the EU, accessibility became legally enforceable for online shops on 28 June 2025.** The European Accessibility Act covers ecommerce explicitly, and it applies based on where your *customers* are, not where your business is. A store in India or the US selling to consumers in any EU country is in scope.

**There's a real exemption, and it's narrow.** Micro-enterprises providing services are exempt, but that means **_fewer than 10 employees_ and _annual turnover or balance sheet at or below €2 million_**. Both conditions must be true. Most one-person stores qualify. Anything above either threshold does not.

**The standard is WCAG 2.1 Level AA**, via the European technical standard. If you're aiming at this, aim at **WCAG 2.2 AA instead**, it's a superset of 2.1, and it also satisfies the stricter benchmark now used in US litigation. One target covers both.

**Penalties are set by each member state** rather than centrally, and they vary widely, from a few thousand euros to several hundred thousand, with some countries applying daily penalties for ongoing non-compliance. A year in, authorities have been moving from awareness to enforcement.

Two things worth knowing if someone is selling you a solution. **Automated scanners catch roughly a third of accessibility barriers**, useful for clearing mechanical failures, useless as evidence of compliance. And **no overlay widget makes a store compliant**; several have been the subject of legal action themselves.

### The practical floor, which applies to everyone

Set the law aside for a moment, because the commercial case arrives sooner than the legal one.

Roughly one in six people has a disability. A meaningful share of the rest use accessibility features without thinking of them that way, larger text on a phone, captions on a video in a quiet office, keyboard navigation because a trackpad is awkward. **Accessibility failures don't produce complaints. They produce a shopper who couldn't complete a purchase and went elsewhere**, which looks identical to any other abandonment in your reports.

So the practical floor is lower than the legal one and worth doing regardless:

| **Do this** | **Because** |
|---|---|
| **Contrast that passes** | The single commonest failure, and it's a color picker |
| **Real image descriptions** | Serves screen readers, search engines and AI assistants alike |
| **Never color alone** | Sale in red, error in red, out-of-stock greyed, each needs a word |
| **Captions on video** | A large share watch with sound off anyway |
| **Nothing moves without a stop** | Also a legal requirement |
| **Checkout works by keyboard** | If it doesn't, some customers literally cannot buy |

Five of those six are things you control directly. None needs a developer.


![Split product page showing accessibility responsibilities divided between merchant-controlled content choices and theme-managed technical structure (1)](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/Split%20product%20page%20showing%20accessibility%20responsibilities%20divided%20between%20merchant-controlled%20content%20choices%20and%20theme-managed%20technical%20structure%20(1)_1791200633409.png)


### The deciding test

**Do you sell to consumers in the EU, and do you have ten or more employees or turnover above €2 million?**

**Yes to both**, the legal floor applies. Target WCAG 2.2 AA, run the four-pass audit before launch and after each redesign, publish an accessibility statement, and keep a record of what you've checked. The record matters: being able to show a documented, ongoing effort is materially better than being able to show nothing.

**No to either**, you're exempt from that specific obligation, not from the commercial case. Do the practical floor above. It costs an afternoon and it's the difference between a customer buying and a customer leaving.

**Not sure**, assume it applies. The cost of doing the practical floor unnecessarily is one afternoon. The cost of the reverse is a formal notice.

### The default

**Do the practical floor now, whatever your size.** Then run the four-pass audit before your next redesign rather than after it, finding a problem in a theme you haven't committed to is much cheaper than finding it in one you have.

### Where to start, in order

Accessibility work has a clear priority order, and it isn't the order most checklists present.

**1. Anything that makes buying impossible.** A checkout that can't be completed by keyboard, a required field with no label, a focus trap in a modal. These aren't accessibility issues in the abstract, they're customers who cannot give you money.

**2. Contrast.** Fastest fix with the widest benefit, and it's yours entirely. Check the quiet places: placeholder text, disabled buttons, badges over photographs, white text on pale images.

**3. Image descriptions on products.** Every product image needs a real description. This is also the single best-value accessibility task you'll do, because the same text serves search engines and AI shopping assistants.

**4. Color-only meaning.** Add the word.

**5. Everything else**, via the four-pass audit.

### How to do it in ZenBasket

Most of what's yours to fix is in the content and the color settings rather than anywhere technical.

| **What you decided** | **What it becomes** |
|---|---|
| Contrast should pass | Choosing text and background colors in your section and element settings, then checking them |
| Images need descriptions | Filling in the description field on product images and on image elements |
| The current section should be obvious | Active item and active submenu colors on the menu, which default to looking like everything else |
| Text should survive being enlarged | Checking each device view with the system text size turned up |
| Nothing should move unprompted | Motion and rotation settings, covered in the third decision on this page |
| The theme has to do its part | Choosing a theme that passes the keyboard pass before you commit to it |

**Do it in this order.**

**1. Fix contrast first.** It's a color picker and it's yours. Check the pale greys, placeholder text and disabled states are where it usually fails.

**2. Add image descriptions across your products.** If your catalogue is large, the bulk product editor is the realistic route rather than product by product.

**3. Set the menu's active state colors.** Two minutes, and it's the cheapest orientation fix available.

**4. Check both device views with text enlarged.** The builder holds separate desktop and mobile views, and text scaling breaks them differently.

**5. Then run the four-pass audit** on one page of each type.

**Then check three things.** Tab through your checkout with the mouse untouched and confirm you can complete it. Look at your palest text on a phone in daylight. And open one product page with a screen reader and listen to whether the images say anything useful.

**Read next in the Help Center**

- [**Customizing Sections**](https://help.getzenbasket.com/zenbasket-builder/customizing-sections/) — section background and styling, which is where most contrast decisions are made.
- [**Working with Elements**](https://help.getzenbasket.com/zenbasket-builder/working-with-elements/) — element-level styling, including text color and size.
- [**Image Element**](https://help.getzenbasket.com/zenbasket-builder/image-element/) — adding images and their descriptive text.
- [**Bulk Product Editor**](https://help.getzenbasket.com/products/bulk-product-editor/) — updating fields across many products at once, which is how image descriptions get done at catalogue scale.
- [**Navigation Menu**](https://help.getzenbasket.com/zenbasket-builder/navigation-menu/) — the active item and active submenu colors that show shoppers where they are.
- [**Getting Started**](https://help.getzenbasket.com/zenbasket-builder/getting-started/) — switching between the desktop and mobile device views, which you'll need for the text-scaling check.

**Your theme has its own guide.** How well a theme handles keyboard operation and focus differs between them, and that part isn't yours to fix. Find yours in the Paid Themes or Free Themes list in the [Help Center](https://help.getzenbasket.com/zenbasket-builder/).

---

---

## What do you trade for speed?

· 7 min

*How to find which section is slowing your store down is* find the section that's slowing your store down. *This page is about the decisions that create the problem in the first place.*

Nobody decides to have a slow store. They decide to add a video hero, then a reviews widget, then a chat bubble, then a live-visitor notification, each defensible on its own, and collectively the reason the page takes six seconds.

### Who does what

| | |
|---|---|
| **The platform handles** | Serving your store efficiently |
| **You control** | How many sections, how heavy the images, how many third-party tools |
| **You decide** | Which features are worth their weight. This is the whole decision |
| **You measure** | On a phone, on mobile data. Not on office wifi |

### The three numbers, and what changed

Search engines measure three things from real visitors rather than from a test:

| | **Measures** | **Good** |
|---|---|---|
| **Largest Contentful Paint** | How long until the main content appears | Under 2.5 seconds |
| **Interaction to Next Paint** | How long until the page responds to a tap | Under 200 milliseconds |
| **Cumulative Layout Shift** | How much the page moves while loading | Under 0.1 |

Two things about these worth knowing.

**The responsiveness measure got stricter.** It used to measure only the first interaction, and almost every site passed. It now measures every interaction, and the pass rate across the web dropped sharply as a result. Sites that were comfortably fine are now failing, not because they got slower, but because the old measure was too lenient to catch what people were experiencing.

**They come from real visitors, not from a test.** A score from a testing tool is a useful diagnosis; the number that counts is collected from actual Chrome users over a rolling four-week window. That has a practical consequence: **after you fix something, wait several weeks before judging whether it worked.**

For context on where the bar sits: well under half of mobile sites pass all three.

### Every feature has a price, and here it is

This is the decision. Not "should the store be fast", everyone says yes, but "is this specific thing worth what it costs".

| **Feature** | **What it costs** | **Worth it when** |
|---|---|---|
| **Video hero** | The largest single cost on most homepages | The product's behavior is the selling point |
| **High-resolution imagery** | Proportional to how much larger than displayed | Product detail genuinely decides the purchase |
| **Carousel with many slides** | Every slide's image, usually loaded up front | Almost never. Three slides, or a grid |
| **Reviews widget** | Often brings its own framework | Reviews are essential, so make it earn its place, don't remove it |
| **Live chat** | Loads on every page whether used or not | You actually answer it |
| **Visitor-activity notifications** | Weight plus credibility risk | Rarely. See persuasion without dark patterns |
| **Custom fonts** | Delays text appearing, or causes a visible swap | Brand genuinely depends on it, and then, two weights maximum |
| **Analytics and tracking** | Accumulates silently, one tag at a time | Each one you actually look at |

**The pattern in that table:** almost everything expensive is optional, and almost everything essential is cheap. Product images are unavoidable and can be made small. Chat widgets are avoidable and can't.


![Infographic showing an ecommerce homepage with a proportional breakdown of page weight highlighting large contributors such as video hero product images reviews widget and live chat (1)](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/Infographic%20showing%20an%20ecommerce%20homepage%20with%20a%20proportional%20breakdown%20of%20page%20weight%20highlighting%20large%20contributors%20such%20as%20video%20hero%20product%20images%20reviews%20widget%20and%20live%20chat%20(1)_1791200691744.png)


### The deciding test

**Would you still add this if it cost half a second of load time on every page?**

Because it does. That's not a hypothetical framing; it's the actual trade, and asking it out loud kills most additions before they ship.

Three follow-ups when the answer is close:

**Does it load on every page, or only where it's used?** A chat widget on the checkout page is defensible. The same widget on every product page, loading whether or not anyone opens it, is not.

**Does the shopper get anything before it loads?** A video hero with a still image showing first is a different proposition from one that leaves a blank rectangle.

**Could you get 80% of the value for 10% of the weight?** Six well-chosen product angles instead of a 360 spin. A static hero instead of a video. Two font weights instead of five.

### The default

**Assume no and make each addition argue for itself.** A store gets slow one reasonable decision at a time, and the only defense is making each one explicit.

### The three fixes worth doing before anything else

**Size images to how they're displayed.** A hero image sized for a desktop monitor and sent unchanged to a phone is the single biggest and most common waste on any storefront. This alone frequently moves a store from failing to passing.

**Reserve space for everything that loads late.** Images, embeds, banners. Content that arrives and pushes the page down is what makes shoppers tap the wrong product, and it's the cheapest of the three numbers to fix.

**Audit your third-party tools once a year.** Open the list and remove anything you haven't looked at in six months. These accumulate invisibly because nobody owns them, and each one arrived for a reason that may no longer apply.

### How to do it in ZenBasket

Your levers are the images, the number of sections, and the plugins.

| **What you decided** | **What it becomes** |
|---|---|
| Images shouldn't be oversized | Uploading images sized for how they display, not at camera resolution |
| The hero shouldn't block the page | A still image, or a video with a poster frame set |
| Fewer sections, better chosen | Removing sections rather than adding, and checking the count |
| Third-party tools should earn their place | Reviewing the connected plugins and removing the unused |
| Nothing should shift as it loads | Sections and images with their space already reserved |

**Do it in this order.**

**1. Start with images**, because it's nearly always the answer. Check what you're uploading against how it displays.

**2. Then the hero.** If it's video, confirm a still frame appears immediately rather than a blank space.

**3. Then count your sections.** A homepage with eleven sections is downloading eleven sections. Removing two is faster than optimizing nine.

**4. Then the plugins.** Go through the connected tools and remove anything unused. Each one loads on pages whether or not it's needed.

**5. Re-measure after a few weeks**, not the next day, the numbers that count are collected over a rolling window.

**Then check three things.** Open your homepage on a phone on mobile data and count the seconds until you can tell what you sell. Watch whether anything jumps as the page settles. And tap a product card immediately on arrival, if you land somewhere unexpected, the page is still moving when people are acting.

**Read next in the Help Center**

- [**Adding Image as Background**](https://help.getzenbasket.com/zenbasket-builder/adding-image-as-background/) — section background images, the usual home of the largest file on a page.
- [**Image Element**](https://help.getzenbasket.com/zenbasket-builder/image-element/) — adding and sizing images within a section.
- [**Adding Video as Background**](https://help.getzenbasket.com/zenbasket-builder/adding-video-as-background/) — video heroes, and what shows before the video is ready.
- [**Customizing Sections**](https://help.getzenbasket.com/zenbasket-builder/customizing-sections/) — section spacing and layout, and the practical place to notice how many sections a page has.
- [**Third Party Plugins**](https://help.getzenbasket.com/third-party-plugins/) — the connected tools list. **This is where the annual audit happens** — chat, analytics and payment integrations all load on your storefront.

---

---

## Autoplay or manual?

· 6 min

*The motion system as a whole, how long things should take and which curve to use, is *motion and animation in your store*. Whether to use a carousel at all is *grid or carousel*. This page decides whether the things you've chosen to have should move on their own.*

This is the only decision in this section with a legal answer as well as a usability one, and most stores get it wrong in the same specific way.

### Who does what

| | |
|---|---|
| **The builder gives you** | Rotation settings on carousels, sliders and announcement banners, plus motion settings per section |
| **You decide** | Whether each one advances on its own, and how fast |
| **You must provide** | A way to stop anything that moves for more than a few seconds |
| **Also handled** | Whether motion respects a shopper's reduce-motion setting |

### The rule, stated plainly

Accessibility guidelines are mostly graded from basic to strict. This one sits at the **most basic level**, the level everything is expected to meet:

> Anything that moves, scrolls or auto-updates for more than five seconds, and is presented alongside other content, must have a way for the shopper to pause, stop or hide it.

That covers auto-rotating carousels, sliders, marquees, scrolling announcement bars and auto-advancing banners. A rotating hero with no pause control is a basic-level failure, which, if the legal floor in the first decision on this page applies to you, is not a matter of taste.

The reason it's graded so seriously: movement in peripheral vision is genuinely disabling for some people. It makes reading difficult for anyone with an attention or reading disability, and it can cause nausea and dizziness for people with vestibular conditions. Others simply find their eye pulled away from what they were reading, repeatedly.

### Autoplay usually doesn't do what it's for

Set the requirement aside and it still rarely earns its place.

Movement is added to make sure people see content. What it actually does is **interrupt whoever was reading the first thing.** A shopper part-way through a sentence has it replaced, and almost nobody rewinds, they move on, having read part of one message instead of all of one.

It also trains the eye to ignore the region. A large rotating element at the top of a page is read as promotional, and once that pattern-match happens, better content inside it doesn't help.

And it removes control at precisely the wrong moment. Someone who slows down is interested. Auto-advancing at that point takes the thing they were interested in away.

### The comparison

| | **Autoplay** | **Manual** |
|---|---|---|
| **Reading the first item** | Interrupted | Complete |
| **Reaching later items** | Automatic, if they wait | Requires an action, which most won't take |
| **Perceived as** | An advert | Content |
| **Accessibility** | Fails the basic level without a pause control | Passes |
| **Works when** | Content is glanceable, not read | Almost always |

Note the honest row: manual means later items get seen less. That's a real cost, but the items were barely being seen anyway, and the first one is now being read properly. **One item read beats three items glimpsed.**


![Three-frame illustration showing a carousel banner changing while a shopper reads causing the message to be missed before the shopper scrolls away (1)](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/Three-frame%20illustration%20showing%20a%20carousel%20banner%20changing%20while%20a%20shopper%20reads%20causing%20the%20message%20to%20be%20missed%20before%20the%20shopper%20scrolls%20away%20(1)_1791200769153.png)


### The deciding test

**Is this content read, or glanced at?**

**Read**: testimonials, announcements with detail, anything with a sentence in it. Manual, always. Prose takes longer than any rotation you'd set.

**Glanced at**; a strip of logos, a set of images with no text, a short repeated message. Autoplay is defensible, slowly, with a pause control.

And one thing settles it regardless: **if it's on a checkout path, it doesn't move.** Cart, checkout, confirmation. Nothing animates between a card number and a receipt.

### The default

**Manual.** If you do autoplay something, set the interval to at least seven seconds, give it a visible pause control, and make sure it stops when a shopper has reduce-motion switched on.

### Two things people miss

**Hovering or focusing should pause it.** A shopper who has moved their cursor onto the carousel, or tabbed into it, is engaging with it. Advancing at that moment is the most frustrating version of the pattern, and it's a common default.

**Reduce motion is a real setting people use.** Every phone and computer has one. Turn it on, reload your store, and watch. If your carousel is still rotating and your banner is still scrolling, that's not a preference being ignored, it's the accessibility requirement above, unmet.

### How to do it in ZenBasket

Rotation is a setting on each element that has it, and motion behavior is set per section.

| **What you decided** | **What it becomes** |
|---|---|
| This shouldn't advance on its own | Turning off auto-rotation on the carousel, slider or banner |
| If it must rotate, slowly | A longer interval than the default |
| Shoppers need a way to stop it | A visible pause or navigation control, where the element offers one |
| Motion should respect the setting | The motion and animation settings applied to the section |
| Checkout stays still | No animated or rotating elements on cart and checkout pages |

**Do it in this order.**

**1. List every moving thing on your store.** Carousels, sliders, announcement banners, anything scrolling. Most stores find more than they expected, because each was added separately.

**2. Turn off auto-rotation on anything containing words.** This is most of the fix and it takes minutes.

**3. For anything you keep rotating, lengthen the interval** and confirm there's a visible control.

**4. Check the reduce-motion behavior** by switching the setting on your own device and reloading.

**5. Check your checkout path last** and remove anything that moves.

**Then check three things.** Time how long a slide stays up and try to read it in that time. Hover over a rotating element and see whether it pauses. And turn on reduce motion, reload, and watch the page for ten seconds.

**Read next in the Help Center**

- [**Effects & Animations**](https://help.getzenbasket.com/zenbasket-builder/effects-animations/) — animation and visual effects applied to sections and elements, including motion behavior. **Start here.**
- [**Content Rotator (Carousel)**](https://help.getzenbasket.com/zenbasket-builder/content-rotator/) — rotating content and products, and its rotation controls.
- [**Slider**](https://help.getzenbasket.com/zenbasket-builder/slider/) — sliding sections, including how slides advance.
- [**Attention Banners**](https://help.getzenbasket.com/zenbasket-builder/attention-banners/) — rotating promotional messages and their animation modes.
- [**Advanced Video Element**](https://help.getzenbasket.com/zenbasket-builder/advanced-video/) — video playback controls, including the play and mute controls a shopper can use.
- [**Customizing Sections**](https://help.getzenbasket.com/zenbasket-builder/customizing-sections/) — applying settings consistently across the sections that carry movement.