harborandpine.example

Administro uma loja Shopify (tema Online Store 2.0, templates Liquid) em harborandpine.example. Um teste de acessibilidade encontrou este problema e quero corrigi-lo no meu tema.

Problema: O foco do teclado fica preso no banner de cookies (WCAG 2.1.2).
Onde: 1 ocorrência em 1 página, por exemplo /.

Um elemento com falha, como o navegador o renderizou:
```html
Settings
```

Por que isso importa: Quem usa só o teclado ou um leitor de tela não consegue comprar nada se o foco fica preso (WCAG 2.1.2 Sem Bloqueio do Teclado).

O que precisa mudar:
- Procure nas configurações do app do seu banner de cookies ou de consentimento uma opção de acessibilidade ou de armadilha de foco, ou peça ao fornecedor que corrija.
- Um modal só pode manter o foco dentro dele enquanto estiver aberto, e deve fechar com a tecla Escape e devolver o foco para onde ele estava.

Regras para a sua resposta:
- Mostre a alteração exata como antes e depois, e diga em qual arquivo ou configuração ela entra. Se precisar ver meu arquivo primeiro, peça para eu colá-lo.
- Mantenha o design visual e todo o comportamento existente iguais.
- Não invente nomes de produtos, preços nem textos; use marcadores que eu possa preencher.
- Termine explicando como eu mesmo posso conferir a correção.
- Inclua como confirmar a correção com o teclado e com um leitor de tela.

Administro uma loja Shopify (tema Online Store 2.0, templates Liquid) em harborandpine.example. Um teste de acessibilidade encontrou este problema e quero corrigi-lo no meu tema.

Problema: As opções do produto não podem ser escolhidas pelo teclado (WCAG 2.1.1).
Onde: 1 ocorrência em 1 página, por exemplo /products/trail-daypack.

Um elemento com falha, como o navegador o renderizou:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Por que isso importa: Compradores que usam só o teclado, incluindo muitas pessoas que usam leitor de tela, não conseguem passar desta etapa (WCAG 2.1.1).

O que precisa mudar:
- Crie os seletores de opção com botões de opção (radio) nativos (ou um <select>) com rótulos visíveis; estilize o rótulo como a amostra.
- Se você mantiver elementos personalizados, cada opção precisa de tabindex="0", role="radio" com aria-checked dentro de um role="radiogroup", e de suporte às setas e à barra de espaço. Os radios nativos já oferecem tudo isso.

Uma mudança sugerida (O formulário de produto do seu tema (seletor de variantes)):
```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>
```

Regras para a sua resposta:
- Mostre a alteração exata como antes e depois, e diga em qual arquivo ou configuração ela entra. Se precisar ver meu arquivo primeiro, peça para eu colá-lo.
- Mantenha o design visual e todo o comportamento existente iguais.
- Não invente nomes de produtos, preços nem textos; use marcadores que eu possa preencher.
- Termine explicando como eu mesmo posso conferir a correção.
- Inclua como confirmar a correção com o teclado e com um leitor de tela.

Administro uma loja Shopify (tema Online Store 2.0, templates Liquid) em harborandpine.example. Um teste de acessibilidade encontrou este problema e quero corrigi-lo no meu tema.

Problema: Botões devem ter texto discernível (WCAG 4.1.2).
Onde: 41 ocorrências em 9 páginas, por exemplo /, /collections/all, /products/trail-daypack, /cart.

Um elemento com falha, como o navegador o renderizou:
```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>
```

Por que isso importa: O critério 4.1.2 da WCAG exige que todo controle tenha um nome. Botões sem nome costumam incluir os de aumentar e diminuir quantidade, botões de fechar e setas de carrossel.

O que precisa mudar:
- Encontre os botões nos exemplos abaixo.
- Adicione um texto visível, um texto visualmente oculto ou um aria-label que diga o que o botão faz (por exemplo aria-label="Close" ou aria-label="Increase quantity").

