harborandpine.example

Tengo una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad encontró este problema y quiero corregirlo en mi tema.

Problema: El foco del teclado queda atrapado en el banner de cookies (WCAG 2.1.2).
Dónde: 1 caso en 1 página, por ejemplo /.

Un elemento que falla, tal como lo renderizó el navegador:
```html
Settings
```

Por qué es importante: Si el foco queda atrapado, quienes usan solo el teclado o un lector de pantalla no pueden comprar en absoluto (WCAG 2.1.2 Sin trampas para el foco del teclado).

Qué hay que cambiar:
- Busca en la configuración de la app de tu banner de cookies o de consentimiento una opción de accesibilidad o de trampa de foco, o pídele al proveedor que lo corrija.
- Un modal puede retener el foco solo mientras está abierto, y debe cerrarse con la tecla Escape y devolver el foco a donde estaba.

Reglas para tu respuesta:
- Muestra el cambio exacto como antes y después, e indica el archivo o la configuración donde va. Si primero necesitas ver mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento existente.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda completar.
- Termina explicando cómo puedo comprobar la corrección yo mismo.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Tengo una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad encontró este problema y quiero corregirlo en mi tema.

Problema: Las opciones del producto no se pueden elegir con el teclado (WCAG 2.1.1).
Dónde: 1 caso en 1 página, por ejemplo /products/trail-daypack.

Un elemento que falla, tal como lo renderizó el navegador:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Por qué es importante: Los compradores que usan solo el teclado, incluidas muchas personas que usan lectores de pantalla, no pueden pasar de este paso (WCAG 2.1.1).

Qué hay que cambiar:
- Crea los selectores de opciones con botones de opción nativos (o un <select>) con etiquetas visibles; dale a la etiqueta el estilo de la muestra.
- Si conservas elementos personalizados, cada opción necesita tabindex="0", role="radio" con aria-checked dentro de un role="radiogroup", y manejo de las teclas de flecha y de Space. Los botones de opción nativos te dan todo esto sin esfuerzo.

