Synthetic Shopify Demo Store

Buttons with no accessible name

Automated violation axe impact: critical

Evidence ID

demo-evidence-02

Rule

button-name 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/cart

Context

cart; default; pixel-5-touch

WCAG criteria

4.1.2

What automation observed

axe-core returned button-name for the retained button because no accessible name was computed.

Why it may matter

Icon-only buttons such as search, cart, menu and close are announced as just "button". A blind shopper cannot tell the add-to-cart button from the close button without pressing it to find out.

General remediation guidance

Add aria-label="Search" (and so on) to each button, or put visually hidden text inside it. In most themes these buttons are in sections/header.liquid, snippets/cart-drawer.liquid, and the product form snippets.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun button-name with axe-core 4.12.1.

Retest

Repeat button-name with the same v2 methodology after the change.

Element locator

Structural path

button:nth-of-type(1)

Capture and replay

Exactly one matching element in each context

Viewport

393 × 851 CSS pixels

Recorded bounds

x 320, y 540, width 44, height 44

Sanitized supporting evidence

• Sanitized markup

  <button type="button"></button>

Buttons with no accessible name

Automated violation axe impact: critical

Evidence ID

demo-evidence-01

Rule

button-name 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/products/daypack

Context

product; default; pixel-5-touch

WCAG criteria

4.1.2

What automation observed

axe-core returned button-name for the retained button because no accessible name was computed.

Why it may matter

Icon-only buttons such as search, cart, menu and close are announced as just "button". A blind shopper cannot tell the add-to-cart button from the close button without pressing it to find out.

General remediation guidance

Add aria-label="Search" (and so on) to each button, or put visually hidden text inside it. In most themes these buttons are in sections/header.liquid, snippets/cart-drawer.liquid, and the product form snippets.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun button-name with axe-core 4.12.1.

Retest

Repeat button-name with the same v2 methodology after the change.

Element locator

Structural path

button:nth-of-type(1)

Capture and replay

Exactly one matching element in each context

Viewport

393 × 851 CSS pixels

Recorded bounds

x 320, y 540, width 44, height 44

Sanitized supporting evidence

• Sanitized markup

  <button type="button"></button>

Form fields with no label

Automated violation axe impact: critical

Evidence ID

demo-evidence-08

Rule

label 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/search

Context

search; default; reflow-320

WCAG criteria

1.3.1, 3.3.2, 4.1.2

What automation observed

axe-core returned label for the retained search input because no programmatic label was computed.

Why it may matter

Input fields, commonly the newsletter signup in the footer, quantity boxes, or search, have no label. Screen reader users are handed an unnamed text box and have to guess what to type in it.

General remediation guidance

Add a label element tied to the input's id, or aria-label on the input. The footer newsletter form is usually in sections/footer.liquid, and quantity inputs are in the product form snippet.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun label with axe-core 4.12.1.

Retest

Repeat label with the same v2 methodology after the change.

Element locator

Structural path

input:nth-of-type(1)

Capture and replay

Exactly one matching element in each context

Viewport

320 × 900 CSS pixels

Recorded bounds

x 20, y 96, width 280, height 44

Sanitized supporting evidence

• Sanitized markup

  <input type="search">

Images with no text description

Automated violation axe impact: serious

Evidence ID

demo-evidence-03

Rule

image-alt 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/collections/summer

Context

collection; default; desktop-default

WCAG criteria

1.1.1

What automation observed

axe-core returned image-alt for the retained image because no text alternative was present.

Why it may matter

Product and collection images have no alternative text. A blind shopper using a screen reader hears nothing at all, or a filename like "IMG_2041.jpg", instead of what the product looks like. In practice the product is invisible to them.

General remediation guidance

In Shopify admin, open each product, go to Media, click the image and choose "Add alt text". Describe the product ("Green ceramic mug with bamboo lid"), not keywords. For banner and section images, the alt field is in the theme editor on each section. For images hardcoded in the theme, add alt="..." to the img tag.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun image-alt with axe-core 4.12.1.

Retest

Repeat image-alt with the same v2 methodology after the change.

Element locator

Structural path

img:nth-of-type(1)

Capture and replay

Exactly one matching element in each context

Viewport

1440 × 900 CSS pixels

Recorded bounds

x 64, y 220, width 280, height 360

Sanitized supporting evidence

• Sanitized markup

  <img src="[redacted-url]">

Page with no title

Automated violation axe impact: serious

Evidence ID

demo-evidence-12

Rule

document-title 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/

Context

home; default; desktop-default

WCAG criteria

2.4.2

What automation observed

axe-core returned document-title because the retained document title was empty.

Why it may matter

