Oggi guarderemo all'accessibilità e alla semantica. Iniziamo con una domanda: hai mai usato uno screen reader? Se la risposta è no, dovresti provare - potrebbe cambiare il modo in cui ti avvicini al tuo markup HTML per sempre!
Durante questo articolo esamineremo la struttura di una pagina web, il modo in cui gli screen reader interpretano tale struttura e i miglioramenti che possiamo apportare al nostro markup per migliorare l'accessibilità.
Una breve parola sulla demo
Ho raccolto una pagina Web di esempio per dimostrare come il markup specifico viene elaborato dagli screen reader. Volevo anche dimostrare il markup HTML5 semantico al suo livello più elementare, cosa che spero che tu possa trovare utile. Infine, so quanto ti piacciono i download di file sorgente per venire con un tutorial, quindi divertiti a farlo a pezzi!
La demo
La demo è una pagina di una colonna semplice e flessibile. Non è reattivo, ma è ben impostato per essere fatto, quindi dovresti: usa le unità orizzontali relative (%) e le relative unità (em) per i caratteri. Le immagini sono flessibili e si modificano in base alle dimensioni del contenitore principale. Utilizza anche un paio di fantastici font Google. Leggero e pulito.
Il modello degli standard Web
Se sei un visitatore abituale del sito, avrai sentito ripetutamente che durante la creazione di un sito web è importante separare le preoccupazioni. Questo è tutto parte di ciò che riconosciamo come il modello di standard web; composto da struttura, presentazione e comportamento.
Struttura costruiamo sotto forma del nostro markup HTML, presentazione è il nostro stile (il modo in cui il contenuto appare in un determinato agente utente) che affrontiamo con i CSS e il comportamento di una pagina web, interattività front-end, che di solito otteniamo con javascript.
Mantenere separati questi tre aspetti del web design è vantaggioso per noi in termini pratici: è molto più facile mantenere contenuti divisi in questo modo e non tutti mescolati insieme.
Separare le preoccupazioni è anche vantaggioso in termini di comprensione. Noi, esseri umani, di solito elaboriamo una pagina web grazie a come viene fornita tramite un browser. Ma ci sono altri modi in cui si accede a una pagina web, non ultimo dei quali sono i robot dei motori di ricerca, che eseguono la scansione della struttura non elaborata delle pagine al fine di classificare e classificare accuratamente il contenuto.
Quindi, abbiamo Assistive Technologies (AT) come screen reader. I lettori di schermo interpretano le interfacce dei computer e dicono ciò che vedono, aiutando i non vedenti a usarli. Le pagine Web sono uno di questi esempi di interfacce e gli screen reader leggono il contenuto come viene loro presentato nel markup. Il markup confuso e disordinato comporta logicamente problemi di accessibilità, anche se il sito Web reso può apparire impeccabile nel browser.
Nota: È importante tenere a mente che, mentre questo tut si concentra su ipovedenti, l'ottimizzazione accessibilità vantaggi per gli utenti limitati anche in altri modi (motori, uditivi, cognitivi ecc.)
Semantica
Anche se non hai capito cosa si intende per Semantica probabilmente avrai sentito il termine gettato molto spesso. La semantica nel web design si riferisce al senso dato al markup HTML. Il passaggio dai layout basati su tabelle ha visto enormi miglioramenti nel valore semantico del markup HTML (X), le celle delle tabelle hanno ceduto il passo
tag (divisioni), liste non ordinate (
) è diventato un luogo comune e abbiamo iniziato a utilizzare cose come (enfasi) invece di (corsivo) per allontanare ulteriormente il nostro markup dal codice di presentazione.
Attualmente, la comunità del web design si sta occupando del markup HTML5 e, grazie a una vasta gamma di nuovi elementi, possiamo descrivere il nostro markup in modo più dettagliato che mai. La navigazione principale di solito assume la forma di una lista non ordinata, ma ora può essere nidificata all'interno tag, che descrivono perfettamente ciò che sta facendo lì.
Per assistenza con l'HTML5 semantico corretto, controlla cosa stanno facendo i ragazzi su HTML5Doctor.com.
Hai mai usato un lettore di schermo?
È sorprendente come pochi web designer abbiano effettivamente utilizzato gli screen reader. Testare il tuo lavoro dal punto di vista di una persona ipovedente può essere gratificante e frustrante, ma ti consiglio di provarlo almeno una volta. Gli strumenti di screen reader possono essere abbastanza difficili da comprendere, quindi assicurati di riconoscere la differenza tra scarsa accessibilità e semplice incapacità di utilizzare il software?
Gli screen reader usano la navigazione alternativa (tramite la tastiera) per evidenziare, elaborare e interagire con vari elementi sullo schermo. Saltare tra i controlli del browser e i controlli all'interno di una pagina Web può essere difficile da cominciare! Tuttavia, una volta che hai imparato a usare gli strumenti, l'accessibilità (in) del tuo markup diventerà chiara.
Ci sono molti esempi comunemente usati, qui ce ne sono solo un paio per riferimento:
JAWS
NVDA
Window-Eyes
SAToGo
Voce fuoricampo
Nota: È interessante notare che, secondo la ricerca demografica eseguita da webaim.org, la maggior parte degli utenti di screen reader citano Internet Explorer come il browser che comunemente usano durante la lettura di pagine web. L'interpretazione di Microsoft della specifica CSS non sta andando nel modo in cui credo?
Esempio di revisione
Ricevo spesso richieste di tutorial per le build di pagine web che, sebbene abbiano un bell'aspetto nel browser, e facciano uso del doctype corretto, spesso lo lasciano lì per HTML5. È un vero peccato, perché non ci vuole molto sforzo per mettere a punto alcuni markup semantici HTML5.
Iniziamo con un documento di esempio. Per cominciare, liberati di qualsiasi doctype simile a questo:
Per HTML5 valido non abbiamo bisogno di nulla di più complesso di questo:
Esaminiamo ora il resto della nostra pagina Web di base:
Qual è il tuo markup che ti dice?
Qual è il tuo markup che ti dice?
Casa
Più formaggio
Altri babbuini
Diritto d'autore ? Ian Yates 2011
Questo è abbastanza tipico di come avremmo strutturato una pagina prima che gli elementi HTML5 si dirigessero verso di noi. Va perfettamente bene e può essere disegnato senza problemi reali.
Noi abbiamo un in casa principale div, che si trova annidato all'interno di a involucro div. Entro in casa principale troviamo un paio di div di articoli e complicheremo ulteriormente le cose in un secondo bloccando qualche altro tuffo lì dentro? guarda questo?
Qual è il tuo markup che ti dice?
Qual è il tuo markup che ti dice?
Casa
Più formaggio
Altri babbuini
Storia del formaggio del Wisconsin
"Formaggi" per gentile concessione di Graeme Maclean su Flickr
La storia dell'industria casearia del Wisconsin ha radici nella preistoria. La natura ha posto le basi per la Dairyland americana durante l'ultima era glaciale, quando i ghiacciai hanno attraversato quello che ora è il Wisconsin. Mentre si ritiravano, il massiccio montagne di ghiaccio lasciate dietro una campagna di dolci colline e rigogliosi pascoli.
Milioni di anni dopo, quando gli immigrati europei migrarono verso ovest, trovarono il cuore della nazione, che ricordava molte delle loro terre. Le condizioni climatiche si adattavano bene all'agricoltura e, inizialmente, gli agricoltori coltivavano grano, luppolo e altri cereali. L'agricoltura lattiero-casearia si è svolta in modo naturale e gli allevatori hanno presto prodotto un'abbondante quantità di latte di alta qualità. Per preservare il latte in eccesso, gli agricoltori producevano formaggio. Il passaggio dalla produzione di formaggio per uso familiare alla produzione di formaggi da vendere è stato un breve passo. Tuttavia, la produzione commerciale di formaggio nel Wisconsin iniziò su piccola scala.
Tratto da www.eatwisconsincheese.com
Sistemi sociali all'interno di una truppa di babbuini
"Babbuie glutei" per gentile concessione di Prakhar Amba su Flickr
La maggior parte dei babbuini vive in truppe gerarchiche. Le dimensioni dei gruppi variano da 5 a 250 animali (spesso circa 50 circa), a seconda delle circostanze specifiche, in particolare delle specie e del periodo dell'anno. La struttura all'interno della truppa varia considerevolmente tra i babbuini di hamadryas e le specie rimanenti, a volte indicate collettivamente come babbuini della savana.
Il babbuino hamadryas appare spesso in gruppi molto grandi composti da molti harem più piccoli (un maschio con quattro o quattro femmine), a cui vengono reclutate femmine provenienti da altre parti della truppa mentre sono ancora troppo giovani per riprodursi. Altre specie di babbuini hanno una struttura più promiscua con una rigida gerarchia di dominanza basata sulla matrilina. Il gruppo di babbuini hamadryas in genere include un maschio più giovane, ma non tenterà di accoppiarsi con le femmine a meno che il maschio più anziano non sia rimosso.
Tratto da wikipedia.com
Diritto d'autore ? Ian Yates 2011
Vedi? A ogni div dell'articolo abbiamo aggiunto un'immagine, annidata in un div in modo da associarla alla sua didascalia, in più un altro div che funge da footer in basso.
Ora aggiungiamo un po ' presentazione; alcuni stili CSS. In primo luogo, alcuni stili di reset, presi nella loro interezza da Eric Meyer:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licenza: nessuna (dominio pubblico) * / html, corpo, div, span, applet, oggetto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, dfn, em, img, ins, kbd, q, s, samp, piccolo, strike, forte, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, forma, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td, articolo, a parte, canvas, dettagli, embed, figura, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video margin: 0; padding: 0; confine: 0; dimensione carattere: 100%; font: inherit; vertical-align: baseline; / * HTML5 display-role reset per i browser più vecchi * / article, a parte, dettagli, figcaption, figure, footer, header, hgroup, menu, nav, section display: block; body line-height: 1; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0;
Quindi aggiungeremo i nostri stili. Noterai un paio di caratteri alieni, estratti dall'API di Google Fonts e applicati utilizzando @ Font-face. Il resto è auto-esplicativo, e il risultato dimostra poco in termini di complicazioni.
In meno di 200 linee (non condensate) di CSS, abbiamo stilizzato bene la nostra pagina. Niente titoli e voci di menu centrati sulla fantasia, una bella dimensione del carattere (100% del valore predefinito del browser, in genere 16px) e immagini i cui contenitori galleggiano a destra. Il più complicato degli stili è senza dubbio le ombre a doppio riquadro sulle voci di menu e sui contenitori di immagini. In ogni caso, lo stile non rientra nello scopo di questo tut, ma sentiti libero di sceglierlo come vuoi.
Migliore accessibilità
Ci sono diverse aree in cui potremmo migliorare l'accessibilità nel nostro markup. Per cominciare, il i tag mancano il alt attributo. Navigare sul sito in circostanze normali sarebbe stato un gioco da ragazzi per quel problema, ma chiunque avesse le immagini disattivate sarebbe ignaro che fosse mai stata un'immagine. I lettori di schermo dichiareranno, al massimo, che è presente un'immagine, ma non possono dirlo all'utente più di questo.
Usa il testo alternativo come un'opportunità per descrivere l'immagine. Ciò avvantaggerà gli utenti, i motori di ricerca e, quindi, anche voi.
Il documento è anche gravemente privo di significato semantico, gli utenti che navigano nella tua pagina con uno screen reader non possono determinare alcun valore gerarchico all'interno del testo. Un div con una classe di footer non dice assolutamente nulla sui contenuti a nessuno (tranne te), semplicemente permette al tuo file CSS di bersagliarlo.
In termini di manutenzione, è anche difficile distinguere tutti i nidificati
elementi presenti; l'enorme numero di loro richiede inoltre la necessità di commentare i vostri elementi di chiusura. Cercare di mantenere l'ordine in sezioni di markup come questo è complicato!
Scambiamo quindi alcuni dei tag div superflui per ulteriori elementi semantici:
addio?
Qual è il tuo markup che ti dice?
Casa
Più formaggio
Altri babbuini
? Ciao
Qual è il tuo markup che ti dice?
addio?
Storia del formaggio del Wisconsin
"Formaggi" per gentile concessione di Graeme Maclean su Flickr
La storia di Wisconsin? pascolo lussureggiante.
Milioni di anni dopo? una piccola scala.
Tratto da www.eatwisconsincheese.com
? Ciao
Storia del formaggio del Wisconsin
"Formaggi" per gentile concessione di Graeme Maclean su Flickr
La storia di Wisconsin? pascolo lussureggiante.
Milioni di anni dopo? una piccola scala.
Ecco il codice HTML completo, ripulito da una gloriosa semantica:
Qual è il tuo markup che ti dice?
Qual è il tuo markup che ti dice?
Storia del formaggio del Wisconsin
"Formaggi" per gentile concessione di Graeme Maclean su Flickr
La storia dell'industria casearia del Wisconsin ha radici nella preistoria. La natura ha posto le basi per la Dairyland americana durante l'ultima era glaciale, quando i ghiacciai hanno attraversato quello che ora è il Wisconsin. Mentre si ritiravano, il massiccio montagne di ghiaccio lasciate dietro una campagna di dolci colline e rigogliosi pascoli.
Milioni di anni dopo, quando gli immigrati europei migrarono verso ovest, trovarono il cuore della nazione, che ricordava molte delle loro terre. Le condizioni climatiche si adattavano bene all'agricoltura e, inizialmente, gli agricoltori coltivavano grano, luppolo e altri cereali. L'agricoltura lattiero-casearia si è svolta in modo naturale e gli allevatori hanno presto prodotto un'abbondante quantità di latte di alta qualità. Per preservare il latte in eccesso, gli agricoltori producevano formaggio. Il passaggio dalla produzione di formaggio per uso familiare alla produzione di formaggi da vendere è stato un breve passo. Tuttavia, la produzione commerciale di formaggio nel Wisconsin iniziò su piccola scala.
Sistemi sociali all'interno di una truppa di babbuini
"Babbuie glutei" per gentile concessione di Prakhar Amba su Flickr
La maggior parte dei babbuini vive in truppe gerarchiche. Le dimensioni dei gruppi variano da 5 a 250 animali (spesso circa 50 circa), a seconda delle circostanze specifiche, in particolare delle specie e del periodo dell'anno. La struttura all'interno della truppa varia considerevolmente tra i babbuini di hamadryas e le specie rimanenti, a volte indicate collettivamente come babbuini della savana.
Il babbuino hamadryas appare spesso in gruppi molto grandi composti da molti harem più piccoli (un maschio con quattro o quattro femmine), a cui vengono reclutate femmine provenienti da altre parti della truppa mentre sono ancora troppo giovani per riprodursi. Altre specie di babbuini hanno una struttura più promiscua con una rigida gerarchia di dominanza basata sulla matrilina. Il gruppo di babbuini hamadryas in genere include un maschio più giovane, ma non tenterà di accoppiarsi con le femmine a meno che il maschio più anziano non sia rimosso.
Quindi quali sono i miglioramenti che abbiamo apportato? Bene, oltre ad aggiungere attributi alt alle nostre immagini, abbiamo utilizzato i seguenti sette elementi:
: Abbiamo usato questo nella parte superiore del nostro documento dove sono la nostra intestazione principale e la navigazione. Potremmo anche usare questo tag come intestazione per sottosezioni del markup (come gli articoli).
: Questo tag riproduce l'host di qualsiasi elemento che funge da navigazione in una pagina Web. La nostra navigazione principale è l'esempio perfetto, ma i tag nav possono anche avvolgere l'impaginazione (ad esempio).
: Abbiamo solo una sezione, ma questo è un grande tag per il raggruppamento di contenuti associati.
: Un articolo può essere descritto come una porzione di informazione che può essere indipendente dal suo contenuto circostante, senza perdere significato. Nel nostro caso, abbiamo due articoli, ciascuno composto da un titolo, un testo, un accreditamento e un'immagine pertinente.
: Il tag figure ci consente di contenere le nostre immagini, quindi associare anche meta informazioni come?
: La nostra didascalia ora è stata posizionata in modo tale da essere associata all'immagine di pari livello.
: Abbiamo un piè di pagina ai piedi della nostra pagina (hmmmm) ma, come i tag di intestazione, possono essere utilizzati anche in sottosezioni, come dimostrato nei nostri articoli.
Prova a utilizzare elementi come questi ogni volta che puoi. Usa i tag div, con tutti i mezzi, ma solo se non riesci a pensare ad un elemento semantico più appropriato. In termini di stile, non puoi davvero sbagliare, e al momento non è un crimine se usi elementi nel posto sbagliato. Devi iniziare da qualche parte, quindi non aver paura di usare articoli e sezioni in modo imperfetto.
Con qualche CSS leggermente modificato, il risultato nel browser è? nessuna differenza.
Come lo vede un lettore di schermo?
Ecco il nostro design, visto attraverso gli occhi dell'estensione per screen reader di Google Chrome e VoiceOver di OSX.
Quando VoiceOver viene lasciato per elaborare un'intera pagina web (Control-Option-A), passa in rassegna il DOM in sequenza, dettando qualsiasi contenuto venga visualizzato. Le ultime versioni ti consentono di specificare i punti sulle pagine Web preferite a cui puoi saltare, ma se il cursore si trova a guardare un link, un elenco, un paragrafo o un'immagine, la legge come meglio può.
I nostri sforzi sono passati inosservati!
Potresti notare, a parte la voce stranamente attraente, che VoiceOver non ha fatto alcun cenno al fatto che la nostra navigazione sia stata inserita in una tag, e completamente ignorato qualsiasi presenza di articoli. Questa è la realtà della situazione al momento; HTML5 non è ancora ben supportato dagli screen reader, i nostri sforzi sono passati inosservati! Più o meno nello stesso modo in cui gli standard di markup e styling sono implementati lentamente (ma sicuramente) dai produttori di browser, quindi gli sviluppatori di screen reader si trovano nella stessa situazione.
Per rimanere aggiornato sullo stato di accessibilità HTML5 e sullo sviluppo di screen reader, puoi fare molto peggio di tenere d'occhio Bruce Lawson. Spinge spesso il problema, blogging su di esso e ne parla. In alternativa, consulta www.accessibleculture.org per verificare regolarmente i test dei lettori di schermo.
Aiuto sotto forma di WIA-ARIA
WIA-ARI-COSA?! La WIA (Web Accessibility Initiative) ARIA (accessibile Rich Internet Applications) è una specifica che aiuta le tecnologie assistive a interpretare il markup HTML. Usa gli attributi per descrivere gli elementi in diversi modi:
Ruolo: Lo scopo di un elemento (sì, ok, il suo ruolo)
Stato: Lo stato attuale di un elemento (controlla casella di controllo selezionata)
Proprietà: Qualsiasi di a tonnellata di proprietà (come la posizione orizzontale di un cursore)
In particolare, quando si tratta di stati e proprietà, si può immaginare che sarebbero altrimenti difficili da interpretare per le tecnologie assistive. Possiamo tranquillamente aggiungere gli attributi ARIA (entro certi limiti) al nostro markup e, cosa fondamentale, convalidare come parte delle specifiche HTML5.
WAI-ARIA è pensato per essere una tecnologia di bridging. Chiarisce la semantica alle tecnologie assistive quando gli autori creano nuovi tipi di oggetti, attraverso lo stile e lo script, che non sono ancora direttamente supportati dalla lingua della pagina. www.w3.org
Ecco un esempio di come possiamo migliorare ulteriormente il nostro markup: prendiamo questo:
? e aggiungiamo questo:
Ancora una volta, questo è HTML5 valido.
Abbiamo aggiunto un attributo di ruolo di navigazione a noi nav elemento, che potrebbe sembrare contro-intuitivo, ma per il momento aiuta. (Alcuni) gli screen reader ora riconosceranno correttamente la nostra navigazione. Più in basso, quando la specifica HTML5 è stata appropriatamente adottata da dispositivi di tutti i tipi, l'elemento nav implicherà un attributo ARIA di navigazione (e idem per altri elementi), rendendolo inutile.
Possiamo anche aggiungere un ruolo al nostro header:
E finalmente otteniamo il nostro articolo un meritato riconoscimento:
Per ulteriori dettagli sui ruoli disponibili e su come usarli, controlla l'introduzione completa di Virginia DeBolt ai ruoli ARIA.
Quindi abbiamo finalmente aggiornato il nostro markup per migliorare l'accessibilità. Dai un'occhiata all'articolo finito, anche se per notare la vera differenza dovresti visualizzarlo con uno screen reader adatto, ovviamente. La tua migliore scommessa al momento sarebbe quella di testare usando JAWS, o NVDA in quanto questi punteggi hanno un punteggio elevato per la gestione sia della semantica HTML5, sia degli attributi ARIA.
Conclusione
Spero che questo articolo ti abbia aiutato a ottenere una migliore prospettiva sul ruolo che puoi svolgere per migliorare l'accessibilità sul web. Pratica il web design basato sugli standard, fai attenzione alle tecnologie di sviluppo e, anche se i tuoi sforzi non possono ancora essere pienamente utilizzati, hai almeno un impatto sul tuo lavoro a prova di futuro. Grazie per aver letto (o ascoltato)!
Accentsconagua
Share
La demo 