Un cambio sugerido (El formulario de producto de tu tema (selector 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>
```

Reglas para tu respuesta:
- Muestra el cambio exacto como antes y después, e indica el archivo o la configuración donde va. Si primero necesitas ver mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento existente.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda completar.
- Termina explicando cómo puedo comprobar la corrección yo mismo.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Tengo una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad encontró este problema y quiero corregirlo en mi tema.

Problema: Los botones deben tener texto discernible (WCAG 4.1.2).
Dónde: 41 casos en 9 páginas, por ejemplo /, /collections/all, /products/trail-daypack, /cart.

Un elemento que falla, tal como lo renderizó el navegador:
```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 qué es importante: WCAG 4.1.2 exige que cada control tenga un nombre. Entre los botones sin nombre suelen estar los selectores de cantidad, los botones de cerrar y las flechas de los carruseles.

Qué hay que cambiar:
- Busca los botones en los ejemplos de abajo.
- Agrega texto visible, texto visualmente oculto o un aria-label que diga lo que hace el botón (por ejemplo aria-label="Close" o aria-label="Increase quantity").

Un cambio sugerido (El código de tu tema (busca en él el marcado que se muestra)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Reglas para tu respuesta:
- Muestra el cambio exacto como antes y después, e indica el archivo o la configuración donde va. Si primero necesitas ver mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento existente.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda completar.
- Termina explicando cómo puedo comprobar la corrección yo mismo.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Tengo una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad encontró este problema y quiero corregirlo en mi tema.

Problema: Las imágenes deben tener texto alternativo (WCAG 1.1.1).
Dónde: 22 casos en 7 páginas, por ejemplo /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Un elemento que falla, tal como lo renderizó el navegador:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Por qué es importante: WCAG 1.1.1 exige un texto alternativo para las imágenes con significado. Sin él, una persona que usa un lector de pantalla no puede saber qué producto muestra una foto.

Qué hay que cambiar:
- En el panel de administración de Shopify, abre Productos > [producto] > Multimedia, haz clic en cada imagen y completa 'Texto alternativo'. Para las imágenes de las secciones, abre Tienda online > Temas > Personalizar y define el texto alternativo de la imagen en la configuración de la sección.
- Describe lo que le importa a un comprador: el nombre del producto, el color y el ángulo que se muestra (por ejemplo, 'Bolso de lona verde oliva, vista frontal').
- Las imágenes decorativas deben tener un atributo alt vacío (alt="") para que los lectores de pantalla las omitan.

Un cambio sugerido (Fotos de producto: panel de administración de Shopify › Productos › Multimedia › Texto alternativo. Otras imágenes: el código de tu tema):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Reglas para tu respuesta:
- Muestra el cambio exacto como antes y después, e indica el archivo o la configuración donde va. Si primero necesitas ver mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento existente.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda completar.
- Termina explicando cómo puedo comprobar la corrección yo mismo.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Tengo una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad encontró este problema y quiero corregirlo en mi tema.

Problema: Los elementos de formulario deben tener etiquetas (WCAG 4.1.2).
Dónde: 7 casos en 6 páginas, por ejemplo /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Un elemento que falla, tal como lo renderizó el navegador:
```html
<input type="number" value="1" min="1">
```

Por qué es importante: WCAG 1.3.1, 3.3.2 y 4.1.2 exigen que los campos de formulario tengan etiquetas. Los campos de suscripción al boletín y de búsqueda suelen ser los que fallan.

Qué hay que cambiar:
- Dale a cada campo un elemento <label for="field-id"> o, como mínimo, un aria-label.
- El texto de marcador de posición (placeholder) por sí solo no cuenta como etiqueta.

Un cambio sugerido (El código de tu tema (busca en él el marcado que se muestra)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Reglas para tu respuesta:
- Muestra el cambio exacto como antes y después, e indica el archivo o la configuración donde va. Si primero necesitas ver mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento existente.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda completar.
- Termina explicando cómo puedo comprobar la corrección yo mismo.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Tengo una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad encontró este problema y quiero corregirlo en mi tema.

Problema: El elemento select debe tener un nombre accesible (WCAG 4.1.2).
Dónde: 1 caso en 1 página, por ejemplo /collections/all.

Un elemento que falla, tal como lo renderizó el navegador:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Por qué es importante: WCAG 4.1.2 exige que los menús de selección tengan un nombre accesible.

Qué hay que cambiar:
- Agrega un <label> vinculado al select, o un aria-label como aria-label="Sort by".

Un cambio sugerido (El código de tu tema (busca en él el marcado que se muestra)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Reglas para tu respuesta:
- Muestra el cambio exacto como antes y después, e indica el archivo o la configuración donde va. Si primero necesitas ver mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento existente.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda completar.
- Termina explicando cómo puedo comprobar la corrección yo mismo.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Tengo una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad encontró este problema y quiero corregirlo en mi tema.

Problema: Los enlaces deben tener texto discernible (WCAG 2.4.4, 4.1.2).
Dónde: 36 casos en 9 páginas, por ejemplo /, /collections/all, /products/trail-daypack, /cart.

Un elemento que falla, tal como lo renderizó el navegador:
```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 qué es importante: WCAG 2.4.4 y 4.1.2 exigen que los enlaces tengan un nombre accesible que describa su propósito.

Qué hay que cambiar:
- Busca los enlaces en los ejemplos de abajo. La mayoría son íconos o imágenes dentro de una etiqueta <a>.
- Agrega texto visualmente oculto dentro del enlace, o un aria-label como aria-label="Instagram" o aria-label="Cart".
- Si el enlace contiene una imagen, dale a la imagen un texto alternativo con significado.

Un cambio sugerido (El código de tu tema (busca en él el marcado que se muestra)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Reglas para tu respuesta:
- Muestra el cambio exacto como antes y después, e indica el archivo o la configuración donde va. Si primero necesitas ver mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento existente.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda completar.
- Termina explicando cómo puedo comprobar la corrección yo mismo.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Tengo una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad encontró este problema y quiero corregirlo en mi tema.

Problema: Los elementos deben tener un contraste de colores suficiente (WCAG 1.4.3).
Dónde: 22 casos en 9 páginas, por ejemplo /, /collections/all, /products/trail-daypack, /cart.

Un elemento que falla, tal como lo renderizó el navegador:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Por qué es importante: WCAG 1.4.3 exige una relación de contraste de al menos 4.5:1 para el texto normal y de 3:1 para el texto grande. Los precios, las etiquetas y los banners poco visibles son difíciles de leer para las personas con baja visión, y para cualquiera bajo una luz intensa.

Qué hay que cambiar:
- Abre los elementos que fallan que aparecen abajo y anota los colores de primer plano y de fondo del resumen de la falla.
- En Tienda online > Temas > Personalizar > Configuración del tema > Colores, oscurece el color del texto o aclara el fondo del esquema de colores afectado hasta que la relación sea de al menos 4.5:1.
- Presta especial atención a las etiquetas de oferta, al texto de marcador de posición (placeholder), a los enlaces del pie de página y a los botones sobre imágenes.

Un cambio sugerido (Configuración del tema › Colores, o el archivo CSS de tu tema):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Reglas para tu respuesta:
- Muestra el cambio exacto como antes y después, e indica el archivo o la configuración donde va. Si primero necesitas ver mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento existente.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda completar.
- Termina explicando cómo puedo comprobar la corrección yo mismo.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Tengo una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad encontró este problema y quiero corregirlo en mi tema.

Problema: Todo el contenido de la página debe estar incluido en puntos de referencia.
Dónde: 18 casos en 9 páginas, por ejemplo /, /collections/all, /products/trail-daypack, /cart.

Un elemento que falla, tal como lo renderizó el navegador:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Por qué es importante: Las regiones (landmarks) permiten que quienes usan lectores de pantalla salten de una parte a otra de la página. Es una buena práctica que respalda WCAG 1.3.1 y 2.4.1.

Qué hay que cambiar:
- Envuelve el contenido suelto (barras de anuncios, ventanas emergentes, widgets de chat) en la región adecuada o colócalo dentro de <main>.

Reglas para tu respuesta:
- Muestra el cambio exacto como antes y después, e indica el archivo o la configuración donde va. Si primero necesitas ver mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento existente.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda completar.
- Termina explicando cómo puedo comprobar la corrección yo mismo.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Tengo una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad encontró este problema y quiero corregirlo en mi tema.

Problema: El nivel de encabezados solo debería incrementarse en 1.
Dónde: 7 casos en 7 páginas, por ejemplo /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Un elemento que falla, tal como lo renderizó el navegador:
```html
<h3>Trail Daypack 22L</h3>
```

Por qué es importante: Quienes usan lectores de pantalla navegan por los encabezados. Es una buena práctica que respalda WCAG 1.3.1.

Qué hay que cambiar:
- Ajusta los niveles de encabezado de las secciones afectadas para que vayan en orden sin saltarse niveles.
- Cambia solo la etiqueta, no el estilo visual (usa clases CSS para el tamaño).

Un cambio sugerido (El código de tu tema (busca en él el marcado que se muestra)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Reglas para tu respuesta:
- Muestra el cambio exacto como antes y después, e indica el archivo o la configuración donde va. Si primero necesitas ver mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento existente.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda completar.
- Termina explicando cómo puedo comprobar la corrección yo mismo.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.