Le novità della 2.2: aspetto del focus e dimensione dei target
Applicare i criteri introdotti nell'ultima versione
Le novità della 2.2: aspetto del focus e dimensione dei target è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Le novità introdotte dalla versione 2.2
Nel 2023 WCAG 2.2 ha aggiunto nove nuovi criteri di successo. Due tra i più pratici per l'interfaccia quotidiana sono Focus Appearance e Target Size.
Focus non oscurato
La nuova regola 2.4.11 (Focus Not Obscured) di livello AA stabilisce che l'elemento con focus non debba essere completamente nascosto da intestazioni fisse o barre dei cookie.
Perché un focus nascosto è un problema
Se un banner fisso copre il controllo con focus, gli utenti da tastiera perdono di vista la propria posizione. Devono poter vedere l'elemento su cui sono appena arrivati con Tab.
L'aspetto del focus a livello AAA
Il criterio 2.4.13 (Focus Appearance) è di livello AAA. Specifica un'area minima per l'indicatore e un contrasto di 3:1, così il contorno del focus è inequivocabile.
Dimensione minima dell'area interattiva
La regola AA 2.5.8 (Target Size Minimum) richiede che le aree attivabili al tocco siano di almeno 24 per 24 pixel CSS oppure dispongano di spazio sufficiente intorno.
Perché 24 pixel
Le aree interattive piccole sono difficili da usare per chi ha tremori o dita grandi. Una soglia di 24px riduce i tocchi errati senza imporre ovunque un design ingombrante.
L'eccezione dello spazio
Un'area interattiva inferiore a 24px può comunque essere conforme se un cerchio di 24px intorno al suo centro non si sovrappone a un'area vicina. Lo spazio compensa le dimensioni ridotte.
Definire le dimensioni in CSS
Assegni ai pulsanti piccoli una vera dimensione minima, così superano comodamente la soglia di 24px.
button {
min-width: 24px;
min-height: 24px;
}I collegamenti nel testo sono esenti
I collegamenti inseriti in una frase sono esenti dal criterio 2.5.8, perché ridurre il testo solo per ingrandirli peggiorerebbe l'esperienza di lettura.
Assistenza coerente: 3.2.6
Un'altra aggiunta della versione 2.2, 3.2.6 (Consistent Help) di livello A, mantiene i collegamenti all'assistenza e le informazioni di contatto nella stessa posizione relativa tra le pagine.
Inserimento ridondante: 3.3.7
Il criterio 3.3.7 (Redundant Entry) di livello A stabilisce di non chiedere agli utenti di riscrivere informazioni già fornite, a meno che non siano essenziali, come una password.
Verifica rapida
Ricordi la dimensione minima delle aree attivabili al tocco prevista da WCAG 2.2.
Riepilogo: le aggiunte della versione 2.2
La versione 2.2 ha aggiunto regole su focus e aree interattive: mantenga il focus visibile, crei aree di 24px o ben distanziate ed eviti di richiedere nuovamente dati già inseriti. Prossimo argomento: trascinamento e autenticazione. 🎯
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Le novità della 2.2: aspetto del focus e dimensione dei target» è gratuita?
Sì — il testo completo di «Le novità della 2.2: aspetto del focus e dimensione dei target» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Le novità della 2.2: aspetto del focus e dimensione dei target»?
Applicare i criteri introdotti nell'ultima versione Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Le novità della 2.2: aspetto del focus e dimensione dei target»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- A, AA, AAA: scegliere l'obiettivo giusto
- Le novità della 2.2: aspetto del focus e dimensione dei target
- Movimenti di trascinamento e autenticazione accessibile
- Scrivere una dichiarazione di conformità difendibile