Technical Assessment + Fix Plan

2 images have alternative text that looks like a file name, a generic word, or is very long. (2 look like file names, e.g. “IMG_4821.jpg”)

Why it matters: Alt text like "IMG_4821.jpg" or "image" tells a screen-reader user nothing about the product. This is flagged as possibly inadequate: a person should confirm it.

How to fix (Shopify): Shopify admin → Products → open the product → Media → click the image → edit the alt text so it describes the image instead of naming the file.

In code: Replace file names and generic words with a short description of what the image shows. Keep it under about 150 characters and put longer details in the page text.

Check it yourself: Read each flagged image's alt text next to the image. Would someone who can't see it understand what it shows?

Your letter mentions this: “images lack alternative text” (p. 2)

Example elements:

<img src="demo-img/candle-lit.svg" alt="IMG_4821.jpg">

<img src="demo-img/candle-box.svg" alt="DSC0042">

Evidence: 1 URL (list in appendix) · scanned 2026-09-11 14:02 UTC

Status: Unfixed

2 images have no alternative text.

Why it matters: Screen-reader users hear nothing, or just a file name, where the image is. They can't tell what a product looks like or what a banner says.

How to fix (Shopify): Shopify admin → Products → open the product → Media → click the image → Add alt text → describe what the image shows (e.g. "Lavender soy candle in amber glass jar, lid off"). For banner and section images: Online Store → Themes → Customize → select the section → Image → Alt text.

In code: Add an alt attribute that describes the image: <img src="candle.jpg" alt="Lavender soy candle in amber glass jar">. Use alt="" only for purely decorative images.

Check it yourself: Turn on your screen reader (VoiceOver on Mac: Cmd+F5; NVDA on Windows) and move through the page. Each image should be read as a short description, not a file name.

Your letter mentions this: “images lack alternative text” (p. 2)

Example elements:

<img src="demo-img/candle-front.svg">

<img src="demo-img/candle-side.svg">

Evidence: 1 URL (list in appendix) · scanned 2026-09-11 14:02 UTC

Status: Unfixed

1 button has no text a screen reader can announce.

Why it matters: Icon-only buttons such as menu, search, close, and gallery arrows are read as just "button". Users can't tell what pressing them will do.

How to fix (Shopify): These are usually theme icons (menu, search, gallery arrows, close). Check for a theme update first (Online Store → Themes → ⋯ → check for updates). Otherwise: Edit code, find the <button>, and add aria-label="Next image" (or visually hidden text), or send this report to your theme developer.

In code: Give every button a name: visible text, or aria-label on an icon button (<button aria-label="Next image">…</button>).

Check it yourself: With a screen reader on, tab to each button. It should announce what it does, e.g. "Next image, button".

Example elements:

<button class="next" type="button"><svg aria-hidden="true" width="22" height="22" viewBox="0 0 22 22"><path d="m8 4 7 7-7 7" fill="none" stroke="currentColor" stroke-width="2"></path></svg></button>

Evidence: 1 URL (list in appendix) · scanned 2026-09-11 14:02 UTC

Status: Unfixed

1 text element doesn't have enough contrast with the background.

Why it matters: People with low vision or color blindness, or anyone on a phone in sunlight, may not be able to read light gray text on white.

How to fix (Shopify): Online Store → Themes → Customize → Theme settings → Colors → darken the text colors (or lighten the background) in each color scheme used by the flagged sections. Aim for a contrast ratio of at least 4.5:1 for normal text.

In code: Change the text or background color so the contrast ratio is at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). Check colors with the WebAIM Contrast Checker.

Check it yourself: Paste the text and background colors into the WebAIM Contrast Checker (webaim.org/resources/contrastchecker) and confirm the normal-text result passes AA.

Your letter mentions this: “insufficient color contrast” (p. 3)

Example elements:

<p class="description">A calm evening in the countryside, poured by hand with soy wax, lavender essential oil, and a soft cedar finish. Burns for approximately 45 hours.</p>

Evidence: 1 URL (list in appendix) · scanned 2026-09-11 14:02 UTC

Status: Unfixed

1 page doesn't declare a language.

Why it matters: Screen readers use the page language to pick a voice and pronunciation. Without it, English text may be read with the wrong accent or rules.

How to fix (Shopify): Settings → Languages → confirm your default language. If the theme still leaves it out: Online Store → Themes → ⋯ → Edit code → layout/theme.liquid → make the opening tag <html lang="{{ request.locale.iso_code }}">.

In code: Add a lang attribute to the <html> tag: <html lang="en">.

Check it yourself: View the page source (Ctrl+U / Cmd+Option+U) and check that the first <html> tag has lang="en" (or your language).

Example elements:

<html>

Evidence: 1 URL (list in appendix) · scanned 2026-09-11 14:02 UTC

Status: Unfixed

1 form field has no label that a screen reader can announce.

Why it matters: Without a label, a screen-reader user hears only "edit text" and has to guess what to type. That includes the email signup, search, and quantity fields.

How to fix (Shopify): Check for a theme update first (Online Store → Themes → ⋯ → check for updates), since theme sections like the newsletter and search often fix this in newer versions. Otherwise: Online Store → Themes → ⋯ → Edit code, find the section with the field, and add a <label> or aria-label. If you're not comfortable editing code, send this report to your theme developer.

In code: Connect a visible label to every field: <label for="email">Email</label><input id="email" type="email">. If a visible label really isn't possible, add aria-label="Email address". Placeholder text alone is not a label.

Check it yourself: With a screen reader on, tab into each form field. It should announce the field's purpose (e.g. "Email address, edit text").

Example elements:

<input id="quantity" name="quantity" type="number" value="1" min="1">

Evidence: 1 URL (list in appendix) · scanned 2026-09-11 14:02 UTC

Status: Unfixed

1 link has no text a screen reader can announce.

Why it matters: Icon-only links such as the cart, account, or social icons are read as just "link", or as a long URL. Users can't tell where the link goes.

How to fix (Shopify): Linked images: give the image alt text that says where it goes (e.g. "Shop the fall collection"). Theme icons like cart, account, and social links: check for a theme update first; otherwise Edit code and add aria-label="Cart" (or visually hidden text) to the link, or send this report to your theme developer.

In code: Every link needs text: visible text, alt text on a linked image, or aria-label on an icon link (<a href="/cart" aria-label="Cart">…</a>).

Check it yourself: With a screen reader on, open the links list (VoiceOver: Ctrl+Option+U; NVDA: Insert+F7). Every link should have a meaningful name.

Example elements:

<a class="cart" href="#cart"><svg aria-hidden="true" width="28" height="28" viewBox="0 0 28 28"><path d="M3 4h3l2 14h13l3-10H7M10 23a1 1 0 1 0 0 .1M20 23a1 1 0 1 0 0 .1" fill="none" stroke="currentColor" stroke-width="2"></path></svg></a>

Evidence: 1 URL (list in appendix) · scanned 2026-09-11 14:02 UTC

Status: Unfixed