Come utilizzare i link di salto per rendere il tuo sito WordPress più accessibile

Nella nostra introduzione alla serie sull'accessibilità, abbiamo parlato della base per le varie linee guida per l'accessibilità dei contenuti Web (WCAG). Ora è il momento di fare il passo successivo esaminando alcune delle linee guida chiave e mostrandoti come rendere il tuo sito più accessibile. Iniziamo con i blocchi di bypass, più comunemente noti come skip link.

Cos'è uno Skip Link?

Uno skip link è un link speciale che è nascosto sul tuo sito fino a quando non entra in :focus tramite il tasto tab o uno screen reader. Il loro scopo è offrire agli utenti di tecnologie alternative (persone che utilizzano tastiere e lettori di schermo) la possibilità di saltare blocchi di contenuto. Direttamente dagli standard:

"È disponibile un meccanismo per aggirare i blocchi di contenuto che si ripetono su più pagine Web." – WCAG Standard 2.4.1 – Aggira i blocchi

2.4.1 è uno standard di livello A. Ciò significa che è coperto dalla Sezione 508 e richiesto dalla legge. È necessario disporre di skip link.

Riesci a indovinare qual è il blocco più comune di link di salto del contenuto a cui si applica? Se hai indovinato "il menu", avresti ragione. I menu appaiono praticamente su ogni pagina di un sito. Gli utenti vedenti e gli utenti del mouse tendono a scorrere proprio accanto a loro perché è uno di quegli elementi del sito che ti aspetti di essere lì. Ma i menu di navigazione non sono gli unici blocchi che necessitano di skip link.

Un'area comunemente trascurata per i link di salto sono le barre laterali di sinistra (o le barre laterali di destra per i siti in lingue da destra a sinistra come l'arabo). A causa di dove tendono a cadere in ordine semantico, gli utenti avranno bisogno di un modo per saltare la barra laterale regolarmente ripetuta per arrivare direttamente al contenuto.

Lo stesso vale per i blocchi di post in primo piano che vengono visualizzati al di fuori della home page. Alcuni progetti di siti portano sezioni di post in primo piano o dispositivi di scorrimento nelle pagine interne. A meno che il contenuto di tali sezioni non stia cambiando, ad esempio: categorie o pagine di archivio, dovrebbe essere presente un link di salto.

Come si aggiungono Skip Link?

Ora che sai cos'è uno skip link, è il momento di aggiungerli al tuo sito. Ci sono un paio di modi per risolvere questo problema. Il modo più semplice (e per voi non programmatori, l'unico modo), è installare un plugin. Il modo più difficile è codificarli tu stesso nel tuo tema.

Utilizzo di un plug-in

Un plug-in che consigliamo quando si tratta di saltare i collegamenti: WP Accessibility di Joe Dolson. Risolve diversi problemi di accessibilità, inclusa l'aggiunta di collegamenti di salto di base per te.

Codificalo tu stesso

L'altra opzione è codificare tu stesso i link di salto. Il codice stesso è abbastanza semplice e richiede solo alcune conoscenze di base di HTML e CSS, ma prima di provare questo metodo dovrai essere a tuo agio con il funzionamento dei temi e dei modelli di WordPress. Da questo punto in poi, supponiamo che tu sappia come trovare i file a cui si fa riferimento e come modificarli.

Inizieremo scrivendo prima gli effettivi skip link. Ciò consentirà un facile copia e incolla nei file modello. Ricordando la conoscenza dell'HTML, dovrai scrivere un tag di ancoraggio. Si noti che la formattazione qui è per la leggibilità.

 <a href=”[don't fill this in yet]” class=”skip-link”> Skip to Main Content </a>

Abbiamo lasciato vuoto l'attributo href di proposito. Questo perché dobbiamo definire dove si collegherà il nostro skip link. Per questo esempio, useremo l'elemento <main> come obiettivo. Poiché non possiamo collegarci direttamente a un elemento senza un ID, dovremo assicurarci che il nostro elemento <main> ne abbia uno. Il tuo elemento <main> sarà probabilmente trovato in header.php , ma non sempre. Una volta individuato l'elemento, dovrai assicurarti che abbia un ID. In caso contrario, aggiungine uno in questo modo:

 <main id=”main-content”> [a bunch more code below]

Il valore specifico dell'ID non è importante, ma dovrai ricordarlo. Ora vorrai aggiornare il tuo codice skip link con il valore ID.

 <a href=”#main-content” class=”skip-link”> Skip to Main Content </a>

Ora che hai creato il tuo skip link, torna al tuo file header.php o dovunque si trovi il tag <body> di apertura del tuo tema. Il tag <body> è un posizionamento essenziale per i link di salto in quanto devono essere la prima cosa in assoluto che entra in :focus per gli utenti di tastiera e screen reader.

Subito dopo il tag <body> , oltre il codice HTML completato. Quanto segue mostra un esempio più dettagliato con più skip link. Se vuoi aggiungere più link al tuo sito, assicurati che gli ID siano applicati correttamente.

 <body> <a href=”#left-sidebar” class=”skip-link”>Skip to Sidebar</a> <a href=”#featured-posts-block” class=”skip-link”>Skip to Featured Posts</a> <a href=”#main-content” class=”skip-link”>Skip to Main Content</a> [Header navigation goes here]

Ora hai skip link nel tuo codice, ma non hai ancora finito! Se carichi la tua pagina ora, vedrai i collegamenti di salto in alto. È ora di aggiungere un po' di CSS. Lo stile degli skip link è piuttosto semplice, utilizzando l'esempio seguente:

 .skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; }

Quello che non vedi è l'uso di display: none . Il suo utilizzo farà sì che uno screen reader salti completamente il collegamento, vanificando completamente lo scopo. L'occultamento avviene posizionando il testo fuori dallo schermo usando right: 100% e spostandolo a right: auto on :focus .

Con il tuo CSS applicato, sei a posto. I tuoi skip link sono presenti, ma nascosti. Quando un utente di tastiera o un'utilità per la lettura dello schermo carica la tua pagina su initials :focus , i tuoi collegamenti di salto consentiranno loro di passare direttamente al contenuto per cui sono venuti.

Avvolgendolo

Gli skip link sono un perfetto esempio di una funzione di accessibilità che sembra richiedere molto lavoro, ma in realtà non lo è. Tutto quello che abbiamo fatto sul lato del codice è stato aggiungere un paio di righe di HTML e CSS. Per l'approccio non tecnico, abbiamo installato un plug-in. Nessuno dei due metodi richiede molto tempo, il che è importante notare poiché i link skip sono uno standard di livello A per WCAG 2.0 (gli standard WCAG più attuali). Sei obbligatoper legge ad averli sul tuo sito.Non metterti a rischio; aggiungi i tuoi collegamenti salta oggi!