Is the Vivid Shopify theme accessible?
5 different failures in Vivid's own code, including on the product page (36 occurrences across three pages), checked against WCAG 2.1 Level A and AA.
Rank 48 of 49 in our Shopify theme accessibility ranking. Vivid is a paid theme.
On the product page: a form field with no label. That is the page where a shopper chooses a size and adds to cart.
Every shop that runs Vivid without changes to its code has the same failures, so the theme is the cheapest place to fix them.
What fails in Vivid's own code
A form field with no label
A screen reader user reaches the field and hears only its type ("edit text", "checkbox") with no idea what to enter or choose. This one is on the product page, where people decide to buy.
Example from the demo store's product page:
<input class="search__input field__input" id="Search-In-Modal" type="search" name="q" value="" placeholder="Search" role="combobox" aria-expanded="false" aria-…What the check found: No label, aria-label, aria-labelledby or title. It has a placeholder ("Search") but a placeholder is not a label — it disappears the moment the user types.
How to fix it: Give every field a label element tied to it with for and id. It can be visually hidden if the design has no room for it, but it has to be there.
A link with no name
A screen reader announces "link" and nothing else, or reads out the web address, so a blind shopper cannot tell where it goes. It is usually an icon link or a logo image with an empty description.
Example from the demo store's collection page:
<a href="/products/curve-half-eternity-moissanite-wedding-band-half-eternity-band-curve-moissanite-band-1?variant=41281241743417" class="color-swatch h4 color-…What the check found: Link contains no text, no aria-label, and no image with alt text. It appears to be an icon-only link. A screen reader will announce the destination URL instead.
How to fix it: Give the link text a screen reader can read: visible text, a description (alt text) on the image inside it, or an aria-label on the link. For a logo, your shop's name is the right text.
A button with no name
An icon-only button (a cross, an arrow, a magnifier) is announced as "button", with no hint of what it does.
Example from the demo store's home page:
<button id="quick-add-7039831769145-submit" type="submit" name="add" class="outline shoppable-video-button" aria-haspopup="dialog" aria-labelledby="quick-add-7…What the check found: Button contains no text and has no aria-label.
How to fix it: Add text a screen reader can read inside the button, hidden visually if the design needs it, or an aria-label that says what the button does ("Close", "Next slide", "Search").
A label pointing at a field that is not there
The label's for attribute names an id that no field has, so the field it was meant for ends up with no name.
Example from the demo store's collection page:
<label for="SortBy">What the check found: Label references id "SortBy", but no element on the page has that id.
How to fix it: Make the label's for value match the field's id exactly. It usually breaks when a section is duplicated and the ids are made unique but the labels are not.
Headings that skip a level
Screen reader users move around a page by its headings. A jump from a level-2 heading to a level-4 one suggests a missing section and makes the page harder to scan.
Example from the demo store's product page:
<h3>What the check found: Jumps from <h1> to <h3>, skipping 1 level(s).
How to fix it: Change the heading tags so levels go down one step at a time, and keep the look with CSS. Pick heading levels for the page's structure, not for their size.
Found in the demo's content, which yours replaces
These come from the images and words the theme's developer put in the demo store, not from the theme's code, so they do not count against Vivid. They are worth knowing because the same mistakes are easy to make when you add your own content.
- Video or slides that play by themselves (home page (4×)). Moving content that starts on its own and cannot be paused distracts people with attention difficulties. Turn autoplay off in the section settings, or make sure a pause control shows.
- Images with no description (home page (6×), collection page (2×), product page (2×)). When you add your own images, write a short description for each one in the Shopify admin (open the image, then "Add alt text"). Decorative images can stay empty.
- Image descriptions that are file names (home page (5×), collection page (1×), product page (1×)). Descriptions like "IMG_2041.jpg" or "banner-final" tell a screen reader user nothing. Replace them with a few words about what the image shows.
- Links that do not say where they go (home page (1×)). "Shop now" and "Read more" mean nothing when a screen reader lists the links on a page. In the section settings, write link text that names the destination ("Shop the linen range").
Checked, not counted
- Duplicate ids (home page (7×), collection page (3×), product page (1×)). Two elements share an id. WCAG 2.2 removed this criterion, and it only harms when a label or an ARIA reference points at the duplicated id, so it is not counted. Most come from hidden copies of menus and drawers.
What this does not tell you
- Automated checks find roughly a third of accessibility barriers. A clean result here still needs a keyboard and screen-reader test of your checkout. A failure here is certain.
- We tested what loads first. Menus, the cart drawer and pop-ups that open on a click were not opened, so the real totals can only be higher.
- Your shop is not the demo. Apps, sections, settings and your own content change the result, in both directions.
- Themes get updated. These results are for the version the demo store ran on 10 October 2026.
Check your own shop
Run the free check on your shop's pages. It needs no account and lists every confirmed failure with its WCAG criterion, including the ones your apps and content add. If you want every occurrence with the exact Shopify code to fix it, that is what the Fix Pack is for: $99, once.
How Vivid compares
2 other paid themes had no confirmed failure in its own code: Halftone, Prestige.
Next to it in the ranking: Impulse (rank 47, 5 failures) · Local (rank 49, 6 failures).
All 49 themes, ranked, with the method and its limits.
How we tested
We opened three pages of the official Vivid demo store in Chromium and let its scripts run. Anything the browser did not show was removed, so the theme is never marked down for something no visitor meets. Then each page went through the same engine as our free check. The pages tested:
This is the developer's own demo store; no merchant's shop was measured. If you make Vivid and have fixed something here, write to hello@limen.ae and we will re-test it.