harborandpine.example

Gestiono una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad ha encontrado 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 mostró el navegador:
```html
Settings
```

Por qué es importante: Las personas que solo usan el teclado y los usuarios de lectores de pantalla no pueden comprar en absoluto si el foco queda atrapado (WCAG 2.1.2 Sin trampas para el foco del teclado).

Qué hay que cambiar:
- Busca en los ajustes de la app de tu banner de cookies o de consentimiento una opción de accesibilidad o de trampa de foco, o pide al proveedor que lo corrija.
- Una ventana modal solo puede retener el foco mientras está abierta, y debe cerrarse con la tecla Escape y devolver el foco al lugar de donde venía.

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

Gestiono una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad ha encontrado 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 mostró el navegador:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Por qué es importante: Los compradores que solo usan el teclado, entre ellos muchos usuarios de 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; da a la etiqueta el estilo de la muestra.
- Si mantienes elementos personalizados, cada opción necesita tabindex="0", role="radio" con aria-checked dentro de un role="radiogroup", y gestión de las teclas de flecha y de la barra espaciadora. 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 el ajuste donde va. Si necesitas ver primero mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento actual.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda rellenar.
- Termina explicando cómo puedo comprobar la corrección por mi cuenta.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Gestiono una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad ha encontrado 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 mostró 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.
- Añade texto visible, texto visualmente oculto o un aria-label que diga qué 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 el ajuste donde va. Si necesitas ver primero mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento actual.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda rellenar.
- Termina explicando cómo puedo comprobar la corrección por mi cuenta.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Gestiono una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad ha encontrado 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 mostró 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, un usuario de 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 rellena «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 ve (por ejemplo, «Bolso tote de lona en 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 el ajuste donde va. Si necesitas ver primero mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento actual.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda rellenar.
- Termina explicando cómo puedo comprobar la corrección por mi cuenta.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Gestiono una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad ha encontrado 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 mostró 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 a la newsletter y de búsqueda son los que más suelen fallar.

Qué hay que cambiar:
- Dale a cada campo un elemento <label for="field-id"> o, como mínimo, un aria-label.
- El texto del 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 el ajuste donde va. Si necesitas ver primero mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento actual.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda rellenar.
- Termina explicando cómo puedo comprobar la corrección por mi cuenta.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Gestiono una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad ha encontrado 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 mostró 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:
- Añade 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 el ajuste donde va. Si necesitas ver primero mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento actual.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda rellenar.
- Termina explicando cómo puedo comprobar la corrección por mi cuenta.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Gestiono una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad ha encontrado 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 mostró 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 iconos o imágenes dentro de una etiqueta <a>.
- Añade 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 el ajuste donde va. Si necesitas ver primero mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento actual.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda rellenar.
- Termina explicando cómo puedo comprobar la corrección por mi cuenta.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Gestiono una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad ha encontrado 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 mostró 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 con colores tenues son difíciles de leer para las personas con baja visión y, con luz intensa, para todo el mundo.

Qué hay que cambiar:
- Abre los elementos que fallan que se enumeran abajo y anota los colores de primer plano y de fondo que aparecen en el resumen del fallo.
- En Tienda online > Temas > Personalizar > Configuración del tema > Colores, oscurece el color del texto o aclara el fondo del esquema de color 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 los marcadores de posición, 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 el ajuste donde va. Si necesitas ver primero mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento actual.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda rellenar.
- Termina explicando cómo puedo comprobar la corrección por mi cuenta.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Gestiono una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad ha encontrado 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 mostró el navegador:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Por qué es importante: Las regiones permiten a los usuarios de lectores de pantalla saltar de una parte a otra de la página. Es una buena práctica que contribuye a cumplir 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 el ajuste donde va. Si necesitas ver primero mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento actual.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda rellenar.
- Termina explicando cómo puedo comprobar la corrección por mi cuenta.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.

Gestiono una tienda Shopify (tema Online Store 2.0, plantillas Liquid) en harborandpine.example. Una prueba de accesibilidad ha encontrado 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 mostró el navegador:
```html
<h3>Trail Daypack 22L</h3>
```

Por qué es importante: Los usuarios de lectores de pantalla navegan por los encabezados. Es una buena práctica que contribuye a cumplir WCAG 1.3.1.

Qué hay que cambiar:
- Ajusta los niveles de encabezado de las secciones afectadas para que sigan un 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 el ajuste donde va. Si necesitas ver primero mi archivo, pídeme que lo pegue.
- Mantén igual el diseño visual y todo el comportamiento actual.
- No inventes nombres de productos, precios ni textos; usa marcadores de posición que yo pueda rellenar.
- Termina explicando cómo puedo comprobar la corrección por mi cuenta.
- Incluye cómo confirmarlo con el teclado y con un lector de pantalla.