Uma mudança sugerida (O código do seu tema (procure nele o HTML mostrado)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Regras para a sua resposta:
- Mostre a alteração exata como antes e depois, e diga em qual arquivo ou configuração ela entra. Se precisar ver meu arquivo primeiro, peça para eu colá-lo.
- Mantenha o design visual e todo o comportamento existente iguais.
- Não invente nomes de produtos, preços nem textos; use marcadores que eu possa preencher.
- Termine explicando como eu mesmo posso conferir a correção.
- Inclua como confirmar a correção com o teclado e com um leitor de tela.

Administro uma loja Shopify (tema Online Store 2.0, templates Liquid) em harborandpine.example. Um teste de acessibilidade encontrou este problema e quero corrigi-lo no meu tema.

Problema: Imagens devem ter texto alternativo (WCAG 1.1.1).
Onde: 22 ocorrências em 7 páginas, por exemplo /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Um elemento com falha, como o navegador o renderizou:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Por que isso importa: O critério 1.1.1 da WCAG exige uma alternativa em texto para imagens com significado. Sem ela, quem usa leitor de tela não consegue saber qual produto uma foto mostra.

O que precisa mudar:
- No admin da Shopify, abra Produtos > [produto] > Mídia, clique em cada imagem e preencha “Texto alternativo”. Para imagens de seções, abra Loja virtual > Temas > Personalizar e defina o texto alternativo da imagem nas configurações da seção.
- Descreva o que importa para quem compra: nome do produto, cor e o ângulo mostrado (por exemplo “Bolsa de lona verde-oliva, vista frontal”).
- Imagens decorativas devem ter um atributo alt vazio (alt="") para que os leitores de tela as ignorem.

Uma mudança sugerida (Fotos de produto: admin da Shopify › Produtos › Mídia › Texto alternativo. Outras imagens: o código do seu tema):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Regras para a sua resposta:
- Mostre a alteração exata como antes e depois, e diga em qual arquivo ou configuração ela entra. Se precisar ver meu arquivo primeiro, peça para eu colá-lo.
- Mantenha o design visual e todo o comportamento existente iguais.
- Não invente nomes de produtos, preços nem textos; use marcadores que eu possa preencher.
- Termine explicando como eu mesmo posso conferir a correção.
- Inclua como confirmar a correção com o teclado e com um leitor de tela.

Administro uma loja Shopify (tema Online Store 2.0, templates Liquid) em harborandpine.example. Um teste de acessibilidade encontrou este problema e quero corrigi-lo no meu tema.

Problema: Elementos de formulário devem ter rótulos (WCAG 4.1.2).
Onde: 7 ocorrências em 6 páginas, por exemplo /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Um elemento com falha, como o navegador o renderizou:
```html
<input type="number" value="1" min="1">
```

Por que isso importa: Os critérios 1.3.1, 3.3.2 e 4.1.2 da WCAG exigem que os campos de formulário tenham rótulos. Campos de inscrição na newsletter e de busca são os casos mais comuns.

O que precisa mudar:
- Dê a cada campo um elemento <label for="field-id"> ou, no mínimo, um aria-label.
- Um texto de placeholder sozinho não conta como rótulo.

Uma mudança sugerida (O código do seu tema (procure nele o HTML mostrado)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Regras para a sua resposta:
- Mostre a alteração exata como antes e depois, e diga em qual arquivo ou configuração ela entra. Se precisar ver meu arquivo primeiro, peça para eu colá-lo.
- Mantenha o design visual e todo o comportamento existente iguais.
- Não invente nomes de produtos, preços nem textos; use marcadores que eu possa preencher.
- Termine explicando como eu mesmo posso conferir a correção.
- Inclua como confirmar a correção com o teclado e com um leitor de tela.

Administro uma loja Shopify (tema Online Store 2.0, templates Liquid) em harborandpine.example. Um teste de acessibilidade encontrou este problema e quero corrigi-lo no meu tema.

Problema: O elemento 'select' deve ter um nome acessível (WCAG 4.1.2).
Onde: 1 ocorrência em 1 página, por exemplo /collections/all.

Um elemento com falha, como o navegador o renderizou:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Por que isso importa: O critério 4.1.2 da WCAG exige que menus de seleção tenham um nome acessível.

O que precisa mudar:
- Adicione um <label> vinculado ao select, ou um aria-label como aria-label="Sort by".

Uma mudança sugerida (O código do seu tema (procure nele o HTML mostrado)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Regras para a sua resposta:
- Mostre a alteração exata como antes e depois, e diga em qual arquivo ou configuração ela entra. Se precisar ver meu arquivo primeiro, peça para eu colá-lo.
- Mantenha o design visual e todo o comportamento existente iguais.
- Não invente nomes de produtos, preços nem textos; use marcadores que eu possa preencher.
- Termine explicando como eu mesmo posso conferir a correção.
- Inclua como confirmar a correção com o teclado e com um leitor de tela.

Administro uma loja Shopify (tema Online Store 2.0, templates Liquid) em harborandpine.example. Um teste de acessibilidade encontrou este problema e quero corrigi-lo no meu tema.

Problema: Links devem ter um texto discernível (WCAG 2.4.4, 4.1.2).
Onde: 36 ocorrências em 9 páginas, por exemplo /, /collections/all, /products/trail-daypack, /cart.

Um elemento com falha, como o navegador o renderizou:
```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>
```

Por que isso importa: Os critérios 2.4.4 e 4.1.2 da WCAG exigem que os links tenham um nome acessível que descreva a finalidade deles.

O que precisa mudar:
- Encontre os links nos exemplos abaixo. A maioria são ícones ou imagens dentro de uma tag <a>.
- Adicione um texto visualmente oculto dentro do link, ou um aria-label como aria-label="Instagram" ou aria-label="Cart".
- Se o link envolve uma imagem, dê à imagem um texto alternativo significativo.

Uma mudança sugerida (O código do seu tema (procure nele o HTML mostrado)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Regras para a sua resposta:
- Mostre a alteração exata como antes e depois, e diga em qual arquivo ou configuração ela entra. Se precisar ver meu arquivo primeiro, peça para eu colá-lo.
- Mantenha o design visual e todo o comportamento existente iguais.
- Não invente nomes de produtos, preços nem textos; use marcadores que eu possa preencher.
- Termine explicando como eu mesmo posso conferir a correção.
- Inclua como confirmar a correção com o teclado e com um leitor de tela.

Administro uma loja Shopify (tema Online Store 2.0, templates Liquid) em harborandpine.example. Um teste de acessibilidade encontrou este problema e quero corrigi-lo no meu tema.

Problema: Os elementos devem ter contraste de cor suficiente (WCAG 1.4.3).
Onde: 22 ocorrências em 9 páginas, por exemplo /, /collections/all, /products/trail-daypack, /cart.

Um elemento com falha, como o navegador o renderizou:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Por que isso importa: O critério 1.4.3 da WCAG exige uma razão de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Preços, selos e banners apagados são difíceis de ler para pessoas com baixa visão e para qualquer pessoa sob luz forte.

O que precisa mudar:
- Abra os elementos com falha listados abaixo e anote as cores do texto e do fundo no resumo da falha.
- Em Loja virtual > Temas > Personalizar > Configurações do tema > Cores, escureça a cor do texto ou clareie o fundo do esquema de cores afetado até a razão chegar a pelo menos 4,5:1.
- Preste atenção especial a selos de promoção, textos de placeholder, links do rodapé e botões sobre imagens.

Uma mudança sugerida (Configurações do tema › Cores, ou o arquivo CSS do seu tema):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Regras para a sua resposta:
- Mostre a alteração exata como antes e depois, e diga em qual arquivo ou configuração ela entra. Se precisar ver meu arquivo primeiro, peça para eu colá-lo.
- Mantenha o design visual e todo o comportamento existente iguais.
- Não invente nomes de produtos, preços nem textos; use marcadores que eu possa preencher.
- Termine explicando como eu mesmo posso conferir a correção.
- Inclua como confirmar a correção com o teclado e com um leitor de tela.

Administro uma loja Shopify (tema Online Store 2.0, templates Liquid) em harborandpine.example. Um teste de acessibilidade encontrou este problema e quero corrigi-lo no meu tema.

Problema: Todo o conteúdo da página deve estar contido em regiões (landmarks).
Onde: 18 ocorrências em 9 páginas, por exemplo /, /collections/all, /products/trail-daypack, /cart.

Um elemento com falha, como o navegador o renderizou:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Por que isso importa: Os landmarks permitem que quem usa leitor de tela salte entre as partes da página. É uma boa prática que apoia os critérios 1.3.1 e 2.4.1 da WCAG.

O que precisa mudar:
- Coloque o conteúdo solto (barras de aviso, pop-ups, widgets de chat) dentro do landmark adequado ou dentro de <main>.

Regras para a sua resposta:
- Mostre a alteração exata como antes e depois, e diga em qual arquivo ou configuração ela entra. Se precisar ver meu arquivo primeiro, peça para eu colá-lo.
- Mantenha o design visual e todo o comportamento existente iguais.
- Não invente nomes de produtos, preços nem textos; use marcadores que eu possa preencher.
- Termine explicando como eu mesmo posso conferir a correção.
- Inclua como confirmar a correção com o teclado e com um leitor de tela.

Administro uma loja Shopify (tema Online Store 2.0, templates Liquid) em harborandpine.example. Um teste de acessibilidade encontrou este problema e quero corrigi-lo no meu tema.

Problema: Níveis dos títulos devem aumentar de um em um.
Onde: 7 ocorrências em 7 páginas, por exemplo /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Um elemento com falha, como o navegador o renderizou:
```html
<h3>Trail Daypack 22L</h3>
```

Por que isso importa: Quem usa leitor de tela navega pelos cabeçalhos. É uma boa prática que apoia o critério 1.3.1 da WCAG.

O que precisa mudar:
- Ajuste os níveis de cabeçalho nas seções afetadas para que sigam em ordem, sem pular níveis.
- Mude só a tag, não o estilo visual (use classes CSS para o tamanho).

Uma mudança sugerida (O código do seu tema (procure nele o HTML mostrado)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Regras para a sua resposta:
- Mostre a alteração exata como antes e depois, e diga em qual arquivo ou configuração ela entra. Se precisar ver meu arquivo primeiro, peça para eu colá-lo.
- Mantenha o design visual e todo o comportamento existente iguais.
- Não invente nomes de produtos, preços nem textos; use marcadores que eu possa preencher.
- Termine explicando como eu mesmo posso conferir a correção.
- Inclua como confirmar a correção com o teclado e com um leitor de tela.