Share
In linea di massima, questo è il principio che il tuo sito web deve essere in grado di essere tranquillamente navigato per tutti gli utenti. Questo include la linea guida che l'intero sito web dovrebbe essere accessibile usando la tastiera da solo. Inoltre, il modo in cui il tuo sito web risponde all'input dell'utente (tramite tastiera o altro) dovrebbe essere prevedibile, chiaro e sicuro.
Quest'ultimo punto si riferisce principalmente a garantire che qualsiasi caratteristica potenzialmente inducente al sequestro del tuo sito sia disabilitata per impostazione predefinita e gli utenti avvisati prima di abilitarlo. Questo principio fornisce anche indicazioni su come fornire "tempo sufficiente" agli utenti per completare le attività, ma non lo copriamo qui.
Essere in grado di navigare e utilizzare il tuo sito con solo una tastiera è uno degli aspetti più importanti dell'accessibilità. Gli utenti non vedenti si affidano quasi esclusivamente alle tastiere e quelli con disabilità motorie possono avere difficoltà a controllare un mouse e quindi si affidano anche all'accesso da tastiera. Alcuni individui possono avere poco o nessun uso delle loro mani, e si basano su tastiere più grandi, bocchini, bacchette per la testa, interruttore singolo o Sip 'n' Puff.
È possibile trovare le descrizioni di questi dispositivi sul sito Web WebAIM, ma sostanzialmente incanalano l'input dell'utente nei tratti della tastiera. Se il tuo sito web non è accessibile dalle tastiere, tutti gli utenti che fanno affidamento su questi dispositivi non saranno in grado di utilizzare il tuo sito.
Fortunatamente, rendere accessibile la tastiera del tema o del plugin è relativamente semplice. Ecco alcuni punti chiave:
Un sacco di temi si basano sul passaggio del mouse su una voce di menu per rivelare eventuali sottomenu. Questo va bene, ma generalmente il sottomenu lo farà non appare se l'elemento del menu principale ha lo stato attivo (anziché il passaggio del mouse). Se duplichi delle regole pertinenti per : hover e applicarli a :messa a fuoco inoltre, questo ti porterà a metà strada: le voci del sottomenu appariranno come le schede utente attraverso il menu. Tuttavia, una volta che l'utente accede al sottomenu, il menu principale perde lo stato attivo e il sottomenu scompare. Questo può essere corretto usando JavaScript. Dettagli su questo e su come fornire un fallback non JavaScript saranno trattati nel prossimo articolo di questa serie.
Non è necessario fare nulla per rendere accessibile la tastiera di input "nativo" (selezione, input, radio, ecc.). Tuttavia, se qualsiasi aspetto della pagina (compresi i campi modulo) si concentra, lo fa dovere è possibile allontanarsene usando solo una tastiera, altrimenti l'utente è effettivamente intrappolato. Normalmente si tratta di un comportamento predefinito, quindi è sufficiente evitare di sovrascriverlo.
Questa linea guida ha due tipi di raccomandazioni: trovare dove si trova attualmente l'utente è ovvio, e fare arrivare dove vogliono andare più facile.
In parte, seguire i consigli in questo senso implica già un sacco di temi: avere un menu di navigazione coerente tra le pagine, evidenziare la pagina corrente e consentire agli utenti di determinare rapidamente dove si trovano sul sito (ad esempio con i breadcrumb).
Una parte fondamentale dell'essere in grado di utilizzare una tastiera per spostarsi all'interno di una pagina Web è essere in grado di vedere con precisione ciò che è attualmente focalizzato. L'elemento che attualmente è focalizzato dovrebbe essere visibilmente diverso e distinguibile dal resto della pagina. Per questo motivo devi evitare delineare: none; a meno che tu non abbia intenzione di fornire uno stile alternativo:
a: focus outline: none; sfondo: # ee7b00; colore: #fff;
Un'altra parte importante dell'accessibilità della tastiera è che il tabbing si comporta in modo prevedibile e in modo naturale. Ad esempio, se lo stato attivo è attualmente un campo modulo, mi aspetto che la prossima scheda mi porti al campo successivo in quella forma. Se la tabulazione fa sì che lo stato attivo salti su e giù per la pagina in modo irregolare, allora questo frustrerà e disorienterà l'utente.
Evita di usare tabindex: L'attributo tabindex consente di modificare l'ordine in base al quale gli elementi vengono raggiunti tramite tabulazione. Tuttavia, se hai seguito il consiglio nell'articolo 2 di questa serie riguardante la struttura DOM, l'ordine di tabulazione dovrebbe riflettere l'ordine "naturale" della pagina. Mentre tabindex ha i suoi usi, questi sono rari, e il suo uso per "scartare" una struttura povera del sito può creare ulteriori problemi. Il metodo migliore è evitare l'uso di tabindex, e invece il tuo tema produrre una struttura DOM logica, con CSS usato per alterare la presentazione visiva.
Gli utenti di screen reader spesso salteranno tra i collegamenti, saltando il testo, e ad ogni collegamento lo screen reader leggerà "link [link text]". In quanto tale, è incredibilmente inutile per tali utenti se sentono ripetutamente "link read more", "link click here" o "link continue reading". L'aggiunta di contesto al collegamento in questo caso implica semplicemente la fornitura del titolo del post. Quindi, anziché "Continua a leggere", abbiamo "Continua a leggere [post title]".
Per fare questo in un tema WordPress, abbiamo semplicemente bisogno di aggancio al excerpt_more filtra e aggiungi il nostro link "continua a leggere":
// Aggiunge la funzione di collegamento "continua a leggere X" mytheme_continue_reading_link () return ''. sprintf (__ ('Continua a leggere% s', 'mytheme'), esc_url (get_permalink ()), esc_html (get_the_title ())). '
'; // Sostituisce "[...]" (aggiunto agli estratti generati automaticamente) con un'ellissi e mytheme_continue_reading_link (). function mytheme_auto_excerpt_more ($ more) return ' …'. mytheme_continue_reading_link (); add_filter ('excerpt_more', 'mytheme_auto_excerpt_more');
Ciò fornisce il contesto corretto "leggi di più". Tuttavia, ci sono un paio di miglioramenti che possono essere fatti.
In primo luogo, l'aggiunta del titolo dell'articolo rovinerà tipicamente l'estetica del tema e, per gli utenti vedenti, sarà ridondante, poiché la posizione del collegamento "leggi di più" in relazione al titolo dell'articolo e al brano renderà il contesto ovvio. Per aggirare questi problemi, possiamo "nascondere" il titolo dell'articolo, ma in un modo che i lettori dello schermo continueranno a leggerli.
Questo significa che noi non posso usaredisplay: none o visibility: hidden; come lettori di schermo capiscono queste proprietà e ignoreranno il contenuto. Invece possiamo posizionare il testo fuori dallo schermo o usare il clip proprietà:
.screen-reader position: absolute! important; larghezza: 1px; altezza: 1px; padding: 0; margine: -1px; overflow: nascosto; clip: retto (0,0,0,0); confine: 0;
Esistono molti esempi di "classi di screen reader"; questo particolare è preso da Bootstrap 3. Successivamente, aggiungi la classe appropriata al titolo dell'articolo, in particolare sostituendo la riga 5 sopra con:
Accentsconagua
__( 'Continua a leggere %S',' mytheme '), In secondo luogo, mentre questo fornirebbe agli utenti un'indicazione su dove puntasse quel link, avrebbero comunque dovuto ascoltare "link continue reading ..." prima di raggiungere il titolo del post. Idealmente dovresti mettere le informazioni ridondanti alla fine del testo del link, o ometterle completamente dal tag anchor, per ridurre il tempo necessario per identificare un link.
Un altro vantaggio per gli utenti di screen reader di non precedere il testo collegato con informazioni ridondanti è che gli screen reader generano spesso un elenco di collegamenti su una pagina. Se molti dei tuoi collegamenti iniziano con lo stesso testo, questo può rendere più difficile trovare il link desiderato, in particolare se il link per la tua pagina di contatto è sotto "H" perché legge "Come contattarci".
</code> Tag correttamente</h3><p>Il <code><title></code> tag dovrebbe essere usato per identificare la posizione corrente dell'utente. Viene letto dagli screen reader e viene visualizzato nei risultati di ricerca, nella finestra dello schermo e nella scheda del browser. Per facilitare agli utenti l'identificazione di dove si trovano (o di ciò che la ricerca ha trovato), questo tag title deve contenere il titolo della pagina e il nome del sito web. Idealmente il nome del sito web dovrebbe venire per ultimo, in modo che le persone che usano gli screen reader non debbano ascoltare il nome del sito su ogni pagina caricata prima di sentire il titolo della pagina.</p><p>Il tag del titolo può essere aggiunto a un tema con:</p><pre><title><?php wp_title(); ?> Per aggiungere il titolo del sito:
/ ** * Aggiungi titolo del sito al titolo della pagina * / function mytheme_wp_title ($ title, $ sep, $ seplocation) return $ title. '| '. get_bloginfo ( 'name'); add_filter ('wp_title', 'mytheme_wp_title', 10, 3);Salta al contenuto
In genere i siti web avranno un'intestazione e un menu di navigazione comuni che, ad eccezione dell'evidenziazione della posizione corrente dell'utente, rimarranno esattamente gli stessi. Dovendo sfogliare tutti questi link, o ascoltare uno screen reader, ripeterli su ogni pagina caricata, è noioso e frustrante. Quelli con una buona capacità visiva e motoria possono saltare immediatamente al contenuto e noi possiamo renderlo altrettanto facile per quelli che non lo fanno.
Se sei nel tuo amministratore di WordPress e premi linguetta dopo il caricamento della pagina, noterai un link che dice Salta al contenuto principale viene visualizzato in alto a sinistra (Se si preme di nuovo la scheda, a Vai alla barra degli strumenti apparirà il link). Questo link si trova nella parte superiore della pagina, in modo che sia il primo link che riceve lo stato attivo durante la tabulazione e il primo collegamento del sito Web letto da uno screen reader. Seguendo questo link salta l'utente direttamente al contenuto principale, saltando fuori tutti i link non necessari ei loghi del sito in mezzo.
Creare un salto ai contenuti è un ottimo modo per rendere il tuo sito più semplice da navigare ed è incredibilmente facile, richiedendo solo un po 'di HTML e alcuni CSS.
Prima l'HTML. Il link dovrebbe andare nella parte superiore della tua pagina, immediatamente sotto header.php file:
// Resto del contenuto della pagina
Le uniche cose da notare qui sono:
- Il valore href, in questo caso 'main'. Questo deve corrispondere all'ID dell'elemento che contiene il contenuto della pagina.
- La classe del link, che useremo per lo styling.
Per quanto riguarda (1), il tuo loop avrà quindi un aspetto simile a:
//Il cappio // Nessun post trovato ... visualizza ricerca
e i tuoi modelli di pagina potrebbero avere un aspetto simile:
>
Ora non resta che aggiungere uno stile al collegamento.
Innanzitutto, vogliamo che il collegamento sia nascosto ma non nascosto agli screen-reader, quindi posizioneremo il collegamento fuori dallo schermo piuttosto che usando display: none (nel qual caso lo screen-reader lo ignora).
In secondo luogo, quando si concentra, vogliamo rendere evidente il collegamento, quindi è chiaro che un link precedentemente nascosto è ora visibile e focalizzato.
.skip-link position: absolute; a sinistra: 6px; top: -100px; / * posiziona offscreen in modo che non sia visibile, ma può ricevere focus * / z-index: 100000; / * Posizione sopra la barra degli strumenti di WordPress * / dimensione carattere: 1em; font-weight: bold; blocco di visualizzazione; sfondo: # ee7b00; colore bianco; / * Stile il collegamento in modo che sia chiaro * / altezza: auto; larghezza: auto; altezza della linea: normale; imbottitura: 15px 25px; decorazione del testo: nessuna; -webkit-transition: top 1s easy-out; transizione: la prima uscita di livello superiore; .skip-link: focus top: 5px; / * Sposta sullo schermo * / -webkit-transizione: destra 0s; transizione: destra 0s; / * Animare, per renderlo evidente * /
Rendi sicura la navigazione del tuo sito (2.3)
Infine, tieni presente che alcune persone sono suscettibili alle crisi epilettiche fotosensibili. Questo può essere causato da sfarfallio o effetti lampeggianti. Lo scorso dicembre Jeff Chandler ha rimosso un effetto "neve" da WP Tavern dopo che un visitatore lo aveva avvertito che poteva scatenare un attacco.
Questo non è limitato alle convulsioni: può provocare emicranie o attacchi di panico in alcuni individui. Né si limita agli effetti neve: anche un video, un carosello o un file audio in riproduzione automatica possono attivarli.
Anche se questa è in gran parte una decisione di un editor e come sviluppatori non è il nostro lavoro impedire auto-play, possiamo almeno scoraggiarlo disabilitandolo di default. Jeff afferma nel suo articolo che non riusciva a trovare un plug-in che fornisse l'effetto "neve" che i visitatori stessi potevano riprodurre.
