ComplyPages

Scoprite come appare un risultato ComplyPages

I nostri report sono progettati per l'azione. Ogni risultato spiega dove compare il problema, perché è importante e cosa può fare il vostro sviluppatore o agenzia.

Struttura del report

  1. Riepilogo esecutivo
  2. Flusso analizzato
  3. Principali rischi di accessibilità visibili
  4. Dettagli dei problemi pronti per gli sviluppatori
  5. Coda di correzioni suggerite
  6. Checklist di retest
  7. Raccomandazione di monitoraggio

1. Riepilogo esecutivo

Questo snapshot di esempio esamina un percorso di pagamento pubblico e individua i rischi di accessibilità visibili che possono incidere sulla navigazione da tastiera, sulla comprensione tramite screen reader e sulla compilazione dei moduli. Non è una valutazione legale né una certificazione, ma un insieme di osservazioni pratiche per aiutare un team web a stabilire le priorità di correzione su un percorso critico per il cliente.

2. Flusso analizzato

Snapshot di esempio per

example-store.com

Carrello → Ordine → Pagamento

Rischio: Medio

Tipo di flusso

Checkout e-commerce

Pagine analizzate

4 pagine pubbliche

3. Principali rischi di accessibilità visibili

  • Il pulsante d'ordine non ha un nome accessibile (alta)
  • Un campo obbligatorio non è etichettato a livello programmatico (media)
  • Il messaggio di errore non è esposto chiaramente dopo l'invio (media)

4. Dettagli dei problemi pronti per gli sviluppatori

CP-0001

Il pulsante d'ordine non ha un nome accessibile

apertoalta
Flow: Conferma di pagamentohttps://example-store.com/checkout
Screenshot for CP-0001

Element: button.checkout-submit

WCAG 2.1 A 4.1.2WCAG 2.1 AA 2.4.6

EAA relevance: Conformità EAA — rischio di accessibilità visibile nel percorso di pagamento pubblico

Passaggi per riprodurre

  1. Aprire https://example-store.com/checkout con articoli nel carrello
  2. Ispezionare il pulsante finale con screen reader o axe DevTools
  3. Rilevare il nome accessibile mancante su button.checkout-submit

Impatto sul cliente

Chi usa uno screen reader potrebbe non capire quale azione compie il pulsante.

Impatto sul business

Se il cliente non riconosce l'azione finale d'ordine, può non riuscire a concludere l'acquisto. Nota tecnica: Il pulsante è visibile, ma il suo nome accessibile manca o non è chiaro.

Correzione suggerita

Aggiungere un testo visibile chiaro o un nome accessibile che descriva l'azione.

Esempio da copiare

Solo un esempio — adattatelo al vostro codice.

<button class="checkout-submit" aria-label="Conferma ordine">
  Conferma ordine
</button>

Criteri di accettazione

  • Le tecnologie assistive annunciano il pulsante come «Conferma ordine» o equivalente
  • Il pulsante è raggiungibile e attivabile da tastiera
CP-0002

Un campo obbligatorio non è etichettato a livello programmatico

apertomedia
Flow: Modulo dati clientehttps://example-store.com/checkout

Element: input#customer-email

WCAG 2.1 A 1.3.1WCAG 2.1 A 3.3.2WCAG 2.1 A 4.1.2

EAA relevance: Conformità EAA — rischio di accessibilità visibile nel percorso di pagamento pubblico

Passaggi per riprodurre

  1. Aprire https://example-store.com/checkout
  2. Raggiungere con il tasto Tab il campo dell'indirizzo e-mail
  3. Confermare che input#customer-email non ha un'etichetta associata nell'albero di accessibilità

Impatto sul cliente

Chi usa tecnologie assistive potrebbe non sapere quale informazione è richiesta.

Impatto sul business

Una compilazione più difficile aumenta l'abbandono dell'ordine. Nota tecnica: L'etichetta visibile non è collegata correttamente al campo di input.

Correzione suggerita

Associare l'etichetta al campo tramite una relazione for/id valida o un metodo di etichettatura accessibile equivalente.

Esempio da copiare

Solo un esempio — adattatelo al vostro codice.

<label for="customer-email">Indirizzo e-mail</label>
<input id="customer-email" type="email" name="email" required />

Criteri di accettazione

  • L'etichetta del campo viene annunciata correttamente dalle tecnologie assistive
  • L'obbligatorietà del campo è evidente
CP-0003

Il messaggio di errore non è esposto chiaramente dopo l'invio

apertomedia
Flow: Validazione del modulo di ordinehttps://example-store.com/checkout

Element: .field-error

WCAG 2.1 A 3.3.1WCAG 2.1 A 4.1.3

EAA relevance: Conformità EAA — rischio di accessibilità visibile nel percorso di pagamento pubblico

Passaggi per riprodurre

  1. Inviare il modulo d'ordine con un indirizzo e-mail non valido
  2. Osservare la comparsa del messaggio di errore visivo
  3. Confermare che l'errore non viene annunciato né è collegato al campo

Impatto sul cliente

Gli utenti potrebbero non capire perché non riescono a proseguire.

Impatto sul business

Gli errori di validazione non annunciati impediscono di completare l'ordine. Nota tecnica: Il messaggio di errore compare visivamente, ma potrebbe non essere annunciato né collegato al campo interessato.

Correzione suggerita

Collegare il messaggio di errore al campo e assicurarsi che venga annunciato quando la validazione fallisce.

Criteri di accettazione

  • Gli utenti individuano quale campo contiene l'errore
  • Gli utenti comprendono il problema e possono correggerlo senza indizi solo visivi

5. Coda di correzioni suggerite

I problemi sono prioritizzati per gravità e impatto sul cliente. Il vostro sviluppatore o agenzia lavora sulla coda in ordine.

6. Checklist di retest

  • Rieseguire i controlli di accessibilità su /checkout dopo il rilascio delle correzioni
  • Verificare con screen reader che il pulsante d'ordine abbia un nome accessibile
  • Confermare che le etichette del modulo siano associate ai rispettivi campi
  • Verificare che i messaggi di errore vengano annunciati quando la validazione fallisce

7. Raccomandazione di monitoraggio

Dopo le prime correzioni, valutate un monitoraggio continuo del percorso di transazione per individuare regressioni nelle fasi di ordine e pagamento.