Salto dei blocchi

Cosa richiede

Se lo stesso blocco di contenuto compare su più pagine — intestazione, navigazione principale, mega-menu, barra breadcrumb, link di servizio — gli utenti che usano il mouse possono ignorarlo instantaneamente. Gli utenti di tastiera devono invece attraversarlo con Tab ogni volta. Gli utenti di screen reader devono ascoltarlo. Il criterio di successo richiede almeno un meccanismo che permetta di raggiungere direttamente il contenuto principale.

WCAG accetta diversi meccanismi: un link «Salta al contenuto principale», le regioni landmark appropriate (<header>, <nav>, <main>, <footer>) oppure una vera gerarchia di intestazioni che gli utenti di screen reader possono navigare con il tasto H. In pratica, un link di salto combinato con le landmark costituisce la soluzione di riferimento sicura.

Come soddisfarlo

• Aggiungere un link «Salta al contenuto principale» come primo elemento attivabile con Tab nella pagina. Renderlo visibile al focus, non nascosto in modo permanente.
• Puntare l’attributo href del link di salto all’id dell’elemento <main> e aggiungere tabindex="-1" a <main> affinché l’anello di focus arrivi correttamente in Safari.
• Usare elementi landmark reali: un <header>, un <nav> (o più, ciascuno con aria-label), un <main>, un <footer> per pagina.
• Mantenere uno schema di intestazioni pulito in modo che gli utenti di JAWS e NVDA possano premere H, 1, 2, 3 per spostarsi rapidamente.
• Se ci sono più blocchi ripetuti (navigazione di servizio + navigazione principale + breadcrumb), valutare un secondo link di salto per quello più gravoso.

Errori comuni

• Link di salto nascosto con display: none anziché spostato fuori dallo schermo e ripristinato al focus — la tecnologia assistiva non riesce a trovarlo.
• Il target del link di salto è privo di tabindex="-1", quindi Safari/WebKit ignora il salto e mantiene il focus sul link stesso.
• <main> racchiuso all’interno di <nav> oppure duplicato più volte sulla pagina.
• Gerarchia di intestazioni che salta livelli (h1 → h4) o che usa le intestazioni puramente per la dimensione visiva, compromettendo la strategia di navigazione con il tasto H.
• Intestazioni fisse che sovrastano l’elemento focalizzato dopo l’attivazione del link di salto — si veda il criterio 2.4.11.

Perché è importante

«Salto dei blocchi» è la vittoria più economica dell’intera lista di accessibilità — un link di salto richiede circa 10 righe di HTML e CSS — eppure il tasso di fallimento sui siti in produzione si attesta ancora intorno al 60% nelle scansioni annuali Million di WebAIM. Per un utente che naviga solo da tastiera su un sito con un mega-menu da 40 voci, dover attraversare l’intero menu a ogni cambio di pagina è estenuante e, in sessioni di navigazione prolungate, invalidante.