Come risolvere Skip Link are no focusable in Elementor

skip link
A volte può capitare che PageSpeed Insights, il tool per verificare la velocità, l’accessibilità, la SEO e le Best Practice, segnali l’errore “Skip Link are no focusable“. Questo succede con Elementor e con il tema Hello. Ma può succedere anche con altri.

Ma cosa fa lo skip link?

E a cosa serve? Gli skip link sono elementi HTML utilizzati principalmente per migliorare l’accessibilità dei siti web. Servono a consentire agli utenti con tecnologie assistive, come screen reader, di saltare direttamente a parti specifiche del contenuto senza dover passare per tutte le sezioni di navigazione o altri elementi ripetitivi.Lo skip link non è focusabile nel senso tradizionale perché viene progettato per essere visibile solo quando è attivato dall’utente tramite la tastiera, tipicamente con il tasto Tab. Una volta attivato, può permettere all’utente di saltare direttamente a una sezione di interesse.Il funzionamento può variare leggermente a seconda dell’implementazione, ma in generale, lo skip link è progettato con le seguenti caratteristiche:
  1. Visibilità condizionale: In genere, lo skip link non è visibile a prima vista ma diventa visibile (ad esempio, diventando evidente tramite stili CSS) quando riceve il focus tramite la tastiera o quando si attiva la navigazione attraverso il Tab.
  2. Destinazione specifica: Quando attivato, di solito porta l’utente direttamente a una sezione principale del contenuto, saltando ad esempio la barra di navigazione o altre sezioni di intestazione.
  3. Implementazione accessibile: È importante che lo skip link sia accessibile, ossia utilizzabile anche senza l’uso del mouse. Deve funzionare correttamente con la tastiera per essere conforme agli standard di accessibilità.
In sostanza, gli skip link sono progettati per essere una risorsa discreta ma potente per gli utenti che navigano utilizzando tecnologie assistive. Sono un modo per rendere più agevole e veloce l’accesso al contenuto principale di una pagina web, migliorando l’esperienza per tutti gli utenti, inclusi quelli con disabilità.Risolverlo è semplicissimo con Elementor: basta aggiungere a un blocco, possibilmente il primo o ancora meglio in fondo all’Header l’id #content. Non serve aggiungere altro.  Io per esempio ho aggiunto un contenitore che ho lasciato vuoto, a cui ho dato l’ID #content 

Lascia un commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Su di me

Genovese di origine, trasferito in Riviera, da sempre appassionato di tecnologia comincio nel 2003 a smanettare su internet per poi fare della passione un lavoro.

Articoli recenti

tapulli checkout field

Tapulli Checkout Field

Per un progetto un po’ particolare mi serviva un semplice sistema per nascondere alcuni campi di checkout di Woocommerce. Niente di particolare, ma per Woocommerce

Leggi Tutto »