Accessibilità e rubriche: progettazione per utenti ipovedenti

Pubblicato: 2021-07-19

Un piccolo dettaglio come il modo in cui utilizzi le intestazioni sul tuo sito web o app potrebbe costarti potenziali clienti o vendite. Continua a leggere per scoprire perché il tuo sito web dovrebbe essere accessibile, cosa potrebbe succedere in caso contrario e alcune best practice su come utilizzare le intestazioni per guidare correttamente gli utenti attraverso una pagina.

Il caso dell'accessibilità

I titoli possono essere facilmente trascurati quando si progetta un nuovo sito Web o si aggiorna quello vecchio. Gli esperti di marketing tendono a concentrarsi maggiormente sul lato estetico del design e meno sul lato pratico. È vero che gli elementi visivi giocano un ruolo importante nell'esperienza utente (UX) di un sito web, tuttavia renderlo più accessibile agli utenti con disabilità visive può aumentare il numero di visitatori che convertono.

Le statistiche rafforzano il nostro caso per l'accessibilità:

circa 253 milioni di persone nel mondo soffrono di problemi alla vista
ogni giorno 250 persone iniziano a perdere la vista nel Regno Unito
più di 2 milioni di persone nel Regno Unito vivono con la perdita della vista che ha un impatto significativo sulla loro vita quotidiana, ad esempio l'incapacità di guidare
la degenerazione legata all'età è la principale causa di cecità negli adulti.

cieco che usa il telefono

Con 4,1 milioni di persone che dovrebbero essere colpite dalla perdita della vista nel Regno Unito entro il 2050 , le aziende non possono permettersi di non adattare i propri siti Web a tutti i tipi di pubblico. Ciò è particolarmente importante se il loro mercato di riferimento è un gruppo demografico più anziano, che ha maggiori probabilità di avere problemi di vista.

Un aspetto semplice come usare correttamente i titoli può fare un'enorme differenza e non è difficile da applicare. Potrebbe anche farti risparmiare i costi di una causa.

Il caso di Domino

Domino's Pizza è un buon esempio di come trascurare l'accessibilità per gli utenti ipovedenti possa essere costoso.

Un cliente statunitense non vedente ha presentato un reclamo nel 2016 dopo aver lottato per scegliere i condimenti, utilizzare un codice sconto e persino completare l'ordine sull'app per iPhone del ristorante. Il problema era che l'app non si integrava con il software di lettura dello schermo del telefono, che vocalizza i contenuti in base al testo utilizzato correttamente e alle immagini taggate con il testo. L'app e il sito Web dell'azienda non avevano il codice corretto per consentire all'iPhone di leggere le opzioni.

accessibilità ricerca vocale

Mentre i giudici inizialmente si erano schierati con Domino's, la corte d'appello si è pronunciata a favore del cliente solo la scorsa settimana sulla base del fatto che " La presunta inaccessibilità del sito Web e dell'app di Domino impedisce l'accesso ai beni e ai servizi dei suoi franchising di pizzerie fisiche - che sono luoghi di pubblico alloggio ”.

Nel Regno Unito, anche il Royal National Institute of Blind People ha accolto con favore la sentenza che commenta per la BCC : "Tutte le organizzazioni hanno la responsabilità ai sensi dell'Equality Act 2010 di garantire che i loro siti Web e app possano essere utilizzati da persone non vedenti e ipovedenti, compresi quelli che utilizzano lettori di schermo”.

Esistono diversi modi in cui le aziende possono rendere i propri siti Web più accessibili e l'utilizzo corretto dei tag di intestazione è molto utile per aiutare un utente a navigare in una pagina.

Best practice per i titoli per l'accessibilità

C'è un po' di confusione e uso improprio delle intestazioni, in parte a causa degli sviluppatori che seguono un design troppo da vicino o dei designer che non sono consapevoli del modo corretto di usare le intestazioni.

Se non sei sicuro di cosa sia un titolo, il W3C ha una buona definizione e Yoast spiega il suo uso SEO.

Il W3C definisce l'uso corretto come:

“I sei elementi di intestazione, da H1 a H6, indicano i titoli delle sezioni. Sebbene l'ordine e l'occorrenza delle intestazioni non siano vincolati dalla DTD HTML, i documenti non dovrebbero saltare i livelli (ad esempio, da H1 a H3), poiché la conversione di tali documenti in altre rappresentazioni è spesso problematica.

Non solo l'uso corretto delle intestazioni ha un impatto sul modo in cui le persone e Google leggono la tua pagina, ma ha anche un enorme impatto sul modo in cui gli screen reader presentano i tuoi contenuti all'utente. Le persone che utilizzano strumenti di accessibilità possono navigare nella pagina tramite i tuoi titoli, quindi se hai qualcosa di importante da dire, dovrebbe essere strutturato e visivamente come previsto.

Non è necessario alcun lavoro aggiuntivo per rendere accessibili le intestazioni durante la creazione della pagina. Se segui l'utilizzo corretto, i criteri di accessibilità saranno soddisfatti. I consigli sull'accessibilità del W3c per le intestazioni lo spiegano abbastanza bene e, come puoi vedere, non solo ha senso per l'accessibilità, ma ha senso strutturalmente e visivamente.

Come faccio a controllare le intestazioni?

Se i tuoi sviluppatori o il tuo tema seguono l'uso corretto delle intestazioni, dovresti essere in grado di aggiungere semplicemente il tuo contenuto e aggiungere l'intestazione nel modo corretto tramite il tuo editor/CMS.

Come nota a margine non è necessario aggiungere titoli ovunque, sarebbe sufficiente un semplice H1 (che di solito è il titolo della pagina) seguito da un H2 - ma diciamo che vuoi strutturare correttamente una pagina particolarmente lunga o stai controllando qualcun altro lavoro? Prova a utilizzare uno di questi plugin per il tuo browser preferito:

Mappa delle intestazioni per Chrome
Mappa dei titoli per Firefox

Una volta installati, sono molto facili da usare ed eventuali intestazioni errate vengono evidenziate in rosso nella barra laterale quando si fa clic sul pulsante del plug-in. Questa funzione sarà anche un'opzione predefinita nell'editor Gutenberg nella versione 5.0 di WordPress ed è spiegata su questo sito.