The page has no title element, so browser tabs, bookmarks and screen readers announce nothing useful. Screen reader users rely on the title to know which page just loaded.

General remediation guidance

Shopify themes set titles in layout/theme.liquid via page_title. If a page shows none, that tag was removed or emptied; restore <title>{{ page_title }}</title>.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun document-title with axe-core 4.12.1.

Retest

Repeat document-title with the same v2 methodology after the change.

Element locator

Exact locator not established. Reason: ambiguous.

Sanitized supporting evidence

• Sanitized markup

  <title></title>

Links with no accessible name

Automated violation axe impact: serious

Evidence ID

demo-evidence-09

Rule

link-name 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/pages/shipping

Context

information; default; reflow-320

WCAG criteria

2.4.4, 4.1.2

What automation observed

axe-core returned link-name for the retained link because no accessible name was computed.

Why it may matter

Icon-only links (logo, cart, social icons) are announced by screen readers as just "link". A shopper who cannot see the icon has no way to know whether a link opens the cart or leaves the site.

General remediation guidance

Add a visually hidden label inside the link, like <span class="visually-hidden">Cart</span> (most Shopify themes ship this utility class), or set aria-label="Cart" on the a tag. Header, footer and social links live in sections/header.liquid and sections/footer.liquid in most themes.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun link-name with axe-core 4.12.1.

Retest

Repeat link-name with the same v2 methodology after the change.

Element locator

Structural path

a:nth-of-type(1)

Capture and replay

Exactly one matching element in each context

Viewport

320 × 900 CSS pixels

Recorded bounds

x 24, y 610, width 32, height 24

Sanitized supporting evidence

• Sanitized markup

  <a href="[redacted-url]"></a>

Images with no text description

Automated violation axe impact: serious

Evidence ID

demo-evidence-04

Rule

image-alt 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/products/daypack

Context

product; default; desktop-default

WCAG criteria

1.1.1

What automation observed

axe-core returned image-alt for the retained image because no text alternative was present.

Why it may matter

Product and collection images have no alternative text. A blind shopper using a screen reader hears nothing at all, or a filename like "IMG_2041.jpg", instead of what the product looks like. In practice the product is invisible to them.

General remediation guidance

In Shopify admin, open each product, go to Media, click the image and choose "Add alt text". Describe the product ("Green ceramic mug with bamboo lid"), not keywords. For banner and section images, the alt field is in the theme editor on each section. For images hardcoded in the theme, add alt="..." to the img tag.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun image-alt with axe-core 4.12.1.

Retest

Repeat image-alt with the same v2 methodology after the change.

Element locator

Structural path

img:nth-of-type(1)

Capture and replay

Exactly one matching element in each context

Viewport

1440 × 900 CSS pixels

Recorded bounds

x 64, y 220, width 280, height 360

Sanitized supporting evidence

• Sanitized markup

  <img src="[redacted-url]">

Touch targets that are too small or crowded

Automated violation axe impact: moderate

Evidence ID

demo-evidence-05

Rule

target-size 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/

Context

home; default; pixel-5-touch

WCAG criteria

2.5.8

What automation observed

axe-core returned target-size for an 18 by 18 CSS-pixel control adjacent to another target.

Why it may matter

A link or control does not meet the WCAG 2.2 minimum target size or spacing exception. Shoppers with limited dexterity, tremor, or reduced precision may activate a nearby control by mistake.

General remediation guidance

Increase the clickable area to at least 24 by 24 CSS pixels, or add enough spacing so a 24 pixel circle around the target does not overlap adjacent targets. Adjust the link or button padding rather than only enlarging its icon. Verify at the recorded mobile viewport and identify the component source before assigning ownership.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun target-size with axe-core 4.12.1.

Retest

Repeat target-size with the same v2 methodology after the change.

Element locator

Structural path

button:nth-of-type(1)

Capture and replay

Exactly one matching element in each context

Viewport

393 × 851 CSS pixels

Recorded bounds

x 24, y 140, width 18, height 18

Sanitized supporting evidence

• Sanitized markup

  <button type="button" aria-label="[text]"></button>

• Allowlisted target geometry

  {
    "widthCssPx": 18,
    "heightCssPx": 18,
    "adjacentTargetDistanceCssPx": 4
  }

Needs review — not confirmed: Text with insufficient color contrast

Needs review axe impact: serious

Evidence ID

demo-evidence-06

Rule

color-contrast 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/

Context

home; default; desktop-default

WCAG criteria

1.4.3

What automation observed

Automation returned an indeterminate result. Captured result wording: axe-core returned an incomplete color-contrast result because the effective background could not be determined automatically. This does not confirm a failure.

Why it may matter

