Verifica l'accessibilità di un'interfaccia

Analizza una schermata o un frammento HTML secondo le WCAG 2.2 e ottieni un elenco di problemi in ordine di priorità, con le relative soluzioni. Pensato per ChatGPT, Claude e Gemini. Include 2 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.

Intermedio · Testo · In attesa di revisione editoriale

Prompt

Agisci come auditor certificato di accessibilità web (WCAG 2.2 livello AA). Analizza questa interfaccia: {{interface}} Contesto d'uso: {{context}} Per ogni problema individuato, includi: - Criterio WCAG interessato (numero e nome). - Gravità: critica, alta, media o bassa. - Chi riguarda (screen reader, tastiera, ipovisione, daltonismo, difficoltà cognitive…). - Una soluzione concreta con il codice corretto, dove applicabile. Concludi con: 1. Le 3 correzioni a maggior impatto da cui iniziare. 2. Un elenco di test manuali da eseguire (tastiera, zoom al 200%, screen reader). Se qualcosa non può essere valutato con le informazioni fornite, dillo invece di fare supposizioni.

Esempio di risultato

Il frammento ricevuto contiene solo <form>…</form>, quindi non posso valutare il codice reale. Per un tipico checkout da mobile, questi sono i problemi da verificare per primi:

Rilievi

1. Campi senza etichetta associata

Criterio: 1.3.1 Informazioni e correlazioni · 4.1.2 Nome, ruolo, valore
Gravità: critica · Riguarda: screen reader, disabilità cognitive
Correzione:

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

2. Errori segnalati solo con il bordo rosso

Criterio: 1.4.1 Uso del colore · 3.3.1 Identificazione degli errori
Gravità: alta · Riguarda: daltonismo, screen reader
Correzione: testo d'errore collegato con aria-describedby e aria-invalid="true".

3. Pulsante «Paga» troppo piccolo su mobile

Criterio: 2.5.8 Dimensione del target (minima)
Gravità: media · Riguarda: mobilità ridotta
Correzione: almeno 24 × 24 px; consigliati 44 px di altezza.

Test manuali

Completare l'acquisto solo da tastiera (Tab, Maiusc+Tab, Invio).
Zoom al 200% senza perdita di contenuti.
Verificare l'annuncio degli errori con VoiceOver o TalkBack…

Domande frequenti

Cosa devo incollare come interfaccia?

L'HTML della pagina, il codice di un componente o una descrizione dettagliata della schermata. Più codice reale fornisci, più precisi saranno i risultati.

Sostituisce un audit professionale?

No. Individua rapidamente molti problemi comuni, ma un audit formale di conformità richiede test manuali con tecnologie assistive e, idealmente, con persone con disabilità.

A cosa serve questo prompt?

Analizza una schermata o un frammento HTML secondo le WCAG 2.2 e ottieni un elenco di problemi in ordine di priorità, con le relative soluzioni.

Con quali strumenti di IA funziona?

È pensato per ChatGPT, Claude e Gemini. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.

Come personalizzo il prompt?

Clicca su «Personalizza» e compila le variabili (HTML o descrizione e Contesto d'uso). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.

Serve esperienza per usarlo?

È di livello intermedio: conviene conoscere l'argomento per fornire un buon contesto e valutare il risultato con occhio critico.

Questo prompt è gratuito?

Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.

Posso fidarmi dell'output dell'IA?

Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.

Prompt correlati

Design UI/UX

Palette per la modalità scura accessibile con verifica del contrasto WCAG

Progetta una palette per la modalità scura con token semantici partendo dai colori del brand, con tabella di contrasto WCAG per ogni coppia, correzioni e codice CSS pronto.