Informe ilustrativo · 17 de octubre de 2026

Pequeña tienda en línea: revisión de accesibilidad

Field & Form · fieldandform.example

Demostración ficticia. Clientes, dominios, hallazgos y evidencia son ilustrativos. Estos informes muestran la estructura, no análisis reales ni pruebas de resultados del producto.

Elegir plan

Resumen ejecutivo

Aclara imágenes y controles de cantidad antes de entregar el informe al equipo. Ambos afectan al recorrido al carrito. Corrige después el salto de encabezado para facilitar la navegación.

Páginas revisadas: 3
Tipos de hallazgos: 3
Crítica: 2
Moderada: 1

Las cifras representan tipos de hallazgos del ejemplo, no elementos afectados. La gravedad indica prioridad, no cumplimiento.

Alcance y método

Recorrido del cliente: Browse products → choose quantity → review the cart.

Páginas de ejemplo: //products/stoneware-mug/cart

Método: controles axe de cada página pública cargada. El ejemplo no cubre áreas privadas, todos los estados, teclado, lectores de pantalla ni evaluación WCAG completa. Los hallazgos requieren confirmación humana.

Este informe identifica hallazgos automáticos de accesibilidad. No acredita el cumplimiento legal; sigue siendo necesaria una evaluación manual.

Accesibilidad: normas y ámbito de aplicación

Hallazgos priorizados

Prioridad	Hallazgo	Página / regla	Próximo paso
Critical	Product image is missing an alternative	`/products/stoneware-mug` `image-alt`	Describe the product information shown in the image.
Critical	Quantity buttons have no accessible names	`/cart` `button-name`	Name each quantity action and identify its product.
Moderate	Catalog heading skips a level	`/` `heading-order`	Use a consistent heading hierarchy for catalog sections.

Evidencia y corrección

Dos hallazgos se detallan para mostrar la entrega a implementación.

Hallazgo 1 · Critical

Product image is missing an alternative

Elemento afectado: .product-gallery img:first-child en /products/stoneware-mug

Por qué importa: Customers who cannot see the photograph still need the product details it communicates. Alternative text should describe useful visual information without repeating every nearby word.

1 · Esquema de evidencia ilustrativa. Fragmento recreado, no una captura ni análisis real. Illustrative product markup has no alt attribute. The photograph is the only place where the mug’s glaze and handle shape are described.

Corrección sugerida

Add concise alternative text that conveys the meaningful product details. Review each gallery image individually; avoid repeating the same description for every view.

Antes · HTML ilustrativo

<img src="/mug.jpg" width="480" height="480">

Después · HTML sugerido

<img src="/mug.jpg" width="480" height="480"
  alt="Speckled cream stoneware mug with a wide loop handle">

Verifica la corrección: Re-run the image-alt rule. Read the product page with a screen reader and confirm the description is useful alongside the product name, price, and any additional gallery views.

Hallazgo 2 · Critical

Quantity buttons have no accessible names

Elemento afectado: .cart-item .quantity button en /cart

Por qué importa: Customers need to distinguish increase from decrease, especially when more than one product is in the cart. The visible icon may not supply a meaningful control name.

1 · Esquema de evidencia ilustrativa. Fragmento recreado, no una captura ni análisis real. Illustrative quantity buttons contain decorative minus and plus SVGs without accessible names. This finding groups two affected buttons under one rule.

Corrección sugerida

Give each button an action and product name. Announce quantity changes without moving focus, and communicate the minimum quantity through the control state.

Antes · HTML ilustrativo

<button><svg aria-hidden="true">…</svg></button>
<span>1</span>
<button><svg aria-hidden="true">…</svg></button>

Después · HTML sugerido

<button aria-label="Decrease Stoneware mug quantity">−</button>
<output aria-live="polite">1</output>
<button aria-label="Increase Stoneware mug quantity">+</button>

Verifica la corrección: Re-run the button-name rule. Adjust quantity with the keyboard and screen reader; confirm the action names, announced value, cart total update, and behavior at the minimum quantity.

Entrega recomendada

Confirma los hallazgos en la interfaz real y acuerda responsables y alcance.
Resuelve primero los hallazgos críticos; revisa cada cambio en contexto.
Prueba el recorrido con teclado y tecnología de asistencia.
Repite las mismas páginas, registra la revisión manual pendiente y comparte los cambios.