10 ottimi modi per rendere i tuoi contenuti portatili e accessibili

Contenuto

• L'accessibilità non è una "caratteristica"
• Definizione delle piattaforme
• Mantenere il contenuto portatile e accessibile
• 1. Inizia con HTML5
• 2. WAI-ARIA
• 3. Utilizzo di doctype
• 4. Tag del documento HTML5
• 5. Cattivi collegamenti
• 6. Immagini - ALT rispetto a TITLE
• Fallo sapere alle persone
• Sommario
• Ringraziamenti
• Risorse

Quando Kerie digita sul suo iPhone, sembra che suoni il flauto. Lo tiene vicino al viso e le sue dita si muovono a un ritmo incredibile. Finisce di scrivere e mi passa il telefono per leggere il messaggio che ha appena digitato. Ha un'ortografia e una grammatica perfette ed è stato digitato molto più rapidamente di quanto avrei potuto fare utilizzando la tastiera touch dell'iPhone.

Kerie utilizza un'app chiamata Fleksy per aiutarla a muovere le dita sulla faccia del telefono in schemi che si trasformano in parole. Legge anche le notizie, ascolta le app radiofoniche, controlla Twitter e cerca gli orari dei treni con il suo telefono. È completamente cieca.

"Pubblicazione" significa cose diverse per persone diverse. Per alcune persone, significa produrre un volume fisico di lavoro stampato. Altre persone associano la pubblicazione alla capacità di distribuire opere scritte tramite dispositivi e app. Sempre più spesso, le persone pensano alla pubblicazione come a rendere i contenuti disponibili per la fruizione in qualsiasi formato, sia che ciò significhi inviare un articolo a un blog o aggiornare un post di Google Plus.

La realtà è che le aspettative differiscono tra gli utenti e queste aspettative si trasformano nel tempo. I lettori che una volta consumavano avidamente l'ultimo post su un blog ora si aspettano di poter leggere quel post sul blog, o qualsiasi articolo o libro, dove e quando è conveniente per loro. Oggi i contenuti ci seguono da un blog a Reeder su un telefono a Instapaper su un iPad a una versione inviata tramite e-mail tramite Whispernet a un Kindle.

Il flusso di lavoro di lettura di tutti è diverso e per coloro che richiedono funzionalità di accessibilità come un lettore di schermo, testo a contrasto elevato o ingrandito, tale flusso di lavoro è interrotto, a volte irreparabilmente, quando autori ed editori non prendono in considerazione dettagli di formattazione minori ma necessari. Non pensare a questo come a non "selezionare la casella dell'accessibilità". Renditi conto invece che stai effettivamente trasformando i tuoi contenuti in una scatola nera per molti potenziali clienti.

L'accessibilità non è una "caratteristica"

Sebbene sia vero che i controlli accessibili sono utilizzati da persone con problemi di vista e udito, ci sono anche molte altre persone che ne traggono vantaggio. Qualcuno con problemi di vista regolerà le dimensioni dei caratteri per leggere più facilmente il contenuto su uno schermo. Una persona daltonica apprezza la capacità di regolare la tavolozza dei colori in modo che cose come il testo di avvertimento rosso risaltino effettivamente. Le persone con lunghi tragitti usano gli screen reader per ascoltare gli articoli che vengono loro letti. I non madrelingua utilizzano video e audio con sottotitoli per aiutarli a comprendere una nuova lingua. Tutti questi scenari rappresentano un ambito più ampio per i tuoi contenuti, una migliore esperienza utente ed empatia e forse anche maggiori entrate.

Per un'ottima panoramica del significato di accessibilità, vedere l'articolo di Ian Hamilton.

Definizione delle piattaforme

Cominciamo con alcune definizioni su quali formati possiamo concentrarci per rendere i nostri contenuti più facili da leggere:

