harborandpine.example

I run a Shopify store (Online Store 2.0 theme, Liquid templates) at harborandpine.example. An accessibility test found this problem and I want to fix it in my theme.

Problem: Keyboard focus is trapped in the cookie banner (WCAG 2.1.2).
Where: 1 instance on 1 page, for example /.

One failing element, as the browser rendered it:
```html
Settings
```

Why it matters: Keyboard-only and screen reader users cannot shop at all if focus is trapped (WCAG 2.1.2 No Keyboard Trap).

What needs to change:
- Check your cookie or consent banner app's settings for an accessibility or focus-trap option, or ask the vendor to fix it.
- A modal may keep focus inside it only while it is open, and must close with the Escape key and return focus to where it came from.

Rules for your answer:
- Show the exact edit as before and after, and name the file or setting it goes in. If you need to see my file first, ask me to paste it.
- Keep the visual design and all existing behaviour the same.
- Don't invent product names, prices or text; use placeholders I can fill in.
- End with how I can check the fix myself.
- Include how to confirm it with the keyboard and a screen reader.

I run a Shopify store (Online Store 2.0 theme, Liquid templates) at harborandpine.example. An accessibility test found this problem and I want to fix it in my theme.

Problem: Product options can't be chosen with the keyboard (WCAG 2.1.1).
Where: 1 instance on 1 page, for example /products/trail-daypack.

One failing element, as the browser rendered it:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Why it matters: Keyboard-only shoppers, including many screen reader users, can't get past this step (WCAG 2.1.1).

What needs to change:
- Build option pickers from native radio buttons (or a <select>) with visible labels; style the label as the swatch.
- If you keep custom elements, each option needs tabindex="0", role="radio" with aria-checked inside a role="radiogroup", and arrow-key and Space handling. Native radios give you all of this for free.