If review confirms the recorded condition, the potential effect is: Some text does not stand out enough from its background to meet the WCAG minimum of 4.5:1 for body text. Shoppers with low vision may be unable to read prices, product descriptions or button labels. This group is a meaningful share of online buyers.

General remediation guidance

Do not apply a fix from this result alone. First verify the condition. If confirmed, the general guidance is: Most contrast failures trace back to theme settings. In the theme editor, open Theme settings, then Colors. Darken the failing text color or lighten the background, and check button and badge color pairs. A free contrast checker such as WebAIM's will tell you when a pair passes 4.5:1.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun color-contrast with axe-core 4.12.1.

Retest

Repeat color-contrast with the same v2 methodology after the change.

Element locator

Structural path

span:nth-of-type(1)

Capture and replay

Exactly one matching element in each context

Viewport

1440 × 900 CSS pixels

Recorded bounds

x 48, y 184, width 176, height 24

Sanitized supporting evidence

• Sanitized markup

  <span>[text]</span>

Needs review — not confirmed: Embedded frames with no title

Needs review axe impact: serious

Evidence ID

demo-evidence-11

Rule

frame-title 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/products/daypack

Context

product; default; desktop-default

WCAG criteria

2.4.1, 4.1.2

What automation observed

Automation returned an indeterminate result. Captured result wording: axe-core returned an incomplete frame-title result at an unsupported frame boundary; the condition requires review. This does not confirm a failure.

Why it may matter

If review confirms the recorded condition, the potential effect is: Embedded content (videos, app widgets, maps) sits in an iframe with no title. Screen readers announce an anonymous "frame", so the shopper cannot tell whether it holds a size chart or a video.

General remediation guidance

Do not apply a fix from this result alone. First verify the condition. If confirmed, the general guidance is: Add title="Product video" (or whatever fits) to the iframe tag. Trace the frame to its theme section, app embed, or custom source first. If a verified third-party source cannot be edited, send its provider the recorded evidence.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun frame-title with axe-core 4.12.1.

Retest

Repeat frame-title with the same v2 methodology after the change.

Element locator

Exact locator not established. Reason: ambiguous.

Sanitized supporting evidence

• Sanitized markup

  <iframe src="[redacted-url]"></iframe>

Heading levels that skip

Advisory axe impact: moderate

Evidence ID

demo-evidence-10

Rule

heading-order 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/collections/summer

Context

collection; default; desktop-default

WCAG criteria

No WCAG criterion recorded

What automation observed

axe-core returned the best-practice heading-order advisory for the retained heading sequence.

Why it may matter

Headings jump levels, for example an H1 followed by an H4. Screen reader users navigate by heading structure the way sighted users scan a page visually. Skipped levels make the page read like a table of contents with missing chapters.

General remediation guidance

In the theme sections, change heading tags so they go in order. The visual size can stay exactly the same; style headings with CSS classes rather than by picking a bigger or smaller tag. The usual cause is section templates that hardcode h3 or h4 no matter where the section sits.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun heading-order with axe-core 4.12.1.

Retest

Repeat heading-order with the same v2 methodology after the change.

Element locator

Structural path

h3:nth-of-type(1)

Capture and replay

Exactly one matching element in each context

Viewport

1440 × 900 CSS pixels

Recorded bounds

x 48, y 380, width 240, height 32

Sanitized supporting evidence

• Sanitized markup

  <h3>[text]</h3>

Page content outside landmarks

Advisory axe impact: moderate

Evidence ID

demo-evidence-07

Rule

region 4.12.1

Result source

axe-core

Page

https://synthetic-shopify-demo.example/pages/shipping

Context

information; default; desktop-default

WCAG criteria

No WCAG criterion recorded

What automation observed

axe-core returned the best-practice region advisory for retained content outside a landmark.

Why it may matter

Some visible page content is not contained in a landmark. Screen reader users navigating by region can skip past that content without realizing it exists.

General remediation guidance

Place the primary content inside main and repeated navigation, header, footer, form, or complementary content inside the appropriate semantic landmark. Use a labelled region only when it has a meaningful navigational purpose. Trace the rendered section before assigning ownership.

Reproduce

Open the recorded page-state-device context. Use the verified privacy-safe structural locator when available; otherwise match the sanitized evidence in that context. Then rerun region with axe-core 4.12.1.

Retest

Repeat region with the same v2 methodology after the change.

Element locator

Structural path

section:nth-of-type(1)

Capture and replay

Exactly one matching element in each context

Viewport

1440 × 900 CSS pixels

Recorded bounds

x 20, y 120, width 760, height 320

Sanitized supporting evidence

• Sanitized markup

  <section>[text]</section>