• HTML: Con HTML5, il Web è un posto ancora migliore per scrittori ed editori per mostrare il proprio lavoro. Nuovi tag come articolo, sezione, intestazione e piè di pagina sono ora implementati in molti browser e possono essere utilizzati in modo semi-affidabile per aggiungere un contesto semantico alla tua scrittura. Inoltre, il prossimo modulo di pagina CSS3 potrebbe interessare anche coloro che cercano un'esperienza di lettura a pagine fisse da abilitare.
• EPUB: EPUB è lo standard ufficiale dell'International Digital Publishing Forum (IDPF). EPUB3 è stato approvato nell'ottobre 2011 e consente alle pubblicazioni di avere contenuti più stilizzati e personalizzabili, più vicini a ciò che è possibile con HTML / CSS, piuttosto che alle precedenti linee guida più statiche.
• MOBI: MOBI, abbreviazione di Mobipocket, è un formato utilizzato da Kindle e altri lettori digitali. È ancora meno personalizzabile di EPUB, ma lo trattiamo qui perché puoi usarlo nella pubblicazione di contenuti su Amazon se lo desideri. Secondo Robin Christopherson di AbilityNet, alcuni modelli di Kindle sono accessibili agli utenti non vedenti; tuttavia l'app Kindle su iOS non lo è. KF8, il nuovo formato di Kindle, è attualmente supportato dal Kindle Fire e sarà presto implementato sui dispositivi e-ink Kindle di ultima generazione e sulle app di lettura Kindle.
• PDF: Il PDF è diventato un'entità onnipresente sul web. Lo includo qui perché la maggior parte dei tablet ha una buona tecnologia integrata per leggere PDF e abilitare la tecnologia assistiva con essi. Con un PDF, il fattore decisivo è come è stato creato. Secondo Alan Dalton, consulente per lo sviluppo dell'accessibilità presso la National Disability Authority irlandese, "Puoi rendere i PDF accessibili; tuttavia molte persone non lo fanno. Non si rendono conto che i loro strumenti stanno producendo prodotti scadenti. Se avessi fatto a modo mio, tutto ciò che fare sarebbe essere HTML. " Navigazione e accessibilità a parte, anche i PDF non si adattano bene a dimensioni diverse e chiunque abbia provato a leggere un PDF su uno smartphone ha familiarità con le scomode operazioni di pizzicamento, zoom e panoramica necessari per farlo.

Ciò che non rientra in questa categoria sono le app che prendono i tuoi contenuti e li trasformano in immagini di grandi dimensioni. Sebbene ciò possa garantire che l'aspetto e lo stile siano gli stessi su tutte le piattaforme, stai bloccando gran parte del tuo pubblico mentre crei anche un download molto pesante. Questo problema è aggravato quando iniziamo a parlare di display Retina e immagini di dimensioni doppie. Per avere un'idea di cosa significhi quando ti viene negato qualcosa che vuoi leggere (ma devi comunque pagarlo comunque), vedi i commenti sulle app di Edicola che sono per lo più inaccessibili tramite VoiceOver in iOS.

Per vedere come appaiono questi tipi di riviste per un utente tecnologico accessibile, guarda i miei video incorporati, che mostrano l'esperienza frustrante di provare a leggere queste riviste con un
strumento di accessibilità come VoiceOver:

Mantenere il contenuto portatile e accessibile

Concentrarci sui formati portatili ci consente di gestire i nostri contenuti per vivere felicemente su più browser, telefoni, dispositivi di lettura digitale e applicazioni di lettura. Cosa dobbiamo fare con i nostri contenuti per assicurarci che possano tradursi bene tra questi diversi formati, mantenendo uno stile personalizzato e un'ottima esperienza?

Ho messo insieme alcune linee guida di seguito per le persone che desiderano che il loro pubblico sia il più ampio possibile e che non vogliono bloccare i loro contenuti in una scatola nera per molti utenti. Queste tecniche possono essere applicate a qualsiasi cosa, dai post del blog, al giornalismo di lunga durata, a qualsiasi altro lavoro che stai considerando di autopubblicare:

1. Inizia con HTML5

Creando i tuoi documenti inizialmente con HTML5, avrai meno di cui preoccuparti in futuro. Il markup HTML5 ti aiuterà a mantenere i tuoi documenti facili da navigare e da tradurre in altri formati. Farai molto meno "adattamento" delle tue pubblicazioni in altri formati se hai informazioni semantiche fin dall'inizio.

2. WAI-ARIA

