Report illustrativo · 17 ottobre 2026

Sito vetrina di agenzia: verifica di accessibilità

Northline Studio · northline.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 prima modulo e navigazione, necessari ai potenziali clienti per esplorare servizi e contattarti. Poi verifica la descrizione dell’immagine del caso.

Pagine esaminate: 4
Tipi di risultati: 3
Critica: 3
Moderata: 0

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

Ambito e metodo

Percorso cliente: Discover services → read a case study → send an inquiry.

Pagine di esempio: //services/work/contact

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	Email field has no accessible label	`/contact` `label`	Connect a visible label to the email field.
Critical	Menu button has no accessible name	`/` `button-name`	Name the menu control and expose its expanded state.
Critical	Case-study image is missing an alternative	`/work` `image-alt`	Describe the project image or mark it decorative after reviewing its purpose.

Evidenze e correzioni

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

Risultato 1 · Critical

Email field has no accessible label

Elemento interessato: #contact-form input[type="email"] su /contact

Perché è importante: A person using a screen reader needs a reliable name for the field. An unnamed input gives no reliable indication of the information expected.

1 · Schema illustrativo di evidenza. Frammento ricreato, non screenshot o scansione reale. Illustrative markup contains an email input with no associated label, aria-label, or aria-labelledby.

Correzione suggerita

Add a visible Work email label, connect it with for/id, and preserve the expected email input type and autofill hint.

Prima · HTML illustrativo

<input type="email">

Dopo · HTML suggerito

<label for="email">Work email</label>
<input id="email" name="email" type="email"
  autocomplete="email" required>

Verifica la correzione: Re-run the label rule. Tab into the field and confirm that a screen reader announces Work email, its input type, and required state. Submit an invalid email and review the error message separately.

Risultato 2 · Critical

Menu button has no accessible name

Elemento interessato: header button.menu-toggle su /

Perché è importante: An icon alone does not tell a screen reader user what the button does. The expanded state helps people understand whether navigation is open.

1 · Schema illustrativo di evidenza. Frammento ricreato, non screenshot o scansione reale. Illustrative markup contains only an SVG inside a button; the SVG is decorative and supplies no accessible name.

Correzione suggerita

Give the button an accessible name. Update aria-expanded when the menu opens or closes and connect aria-controls to the navigation container.

Prima · HTML illustrativo

<button class="menu-toggle">
  <svg aria-hidden="true">…</svg>
</button>

Dopo · HTML suggerito

<button class="menu-toggle" aria-label="Menu"
  aria-controls="site-nav" aria-expanded="false">
  <svg aria-hidden="true">…</svg>
</button>

Verifica la correzione: Re-run the button-name rule, then open and close the menu with Enter and Space. Confirm the state is announced, links are reachable, and focus remains predictable when the menu closes.

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.