Come utilizzare i collegamenti salta per rendere il tuo sito WordPress più accessibile

Nella nostra serie di introduzione all'accessibilità, abbiamo parlato delle basi 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 collegamenti di salto.

Che cos'è un collegamento salta?

Un collegamento salta è un collegamento speciale che è nascosto sul tuo sito finché non entra in :focus tramite il tasto Tab o un'utilità per la lettura dello schermo. 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". – Standard WCAG 2.4.1 – Blocchi di bypass

2.4.1 è uno standard di livello A. Ciò significa che è coperto dalla Sezione 508 e richiesto dalla legge. Devi avere i link per saltare.

Riesci a indovinare qual è il blocco più comune di link di salto di contenuto a cui si applicano? Se hai indovinato "il menu", avresti ragione. I menu vengono visualizzati su quasi tutte le pagine di un sito. Gli utenti vedenti e gli utenti del mouse tendono a scorrere 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 saltare i collegamenti.

Un'area comunemente trascurata per saltare i collegamenti 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 del punto in cui tendono a cadere in ordine semantico, gli utenti avranno bisogno di un modo per saltare oltre la barra laterale regolarmente ripetuta per accedere direttamente al contenuto.

Lo stesso vale per i blocchi di post in primo piano che vengono visualizzati al di fuori della home page. Alcuni design del sito portano sezioni di post in primo piano o cursori nelle pagine interne. A meno che il contenuto di tali sezioni non stia cambiando, ad esempio: categoria o pagine di archivio, dovrebbe essere presente un collegamento per saltare.

Introduzione all'accessibilità: Parte 1

Accessibilità è un termine che continui a sentire, ma potresti non comprendere appieno. Ciò è in parte dovuto al fatto che la parola stessa può creare un po' di confusione. La radice, accesso, fa sembrare il concetto legato a cose come...

Come si aggiungono i collegamenti di salto?

Ora che sai cos'è un collegamento salta, è 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

Ci sono due plugin che consiglio quando si tratta di saltare i collegamenti: WP Accessibility di Joe Dolson e Genesis Accessible di Rian Rietveld. Entrambi i plug-in risolvono diversi problemi di accessibilità, inclusa l'aggiunta di collegamenti per saltare di base per te. Tieni presente che Genesis Accessible è specifico per i siti creati utilizzando Genesis Framework. Se non hai un sito Genesis, usa WP Accessibility.

Codificalo tu stesso

L'altra opzione è codificare tu stesso i link per saltare. 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, presumo che tu sappia come trovare i file a cui si fa riferimento e come modificarli.

Inizieremo scrivendo prima i collegamenti di salto effettivi. Ciò consentirà di copiare e incollare facilmente 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 link di salto. Per questo esempio, utilizzeremo 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 di collegamento salta con il valore ID.

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

Ora che hai creato il tuo collegamento per saltare, torna al tuo file header.php o ovunque si trovi il tag <body> di apertura del tuo tema. Il tag <body> è un posizionamento essenziale per saltare i collegamenti 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 l'HTML completato. Di seguito viene mostrato un esempio più dettagliato con più collegamenti di esclusione. Se desideri 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 i link per saltare nel tuo codice, ma non hai ancora finito! Se carichi la tua pagina ora, vedrai i link per saltare in alto. È ora di aggiungere un po' di CSS. Lo stile dei collegamenti di salto è 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. Il nascondiglio viene fatto posizionando il testo fuori dallo schermo usando right: 100% e spostandolo a right: auto on :focus .

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

Avvolgendolo

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