Accentsconagua
Share
In un precedente articolo abbiamo parlato del perché l'accessibilità è importante, in termini di business, SEO, usabilità e persino la legge. In questo articolo spiegherò come creare temi WordPress accessibili, anche se le stesse idee si applicano a qualsiasi piattaforma.
Non c'è modo di coprire tutte le possibili migliori pratiche in questo articolo, ma le basi restano valide per ogni sito web. Userò un paio di risorse come la parte posteriore di questo articolo:
Tratteremo i seguenti suggerimenti:
Non posso sottolineare abbastanza l'importanza dell'HTML semantico: è la base del tuo sito web accessibile. Léonie Watson spiega perfettamente cosa significa semantica nella sua semantica di comprensione dell'articolo:
"La semantica HTML è quindi importante in due modi: otteniamo una comprensione coerente della struttura del contenuto e del comportamento nativo e otteniamo una comprensione comune del significato e dello scopo del contenuto. La cosa migliore di tutte è che otteniamo queste cose gratuitamente ogni volta che utilizziamo l'HTML come previsto. "
Quando scriviamo elementi HTML non dovremmo solo pensare a come sono progettati, o come appaiono. Dovremmo anche pensare a come funzionano ...
Un esempio molto comune è l'uso di Uso Nota: dietro le quinte l'API di accessibilità fornisce informazioni alle tecnologie assistive relative al nome, al ruolo e allo stato di ciascun elemento. Ecco un link di esempio, Creazione di un Web inclusivo: perché l'accessibilità è importante, con il modo in cui un visualizzatore dell'accessibilità lo vede: In pratica ciò significa che i lettori di schermo e altri AT riconoscono l'ancora e possono annunciare il ruolo e il nome dell'elemento. Per esempio: "Link, costruzione di un Web inclusivo: perché l'accessibilità è importante". Possono inoltre navigare nella pagina utilizzando solo i collegamenti: Uso Per riassumere, il Mancia: In Chrome 64 c'è un Accessibilità riquadro che mostra la posizione di un elemento selezionato nell'albero di accessibilità, nonché i relativi attributi ARIA e proprietà calcolate. Uso Maggiori informazioni su Link, Buttons, Submits e Divs di Adrian Roselli. Nella prossima sezione daremo un'occhiata agli elementi di sezione HTML5 e a quale markup semantico appare. Molti elementi HTML5 definiscono i ruoli dei punti di riferimento ARIA per impostazione predefinita. Questi identificano le sezioni di una pagina e aiutano gli utenti AT a navigare in ciascuna di esse. Per questo motivo tutto il contenuto dovrebbe essere all'interno di elementi semanticamente significativi in modo che non venga ignorato dall'utente. Questi sono gli elementi di riferimento più comuni: Nota: le versioni precedenti di browser e AT non riconoscono necessariamente gli elementi HTML5 e li associano ai ruoli di riferimento corretti. In questi casi è possibile aggiungere ruoli manualmente in questo modo: Per ulteriori informazioni, consultare il markup di esempio sulla pagina del manuale di WordPress sui punti di riferimento ARIA e la pagina degli esempi di riferimento ARIA. Hai letto un articolo davvero lungo senza intestazioni? Hai trovato difficile da leggere? Ho certamente. I titoli aiutano gli utenti a scansionare e comprendere rapidamente il contenuto della pagina. Allo stesso tempo, i titoli danno agli utenti AT un modo per navigare nel contenuto e definire la struttura della pagina. Gli approcci variano, ma la mia raccomandazione è la stessa di quella delineata nella struttura dei titoli nello sviluppo del tema: Nota: gli utenti possono rompere la gerarchia delle intestazioni quando inseriscono il proprio contenuto utilizzando H1 o saltando i livelli di intestazione. Informali indicandoli alla nostra documentazione su come utilizzare i titoli nel contenuto. Io uso questi strumenti per verificare la struttura dei titoli: Finora abbiamo menzionato diversi modi per navigare nella pagina: utilizzando link, titoli o punti di riferimento. E lo stesso vale per altri elementi HTML semantici come liste, tabelle o immagini. Gli utenti di tecnologie assistive possono anche navigare usando questi elementi. Ecco un breve video che dimostra l'uso dello screen reader Voiceover, qualcosa che dovresti assolutamente testare il tuo tema con: Leggi ulteriori informazioni sull'uso di Voiceover o leggi questo articolo simile usando NVDA. Regola numero uno: non rimuovere gli stili di contorno usando Ci sono molti utenti che dipendono dalla tastiera e non possono usare un mouse. Per gli utenti di tastiera è fondamentale disporre di stili di messa a fuoco visiva su tutti gli elementi interattivi: collegamenti, campi modulo, pulsanti e così via. In altre parole, gli utenti devono essere in grado di vedere quale elemento interattivo ha il focus della tastiera corrente durante la navigazione nella pagina. I comandi di tastiera più comuni per la navigazione sono linguetta, MAIUSC + TAB, accedere, Spazio, e tasti freccia. Nota: gli stili di messa a fuoco predefiniti del browser non sono sempre la soluzione più accessibile: gli stili di contorno personalizzati sono talvolta migliori. Nota anche: A volte gli stili di contorno non sono l'approccio di progettazione migliore perché il contorno non rispetta il raggio di un elemento. Una soluzione è da usare Ecco un bel trucco che utilizza una struttura trasparente per la modalità Contrasto elevato di Windows. Puoi leggere maggiori informazioni al riguardo dal Gutenberg PR 5138 e dal biglietto Trac 41286. D'altra parte, la navigazione da tastiera non riguarda solo gli stili di messa a fuoco. Tutti Azioni deve essere possibile anche con la tastiera. Un esempio comune è quando un utente non può navigare alle voci del sottomenu usando il tasto tab o usando i tasti freccia. Spiega che i temi degli starter hanno una soluzione JavaScript per questo: ogni volta che un collegamento al menu è focalizzato o sfocato, impostano o rimuovono il Un altro esempio è quando la navigazione agisce in modo simile a una finestra di dialogo modale, come una navigazione a schermo intero. In questi casi è importante impostare correttamente la messa a fuoco. Vedo ancora molti disegni con un basso contrasto di colori. Ciò può rendere impossibile per gli utenti daltonici, gli utenti con problemi di vista o gli utenti che utilizzano monitor di bassa qualità per leggere il contenuto. Il contrasto tra i colori di sfondo e in primo piano dovrebbe avere un rapporto di contrasto di Ci sono molti strumenti per controllare il contrasto del colore, come il controllo del rapporto di contrasto. Troverai più informazioni in articoli come questo sull'uso dei colori e il contrasto del colore come requisito per i temi pronti all'accessibilità. Un collegamento "salta al contenuto" consente di superare tutti gli elementi extra prima del contenuto principale e dirigersi direttamente verso il contenuto. Potresti chiederti perché il punto di riferimento In ogni caso, gli utenti di AT utilizzano ancora i collegamenti di salto in base a questo sondaggio di screen reader: Maggiori informazioni su come usare i collegamenti salta nel manuale. Cerca di evitare testi di link ripetitivi come "Leggi altro" o "Ulteriori informazioni". Per gli utenti di screen reader che navigano usando i link il risultato può essere simile a questo: Il tema Twenty Seventeen ha buoni esempi di come aggiungere il titolo del post nell'estratto: % 2 $ s Per gli screen reader, il testo del link verrà quindi visualizzato come "Continua a leggere il titolo del post". Ecco un esempio simile per il contenuto: Classe Abbiamo solo toccato la superficie dell'accessibilità nei temi di WordPress, ma speriamo che questo possa iniziare. L'HTML semantico e l'uso saggio dei CSS fanno molta strada. Ricordati di controllare tutte le linee guida sull'accessibilità per i temi e leggi altri suggerimenti nel manuale sull'accessibilità., , e . Li useremo per illustrare il mio punto.Quando usare
(un tag di ancoraggio) quando si crea un collegamento ad un'altra pagina, file, email o un'ancora sulla stessa pagina.
Mozilla Torna in cima.Menu. Questo dovrebbe essere .
Accessibility Viewer visualizza nome del collegamento, ruolo, stato e altre informazioni
Elenco dei collegamenti alle pagine in VoiceoverQuando usare
quando devi attivare un'azione, ad esempio aprire un menu. Questo video di Rob Dodson spiega perché questa situazione richiede invece di . elemento ha già tutti i seguenti vantaggi:
pulsante, che aiutano gli utenti AT a capire che è un elemento interattivo.Disabilitato attributo, per quando il pulsante non deve essere più interattivo.
Pannello di accessibilità in Chrome con informazioni sugli elementi del pulsanteQuando usare
quando hai bisogno di un elemento per lo styling. Naturalmente, prima controlla se ci sono elementi HTML nativi che sarebbero migliori. Per esempio , , , , , o
2. Struttura con elementi di sezione HTML5
Elemento HTML5 Ruolo limite predefinito bandiera navigazione principale complementare ContentInfo 3. Rendi chiara la gerarchia delle intestazioni
4. Navigare nella pagina utilizzando la tecnologia assistiva
Accessibilità: qual è il tuo markup che ti dice?
Oggi guarderemo all'accessibilità e alla semantica. Iniziamo con una domanda: hai mai usato uno screen reader? Se la risposta è no, dovresti provare ... 5. Considera la navigazione tramite tastiera e gli stili di messa a fuoco
: focus contorno: nessuno; !box-ombra invece, ma ... gli stili di messa a fuoco dovrebbero funzionare in tutti gli scenari, come in modalità Contrasto elevato di Windows che rimuove gli stili box-shadow.: focus box-shadow: inset 0 0 0 1px # 6c7781; / * Visibile solo in modalità Contrasto elevato di Windows * / struttura: 2 pixel trasparente solido;
.messa a fuoco classe sul link del menu. Vedi la funzione toggleFocus.
Creazione di temi WordPress con caratteri di sottolineatura
Sottolinea il tema di partenza, dai creatori di WordPress stessi, è progettato per darvi un "1000 ore di vantaggio" sulla creazione del tema WordPress. Questo corso… 6. Controllare il contrasto del colore
Nozioni di base sull'accessibilità: progettazione per danni visivi
Con il 4,5% della popolazione mondiale che soffre di daltonismo, il 4% soffre di ipovisione, e un altro 0,6% è cieco, difficoltà visive con l'utilizzo ... 7. Ricorda Skip Links
non è abbastanza visto che gli utenti AT possono navigare verso il contenuto principale usando i punti di riferimento? In effetti, il gruppo target principale del collegamento skip è costituito dagli utenti di tastiera, che probabilmente non utilizzano alcun dispositivo AT. Quindi non hanno scorciatoie per o altre regioni di riferimento."È importante notare che mentre l'utilizzo è diminuito tra gli utenti di screen reader, i collegamenti" salta "continuano a fornire notevoli vantaggi agli altri utenti di tastiera."
8. Evita il testo di link ripetitivo
L'elenco di altri collegamenti letti non aiuta la navigazione/ ** * Sostituisce "[...]" (aggiunto agli estratti generati automaticamente) con ... e * un collegamento "Continua a leggere". * * @since Twenty Seventeen 1.0 * * @param stringa $ link Collegamento a singolo post / pagina. * @return string 'Continua a leggere' link preceduto da un puntino di sospensione. * / function twentyseventeen_excerpt_more ($ link) if (is_admin ()) return $ link; $ link = sprintf ('/ * traduttori:% s: nome del post corrente * / the_content (sprintf (__ ('Continua a leggere "%S"',' twentyseventeen '), get_the_title ())); screen-reader-text nasconde visivamente il titolo del post ma gli utenti di screen reader possono comunque accedere al testo. Controlla l'ultimo esempio di codice del testo dello screen reader nel manuale.Conclusione