A suggested change (Your theme's product form (variant picker)):
```html
<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>
```

Rules for your answer:
- Show the exact edit as before and after, and name the file or setting it goes in. If you need to see my file first, ask me to paste it.
- Keep the visual design and all existing behaviour the same.
- Don't invent product names, prices or text; use placeholders I can fill in.
- End with how I can check the fix myself.
- Include how to confirm it with the keyboard and a screen reader.

I run a Shopify store (Online Store 2.0 theme, Liquid templates) at harborandpine.example. An accessibility test found this problem and I want to fix it in my theme.

Problem: Buttons must have discernible text (WCAG 4.1.2).
Where: 41 instances on 9 pages, for example /, /collections/all, /products/trail-daypack, /cart.

One failing element, as the browser rendered it:
```html
<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>
```

Why it matters: WCAG 4.1.2 requires every control to have a name. Unnamed buttons often include quantity steppers, close buttons and slider arrows.

What needs to change:
- Find the buttons in the examples below.
- Add visible text, visually hidden text, or an aria-label that says what the button does (for example aria-label="Close" or aria-label="Increase quantity").

A suggested change (Your theme code (search it for the markup shown)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Rules for your answer:
- Show the exact edit as before and after, and name the file or setting it goes in. If you need to see my file first, ask me to paste it.
- Keep the visual design and all existing behaviour the same.
- Don't invent product names, prices or text; use placeholders I can fill in.
- End with how I can check the fix myself.
- Include how to confirm it with the keyboard and a screen reader.

I run a Shopify store (Online Store 2.0 theme, Liquid templates) at harborandpine.example. An accessibility test found this problem and I want to fix it in my theme.

Problem: Images must have alternative text (WCAG 1.1.1).
Where: 22 instances on 7 pages, for example /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

One failing element, as the browser rendered it:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Why it matters: WCAG 1.1.1 requires a text alternative for meaningful images. Without it, a screen reader user can't tell which product a photo shows.

What needs to change:
- In Shopify admin, open Products > [product] > Media, click each image and fill in 'Alt text'. For section images, open Online Store > Themes > Customize and set the image alt text in the section settings.
- Describe what matters to a shopper: product name, color and the angle shown (for example 'Canvas tote in olive, front view').
- Decorative images should have an empty alt attribute (alt="") so screen readers skip them.

A suggested change (Product photos: Shopify admin › Products › Media › Alt text. Other images: your theme code):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Rules for your answer:
- Show the exact edit as before and after, and name the file or setting it goes in. If you need to see my file first, ask me to paste it.
- Keep the visual design and all existing behaviour the same.
- Don't invent product names, prices or text; use placeholders I can fill in.
- End with how I can check the fix myself.
- Include how to confirm it with the keyboard and a screen reader.

I run a Shopify store (Online Store 2.0 theme, Liquid templates) at harborandpine.example. An accessibility test found this problem and I want to fix it in my theme.

Problem: Form elements must have labels (WCAG 4.1.2).
Where: 7 instances on 6 pages, for example /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

One failing element, as the browser rendered it:
```html
<input type="number" value="1" min="1">
```

Why it matters: WCAG 1.3.1, 3.3.2 and 4.1.2 require form fields to have labels. Newsletter sign-up and search fields are common offenders.

What needs to change:
- Give each field a <label for="field-id"> element, or at minimum an aria-label.
- Placeholder text alone does not count as a label.

A suggested change (Your theme code (search it for the markup shown)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Rules for your answer:
- Show the exact edit as before and after, and name the file or setting it goes in. If you need to see my file first, ask me to paste it.
- Keep the visual design and all existing behaviour the same.
- Don't invent product names, prices or text; use placeholders I can fill in.
- End with how I can check the fix myself.
- Include how to confirm it with the keyboard and a screen reader.

I run a Shopify store (Online Store 2.0 theme, Liquid templates) at harborandpine.example. An accessibility test found this problem and I want to fix it in my theme.

Problem: Select element must have an accessible name (WCAG 4.1.2).
Where: 1 instance on 1 page, for example /collections/all.

One failing element, as the browser rendered it:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Why it matters: WCAG 4.1.2 requires select menus to have an accessible name.

What needs to change:
- Add a <label> linked to the select, or an aria-label such as aria-label="Sort by".

A suggested change (Your theme code (search it for the markup shown)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Rules for your answer:
- Show the exact edit as before and after, and name the file or setting it goes in. If you need to see my file first, ask me to paste it.
- Keep the visual design and all existing behaviour the same.
- Don't invent product names, prices or text; use placeholders I can fill in.
- End with how I can check the fix myself.
- Include how to confirm it with the keyboard and a screen reader.

I run a Shopify store (Online Store 2.0 theme, Liquid templates) at harborandpine.example. An accessibility test found this problem and I want to fix it in my theme.

Problem: Links must have discernible text (WCAG 2.4.4, 4.1.2).
Where: 36 instances on 9 pages, for example /, /collections/all, /products/trail-daypack, /cart.

One failing element, as the browser rendered it:
```html
<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>
```

Why it matters: WCAG 2.4.4 and 4.1.2 require links to have an accessible name that describes their purpose.

What needs to change:
- Find the links in the examples below. Most are icons or images inside an <a> tag.
- Add visually hidden text inside the link, or an aria-label such as aria-label="Instagram" or aria-label="Cart".
- If the link wraps an image, give the image meaningful alt text instead.

A suggested change (Your theme code (search it for the markup shown)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Rules for your answer:
- Show the exact edit as before and after, and name the file or setting it goes in. If you need to see my file first, ask me to paste it.
- Keep the visual design and all existing behaviour the same.
- Don't invent product names, prices or text; use placeholders I can fill in.
- End with how I can check the fix myself.
- Include how to confirm it with the keyboard and a screen reader.

I run a Shopify store (Online Store 2.0 theme, Liquid templates) at harborandpine.example. An accessibility test found this problem and I want to fix it in my theme.

Problem: Elements must meet minimum color contrast ratio thresholds (WCAG 1.4.3).
Where: 22 instances on 9 pages, for example /, /collections/all, /products/trail-daypack, /cart.

One failing element, as the browser rendered it:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Why it matters: WCAG 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Faint prices, badges and banners are hard to read for people with low vision, and for everyone in bright light.

What needs to change:
- Open the failing elements listed below and note the foreground and background colors in the failure summary.
- In Online Store > Themes > Customize > Theme settings > Colors, darken the text color or lighten the background for the affected color scheme until the ratio is at least 4.5:1.
- Pay special attention to sale badges, placeholder text, footer links and buttons on images.

A suggested change (Theme settings › Colors, or your theme's CSS file):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Rules for your answer:
- Show the exact edit as before and after, and name the file or setting it goes in. If you need to see my file first, ask me to paste it.
- Keep the visual design and all existing behaviour the same.
- Don't invent product names, prices or text; use placeholders I can fill in.
- End with how I can check the fix myself.
- Include how to confirm it with the keyboard and a screen reader.

I run a Shopify store (Online Store 2.0 theme, Liquid templates) at harborandpine.example. An accessibility test found this problem and I want to fix it in my theme.

Problem: All page content should be contained by landmarks.
Where: 18 instances on 9 pages, for example /, /collections/all, /products/trail-daypack, /cart.

One failing element, as the browser rendered it:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Why it matters: Landmarks let screen reader users jump around the page. This is a best practice supporting WCAG 1.3.1 and 2.4.1.

What needs to change:
- Wrap stray content (announcement bars, pop-ups, chat widgets) in the appropriate landmark or place it inside <main>.

Rules for your answer:
- Show the exact edit as before and after, and name the file or setting it goes in. If you need to see my file first, ask me to paste it.
- Keep the visual design and all existing behaviour the same.
- Don't invent product names, prices or text; use placeholders I can fill in.
- End with how I can check the fix myself.
- Include how to confirm it with the keyboard and a screen reader.

I run a Shopify store (Online Store 2.0 theme, Liquid templates) at harborandpine.example. An accessibility test found this problem and I want to fix it in my theme.

Problem: Heading levels should only increase by one.
Where: 7 instances on 7 pages, for example /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

One failing element, as the browser rendered it:
```html
<h3>Trail Daypack 22L</h3>
```

Why it matters: Screen reader users navigate by headings. This is a best practice supporting WCAG 1.3.1.

What needs to change:
- Adjust the heading levels in the affected sections so they go in order without skipping levels.
- Change only the tag, not the visual style (use CSS classes for size).

A suggested change (Your theme code (search it for the markup shown)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Rules for your answer:
- Show the exact edit as before and after, and name the file or setting it goes in. If you need to see my file first, ask me to paste it.
- Keep the visual design and all existing behaviour the same.
- Don't invent product names, prices or text; use placeholders I can fill in.
- End with how I can check the fix myself.
- Include how to confirm it with the keyboard and a screen reader.