WAI-ARIA è la Web Accessibility Initiative - Accessible Rich Internet Applications suite. È una serie di linee guida create dal Gruppo di lavoro sui protocolli e i formati (PFWG) di
il W3C. WAI-ARIA definisce un modo per rendere i contenuti e le applicazioni web più accessibili alle persone con disabilità e aiuta con contenuti dinamici e controlli avanzati dell'interfaccia utente sviluppati con Ajax, HTML, JavaScript e tecnologie correlate. Alcune delle tecniche in questo articolo provengono dalle linee guida WAI-ARIA e, sebbene questo articolo non sia abbastanza lungo da coprire tutte le specifiche, ti incoraggio a verificarlo per maggiori dettagli sul motivo per cui queste sono consigliate e le migliori pratiche per implementarli.

3. Utilizzo di doctype

Sebbene l'utilizzo di un doctype specifico di per sé non influisca sull'accessibilità del codice HTML associato, il motivo importante per utilizzare un doctype è assicurarsi che la modalità quirks del browser non sia attivata. Basta usare ! DOCTYPE html> per garantire che ciò non accada.

4. Tag del documento HTML5

La corretta navigazione di un documento tiene in alto il suo indice di accessibilità. Molti utenti di tecnologia accessibile che ho intervistato hanno espresso la loro frustrazione per i fornitori di contenuti e gli sviluppatori che non contrassegnano adeguatamente i loro documenti per la capacità di navigazione. Questi tag forniscono più contesto alle sezioni del documento rispetto all'utilizzo di molti div.

• Intestazione e Piè di pagina possono essere utilizzati più volte in una pagina. Possono denotare la rispettiva intestazione o piè di pagina principale del documento, oppure possono essere utilizzati per le informazioni di intestazione / piè di pagina all'interno di articoli o sezioni.
• A parte è un buon tag da usare per le sezioni, come le barre laterali di un libro, che sono complementari al documento ma non assolutamente cruciali per la sua comprensione.
• Sezioni sono modi per rompere le idee o raggruppare i contenuti che abbiano un senso.
• Articoli sono pezzi indipendenti e indipendenti che potrebbero esistere senza il resto del contenuto. L'utilizzo appropriato di questi tag aiuta ad assicurarsi che la struttura del contenuto sia interpretata correttamente.

5. Cattivi collegamenti

Con CSS, è possibile utilizzare immagini di sfondo su link e pulsanti. Questo è un bell'effetto per i web designer perché offre un maggiore controllo sulla tipografia. Tuttavia, ha portato le persone a dimenticare di includere descrizioni testuali. Assicurati che anche se stai utilizzando il testo all'interno dell'immagine, assicurati che rimanga accessibile. Questo può anche influenzare cose come SEO e
internazionalizzazione.

Esempio:

a href = "/ contact"> / a>

Questo non va bene.

a href = "/ contact"> Contattaci / a>

Molto meglio.

6. Immagini - ALT rispetto a TITLE

Le persone spesso includono entrambi alt o titolo attributi a loro immagine, ma non entrambi in quanto sono spesso fraintesi e quindi sembrano ridondanti. Per chiarire la confusione, titolo può rappresentare informazioni di avviso, come quelle che potrebbero essere visualizzate in un suggerimento. Questo può anche darti ulteriori informazioni quando passi il mouse su un'immagine, una tecnica che molte persone usano sui loro blog. Con la crescita dei dispositivi touch, tuttavia, questo tipo di informazioni diventa meno utile.

Alt d'altra parte è utilizzato dalla tecnologia assistiva e dà contesto all'elemento. Devi usare alt sulle tue immagini e assicurati che siano informazioni utili. Utilizzando img alt = "" src = "1348.webp">

Fallo sapere alle persone

Se i tuoi contenuti sono disponibili in più formati, assicurati che ci sia un modo per scoprirli sul tuo sito. Probabilmente hai visto il messaggio "In caso di problemi con la visualizzazione di questa email, leggi online
version "nella parte superiore di molte newsletter via email. Fai in modo che sia una pratica fare lo stesso per i tuoi contenuti. Se disponi di un PDF accessibile o di una versione audio e di un ePub, assicurati che gli utenti possano trovare tali informazioni. test per assicurarsi che il contenuto sia rintracciabile e leggibile.