Report illustrativo · 17 ottobre 2026

Piccolo negozio online: verifica di accessibilità

Field & Form · fieldandform.example

Dimostrazione fittizia. Clienti, domini, risultati ed evidenze sono illustrativi. I report mostrano la struttura, non scansioni reali o prove dei risultati del prodotto.

Scegli piano

Riepilogo esecutivo

Chiarisci immagini e controlli quantità prima di consegnare il report al team. Entrambi influenzano il percorso verso il carrello. Correggi poi il livello di titolo saltato per facilitare la navigazione.

Pagine esaminate: 3
Tipi di risultati: 3
Critica: 2
Moderata: 1

I numeri indicano tipi di risultati dell’esempio, non elementi interessati. La gravità indica priorità, non conformità.

Ambito e metodo

Percorso cliente: Browse products → choose quantity → review the cart.

Pagine di esempio: //products/stoneware-mug/cart

Metodo: controlli axe su ogni pagina pubblica caricata. L’esempio non copre aree riservate, ogni stato, tastiera, lettore di schermo o valutazione WCAG completa. Serve conferma umana.

Questo report identifica risultati automatici di accessibilità. Non attesta la conformità legale; resta necessaria una valutazione manuale.

Accessibilità: regole e ambito di applicazione

Risultati prioritari

Priorità	Risultato	Pagina / regola	Passo successivo
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.

Evidenze e correzioni

Due risultati sono approfonditi per mostrare il passaggio all’implementazione.

Risultato 1 · Critical

Product image is missing an alternative

Elemento interessato: .product-gallery img:first-child su /products/stoneware-mug

Perché è importante: 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 · Schema illustrativo di evidenza. Frammento ricreato, non screenshot o scansione reale. Illustrative product markup has no alt attribute. The photograph is the only place where the mug’s glaze and handle shape are described.

Correzione suggerita

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

Prima · HTML illustrativo

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

Dopo · HTML suggerito

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

Verifica la correzione: 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.

Risultato 2 · Critical

Quantity buttons have no accessible names

Elemento interessato: .cart-item .quantity button su /cart

Perché è importante: 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 · Schema illustrativo di evidenza. Frammento ricreato, non screenshot o scansione reale. Illustrative quantity buttons contain decorative minus and plus SVGs without accessible names. This finding groups two affected buttons under one rule.

Correzione suggerita

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

Prima · HTML illustrativo

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

Dopo · HTML suggerito

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

Verifica la correzione: 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.

Passaggio consigliato

Conferma i risultati nell’interfaccia reale e concorda responsabili e ambito.
Risolvi prima i risultati critici; verifica ogni modifica nel contesto.
Prova il percorso con tastiera e tecnologie assistive.
Ripeti le stesse pagine, registra le verifiche manuali residue e condividi le modifiche.