Elenco di controllo dell’accessibilità web

L’accessibilità è la pratica per garantire che i siti Web siano ugualmente disponibili per le persone con disabilità in modo che abbiano pari accesso ai beni e ai servizi forniti da tali siti. È parte integrante del web design e dello sviluppo professionale.


Contents

Perché dovresti preoccuparti Accessibilità?

Ci sono molte ragioni per cui sviluppatori, designer e i loro datori di lavoro / clienti dovrebbero garantire che l’accessibilità sia una parte iniziale e integrante del processo di sviluppo web.

  • In molti territori, come gli Stati Uniti, l’UE, il Regno Unito, Israele e il Giappone, è un obbligo legale non discriminare le persone a causa della loro disabilità. Negli Stati Uniti l’anno scorso, Sono state presentate 2.235 nuove azioni legali sul sito Web ADA in tribunale federale. Questo è uno all’ora.
  • I siti accessibili tendono ad essere meglio codificati, più robusti e si posizionano bene sui motori di ricerca.
  • I siti accessibili tendono ad essere più utilizzabile per i visitatori non disabili, portando a una maggiore soddisfazione e conversione.
  • I siti inaccessibili fanno male agli affari. Nel 2019, a Sondaggio nel Regno Unito hanno scoperto che oltre 4 milioni di persone hanno abbandonato un sito Web al dettaglio a causa delle barriere all’accessibilità che hanno trovato. Quella perdita di affari, la “sterlina a clic”, è stata di £ 17,1 miliardi. Quello è miliardo. Solo nel Regno Unito.
  • È un brutto affare allontanare volontariamente potenziali clienti.

Gli standard comuni e i problemi

Fortunatamente, il W3C (l’ente che produce molti degli standard su cui si basa il web) ha uno standard su come rendere accessibili i siti Web. È chiamato Linee guida per l’accessibilità dei contenuti Web (WCAG). Esistono tre livelli di conformità (A, AA, AAA) con “A” che rappresenta il livello più basso di accessibilità. Ti consiglio di puntare al livello AA.

Sfortunatamente, WCAG è una lettura lunga, asciutta e molto tecnica, quindi diamo un’occhiata a cosa puoi fare relativamente facilmente e ottenere il massimo profitto per il tuo dollaro. Questa non è una lista di controllo Tutto quello che devi sapere; è una lista di controllo degli errori più comuni e gli errori che le persone con disabilità dicono siano i loro principali bloccanti, con suggerimenti pratici per risolvere i problemi. Tutti i collegamenti esterni si aprono in una nuova scheda.

Nel sondaggio Click-Away Pound, agli intervistati con disabilità è stato chiesto quali fossero i blocchi principali per il completamento degli acquisti. Ecco le principali barriere (sono state consentite più risposte):

  1. Pagine affollate con troppi contenuti – 66%
  2. test reCAPTCHA – 59%
  3. Scarsa leggibilità (contrasto, layout del testo) 56%
  4. La distrazione di immagini e grafica in movimento – 53%
  5. Informazioni di collegamento scadenti – 59% (77% per gli utenti di screen reader)
  6. Modulo di riempimento 56%

Come migliorare l’accessibilità del sito Web

Innanzitutto, tieni presente che nessuno dei primi 5 sono problemi tecnici: sono errori di progettazione o di copywriting.

1) Troppo contenuto

In breve: suddividere il testo in sezioni con titoli ed elenchi puntati. Usa un linguaggio semplice.

È noto che all’aumentare del numero di scelte aumenta anche il sforzo richiesto per raccogliere informazioni e prendere buone decisioni. È lo stesso con troppi contenuti: presto diventa travolgente. Ridurre il contenuto all’essenziale è un mestiere che richiede tempo; come ha scritto Mark Twain (presumibilmente): “Non ho avuto il tempo di scrivere una breve lettera, quindi ne ho scritto una lunga”.

Il libro recente La scrittura sta progettando suggerisce

Le persone vogliono essere in grado di sfogliare lunghi blocchi di testo, indipendentemente dalla vista o dall’audio, quindi è estremamente importante strutturare la tua scrittura longform con intestazioni, brevi paragrafi e altre best practice per la progettazione di contenuti.

Così:

  • Ne ho solo uno

    su una pagina.

  • Usa sottotitoli liberamente; spezza una “lastra” di testo per gli utenti vedenti, mentre gli utenti di tecnologie assistive come gli screen reader possono utilizzare un tasto di scelta rapida per saltare tra le intestazioni o ottenere una mappa mentale del contenuto dalla struttura delle intestazioni.
  • Non saltare un livello di titoli. Ad esempio, se si utilizza un

    , assicurarsi che sia preceduto da un

    .

  • Usa elenchi puntati (come questo!) Contrassegnati correttamente in HTML come
      ,
    • . Gli screen reader annunceranno “Elenco di 10 elementi” (e consentiranno all’utente di saltarci sopra).

    Usa un inglese semplice

    Monzo Bank Guida “Il nostro tono di voce” spiega l’importanza del linguaggio semplice:

    Nel 2010, l’avvocato americano Sean Flammer ha condotto un esperimento. Ha chiesto ai giudici del tribunale di 800 circuiti di schierarsi con un tradizionale argomento “legalese” o con uno in quello che ha definito “inglese semplice”.

    I giudici preferirono in modo schiacciante la versione inglese semplice (dal 66% al 34%), e tale preferenza era valida indipendentemente dalla loro età o provenienza.

    Note sull’infiammatore (PDF) della versione inglese semplice:

    È più breve di quasi una pagina, quindi ovviamente elimina frasi e parole non necessarie. Le sue frasi hanno una media di 17,8 parole, a differenza di 25,2 parole.

    Conclude:

    Abbiamo 25 anni di ricerche empiriche che portano a una conclusione inevitabile: se vuoi compiacere e convincere il tuo lettore, scrivi in ​​un inglese semplice.

    2) ReCAPTCHA

    In breve: non far saltare i tuoi utenti attraverso cerchi potenzialmente impossibili per risparmiare tempo per gli sviluppatori.

    Gli intervistati parlavano spesso di un vecchio Versione di ReCAPTCHA:

    versioni di reCAPTCHA con testo traballante che è necessario digitare nuovamente

    Faccio fatica con le immagini e devo digitare i numeri o le lettere. Nel tipo in cui devo fare clic su quali immagini hanno un negozio o altro, mi manca sempre un po ‘o mi confondo e utilizzo l’energia che non ho …

    Lo stile traballante delle lettere di reCAPTCHA è ora obsoleto. È molto più comune vedere una nuova incarnazione chiamata “No CAPTCHA reCAPTCHA” (noto anche come “Non sono un robot “Casella di controllo) che richiede all’utente di selezionare una casella per confermare che non sono un robot e che utilizza un voodoo segreto per segnare l’utente. Se passano, non sono necessarie ulteriori interazioni. Tuttavia, se falliscono, verrà visualizzata un’ulteriore sfida:

    Schermata parziale di un captcha che richiede all'utente di fare clic su tutti i quadrati che mostrano le arance

    Tieni presente che il tipo di CAPTCHA che richiede a un utente di fare clic su tutti i quadrati (diciamo) un segnale stradale non è necessariamente internazionale. Come scrive Terence Eden, I CAPTCHA non dimostrano che sei umano – dimostrano che sei americano.

    La forma più accessibile di reCAPTCHA è reCAPTCHA v3 che non richiede alcuna interazione da parte dell’utente, ma richiede che tu faccia più lavoro per gestire le visite che non superano il test:

    È un’API JavaScript pura che restituisce un punteggio, dandoti la possibilità di agire nel contesto del tuo sito: ad esempio richiedere ulteriori fattori di autenticazione, inviare un post con moderazione o rallentare i bot che potrebbero raschiare il contenuto.

    3) Scarsa leggibilità

    In breve: assicurati che il testo abbia un contrasto adeguato, sia leggibile e non giustificato.

    • Garantire un contrasto adeguato. Uno dei blocchi di accesso più comuni sul Web è uno scarso contrasto tra testo e sfondo. Le linee guida del W3C richiedono un rapporto di contrasto di almeno 4,5: 1, ad eccezione del testo su larga scala e delle immagini di testo su larga scala che dovrebbero avere un rapporto di contrasto di almeno 3: 1 (i loghi e il testo “incidentale” sono esenti). Ci sono molte utility che possono misurare i rapporti di contrasto per te; il mio preferito è l’Ada Rose Cannon eccellente widget di contrasto, che è un utile bookmarklet del browser che evidenzia aree di contrasto insufficiente sulla tua pagina.
    • Non avere intestazioni in maiuscolo. Ci sono prove che sono più difficili da leggere perché le lettere maiuscole hanno la stessa altezza, quindi non possiamo riconoscere la forma delle parole comuni. Inoltre, alcuni screen reader scriveranno gruppi di lettere maiuscole come se fossero abbreviazioni (come BBC, DOJ, ecc.). Se devi avere tutti i titoli di capitale, scrivili in un caso normale nel tuo HTML e trasformali con CSS text-transform: maiuscolo.
    • Allinea a sinistra del testo. (Per le pagine nelle lingue da destra a sinistra come l’arabo o l’ebraico, allinea il testo a destra.) Non giustificarlo, poiché ciò rende più difficile la lettura per le persone con dislessia. Il Guida allo stile della British Dyslexia Association suggerisce anche

      Usa i caratteri sans serif, come Arial e Comic Sans, poiché le lettere possono apparire meno affollate. Le alternative includono Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Immagini e grafica che distraggono

    In breve: consentire agli utenti di interrompere qualsiasi movimento; rispettare le impostazioni del loro sistema operativo; non riprodurre automaticamente il video.

    Un intervistato al sondaggio Click-Away Pound ha scritto,

    I siti che usavo con poco problema ora stanno diventando un problema in quanto stanno assumendo annunci in movimento e caricando costantemente più annunci mentre fai acquisti.

    Il livello più elementare di WCAG richiede “Per qualsiasi informazione di spostamento, lampeggiamento o scorrimento che (1) si avvia automaticamente, (2) dura più di cinque secondi e (3) è presentato in parallelo con altri contenuti, esiste un meccanismo per l’utente di mettere in pausa, interrompere o nascondere a meno che il movimento, il battito delle palpebre o lo scorrimento non faccia parte di un’attività in cui è essenziale “.

    La distrazione è un fastidio, specialmente per le persone con ADHD o altri disturbi cognitivi. Ma il movimento e il lampeggiamento possono anche causare convulsioni, quindi le linee guida WCAG richiedono che il contenuto non lampeggi più di 3 volte in un periodo di 1 secondo.

    Rispetta la scelta dell’utente per le animazioni

    Tutti i principali sistemi operativi consentono all’utente di esprimere una preferenza per il movimento ridotto sullo schermo, forse perché hanno un disturbo dello spettro vestibolare attivato dal movimento. Il tuo sito Web è in grado di rilevare se l’utente ha fatto ciò con il CSS preferisce ridotto movimento media query.

    Qui, consentiamo l’animazione di un pulsante solo se l’utente non ha espresso alcuna preferenza:

    @media (preferisce il movimento ridotto: nessuna preferenza) {
    pulsante {
    / * I fotogrammi chiave `vibrazione` sono definiti altrove * /
    animazione: vibrazione di 0,3 s lineari infiniti entrambi;
    }
    }

    Se stai cercando di aggiornare un sito che ha molte regole di animazione, puoi farlo interrompe tutte le animazioni CSS precedentemente dichiarate:

    @media (preferisce il movimento ridotto: riduci) {
    *,
    *::prima,
    *::dopo {
    durata animazione: 0,001 secondi! importante;
    durata della transizione: 0,001 secondi! importante;
    }
    }

    Per quanto riguarda il rispetto delle preferenze del sistema operativo dell’utente, potresti prendere in considerazione progettare il tuo sito Web per la modalità oscura.

    5) Informazioni di collegamento scadenti

    In breve: rendere identificabili i collegamenti, con un testo di collegamento univoco. Avvisa gli utenti se un collegamento aprirà una nuova scheda o un file.

    Una delle principali cause di collegamenti scadenti è spesso un cattivo copywriting. La maggior parte degli screen reader consente all’utente di visualizzare rapidamente un elenco di collegamenti su una pagina (nello screen reader commerciale più utilizzato, JAWS, la scorciatoia da tastiera è Ins + F7; nella lettore di schermo gratuito NVDA, la stessa scorciatoia da tastiera fa apparire un Elenco di elementi che elenca collegamenti a pagine, titoli e punti di riferimento).

    Tuttavia, se ogni link ha un testo che dice “Fai clic qui” o “Leggi di più”, con nient’altro che li distingua, questo è inutile. Il modo più semplice per risolverlo è semplicemente scrivere un testo di collegamento univoco, ma se ciò non è possibile, è possibile sovrascrivere il testo del collegamento per la tecnologia di assistenza utilizzando un attributo di etichetta aria univoco su ciascun collegamento.

    Ecco un buon esempio dal Sito web Joomla:

    Sito Web di Joomla, che mostra due storie diverse, ognuna con identiche

    Il testo del link visibile è semplicemente “leggi di più”, ma utilizza Joomla Aria-label attributi per rendere unica ogni tecnologia assistiva:

    Leggi di più
    
    Leggi di più

    A causa del Aria-label il testo verrà utilizzato al posto del testo del collegamento da tecnologie assistive, il W3C consiglia di iniziare il testo utilizzato nell’etichetta aria con il testo utilizzato all’interno del collegamento poiché “ciò consentirà una comunicazione coerente tra gli utenti”.

    Nota: Un brutto consiglio che vedo ancora sui vecchi siti è di aggiungere un testo esplicativo sui collegamenti usando il titolo attributo:

    Leggi di più>

    Non farlo. Il il titolo non è esposto alla maggior parte degli screen reader (gli sviluppatori lo riempivano di parole chiave per scopi “SEO”, quindi i produttori di screen reader lo disabilitavano per impostazione predefinita) e i browser presentano gli attributi del titolo come “descrizioni comandi” che sono disponibili solo per gli utenti del mouse al passaggio del mouse.

    I collegamenti dovrebbero apparire come collegamenti

    Per impostazione predefinita, i browser sottolineano i collegamenti. È meglio non cambiarlo, ma se perdi una rissa nel parcheggio con il progettista a riguardo, il testo del link deve avere un rapporto di contrasto 3: 1 dal testo non link circostante e dovrebbe dare un po ‘di designatore non colorato “Che sono un collegamento quando sono sospesi o focalizzati, ad esempio:

    a: hover, a: focus {text-decoration: underline;}

    Lo stile di messa a fuoco fa sì che il collegamento venga sottolineato quando un utente non mouse si concentra su di esso dalla tastiera, dallo stilo o dall’input vocale. In generale, ogni volta che qualcosa in una pagina ha uno stile al passaggio del mouse, dovrebbe anche essere assegnato uno stile di messa a fuoco.

    Il “designatore non colorato” (nel nostro caso, una sottolineatura) assicura che i visitatori con ipovisione o daltonismo vedranno il cambiamento al passaggio del mouse o alla messa a fuoco. (Gli screen reader annunciano automaticamente “Link” prima del testo del link.)

    Indica alle persone se il link apre una nuova scheda / pagina

    Può essere fonte di confusione per un visitatore se l’attivazione di un collegamento apre una nuova scheda o una nuova finestra, in particolare se solo alcuni collegamenti su una pagina lo fanno (ad esempio, solo i collegamenti esterni aprono una nuova scheda). Se è necessario eseguire questa operazione, è necessario avvisare l’utente nel testo del collegamento o utilizzando il metodo aria-label sopra.

    Indica alle persone se il collegamento è a un file

    Se un collegamento è a un file (ad esempio un PDF o un video), indicare all’utente nel testo del collegamento. Non nasconderlo dentro Aria-label, poiché ciò può essere utile per molti utenti vedenti (alcuni cellulari non possono aprire un file .docx, ad esempio). Se si tratta di un file di grandi dimensioni, prendere in considerazione la possibilità di avvisare l’utente della dimensione approssimativa; potrebbero non voler scaricare un file video di grandi dimensioni su 3G.

    Puoi anche usare il Scarica attributo, che consente al browser di aprire la finestra di dialogo per il download dei file nativi del sistema operativo. Mettendo tutto insieme, il codice sarà simile al seguente:

    Rapporto annuale (PDF, 240 MB)

    6) Un altro errore di progettazione: rimozione dell’anello di messa a fuoco

    In breve: assicurati che un utente della tastiera possa sempre vedere dove sono attualmente focalizzati.

    Ne abbiamo parlato :messa a fuoco stili prima. Sono un indicatore visivo inestimabile per quelle persone che non possono usare un mouse per qualsiasi motivo: forse hanno RSI, o Parkinson o sclerosi multipla. Per impostazione predefinita, i browser visualizzano un anello di messa a fuoco sull’elemento attualmente attivo. Ecco il link Home sul mio sito personale, incentrato su un browser Chromium:

    Schermata dell'anello di messa a fuoco predefinito di Chromium attorno a un collegamento (che è anche un'immagine)

    Tuttavia, alcune persone considerano questo esteticamente spiacevole quando usano un mouse e lo disattivano con CSS, lasciando così il sito inaccessibile agli utenti della tastiera.

    Inserisci un nuovo standard, introdotto da Firefox, chiamato : Focus-visibile. Ciò applicherà un anello di messa a fuoco a un elemento se è stato raggiunto da una tastiera o da un dispositivo di puntamento senza mouse ma non mostra nulla agli utenti del mouse. Poiché è supportato solo in Firefox (al momento della scrittura), Suggerisce Patrick Lauke il seguente CSS per giocare bene con tutti i browser:

    button: focus {/ * alcuni stili di focus pulsante entusiasmanti * /}
    button: focus: not (: focus-visible) {
    / * annulla tutti gli stili di pulsante focalizzati sopra
    se il pulsante ha lo stato attivo ma normalmente il browser non lo farebbe
    mostra gli stili di messa a fuoco predefiniti * /
    }
    pulsante: focus-visibile {/ * alcuni ancora * più * stili di messa a fuoco pulsante emozionanti * /}

    7) Riempimento moduli

    In breve: progettare campi modulo che assomigliano a campi modulo, ognuno associato a un’etichetta. Non disabilitare il riempimento automatico.

    Data l’importanza vitale delle forme per i siti di e-commerce, mi stupisce quante forme inaccessibili vedo. Spesso ciò è dovuto al fatto che i vecchi browser non consentivano molto di definire gli elementi dei moduli, quindi gli sviluppatori li hanno falsificati con altri elementi HTML. I browser moderni lo consentono caselle di controllo attraenti, pulsanti di opzione, componenti di selezione personalizzati e caselle combinate, controlli di completamento automatico accessibili e altro ancora.

    Il riempimento automatico è tuo amico

    Consentire ai browser di compilare automaticamente i moduli richiede ai visitatori di fare di meno, quindi hanno maggiori probabilità di completare un modulo e iscriversi / acquistare il prodotto. Riempimento automatico sui browser: un’immersione profonda è un ottimo articolo di eBay su questo (e dovrebbero saperlo).

    Inoltre, il completamento automatico è attualmente l’unica tecnica sufficiente per raggiungere la conformità AA Criterio di successo 1.3.5: Identificare lo scopo dell’input.

    Rendi i campi modulo come campi modulo

    Per impostazione predefinita, i browser visualizzano i campi di input del modulo come caselle. Assolutamente, modellali con margini, imbottitura e bordi, ma conservali come scatole. Molti designer hanno seguito il modello di Material Design pre-2017 di Google sull’utilizzo di una sola riga per consentire all’utente di inserire testo:

    Vecchio input di design materiale, con linea orizzontale anziché scatola rettangolare

    Tuttavia, Google ha scoperto che la linea sotto i vecchi campi di testo non era chiara per alcuni utenti, spesso confusa con un divisore e ha cambiato il design. In un test di usabilità con 600 partecipanti, lo hanno scoperto

    i campi di testo racchiusi con una forma rettangolare (a forma di scatola) hanno prestazioni migliori rispetto a quelli con una linea consentita … Oggi, questi nuovi campi di testo vengono visualizzati nei prodotti Google dalle pagine di accesso dell’account ai moduli di Google.

    Se stai pensando di adottare la libreria dell’interfaccia utente di Material Design completa di Google, leggi Smetti di usare i campi di testo di Material Design! di Matsuko Friedland per vedere se soddisfa le tue esigenze.

    Etichetta tutti i campi modulo

    Tutti i campi del modulo (input di testo, caselle di controllo, pulsanti di opzione, cursori, ecc.) Devono essere etichettati. Il modo migliore per farlo è usare un HTML ; come afferma WCAG, “i controlli HTML standard soddisfano già questo criterio di successo se utilizzati in base alle specifiche”.

    Ecco una demo di cui ho fatto un campo modulo senza etichetta rispetto a un campo modulo con etichetta. Sembrano identici, ma quello in alto non ha un’etichetta corretta, mentre il secondo lo fa. Fai clic sull’etichetta di testo di quella in basso e vedrai che si concentra sull’input associato.

    confronto di etichette false vs reali

    Questo rende la messa a fuoco di un input molto più facile per qualcuno con difficoltà di controllo del motore – o forse per te, cercando di selezionare una piccola casella di controllo su un piccolo schermo su un treno accidentato. È anche fondamentale per gli utenti di screen reader che passano in rassegna i campi in un modulo (per impostazione predefinita, solo i collegamenti e i campi del modulo sono focalizzabili tramite tabulazione); quando si inseriscono in un campo di input, l’utilità per la lettura dello schermo annuncerà il contenuto dell’etichetta associata.

    Il codice per questo è semplice. Al campo di input viene assegnato un ID univoco e l’etichetta è associata ad esso utilizzando il per attributo:

    
    

    Etichette nascoste

    Occasionalmente, potresti non voler un’etichetta visibile. O il designer non lo fa e non vuoi un’altra rissa nel parcheggio. Ad ogni modo, ecco un esempio in cui un’etichetta che dice “Cerca” che precede l’input sembra eccessiva.

    Campo di immissione, con il pulsante etichettato 'cerca' in seguito

    Possiamo associare il campo di input al testo “Cerca”, che è il contenuto del pulsante di invio utilizzando Aria-labelledby:

    
    

    Avremmo potuto usare Aria-label (che abbiamo incontrato in precedenza parlando di link):


    Ma è sempre meglio preferire il testo visibile su una pagina perché verrà tradotto se la pagina viene eseguita attraverso uno strumento di traduzione, mentre il testo “nascosto” negli attributi HTML non lo sarà. (Punta di cappello ad Adrian Roselli per questo suggerimento, dal suo splendido articolo La mia priorità di metodi per etichettare un controllo.)

    Errori più comuni nelle prime milioni di home page

    Abbiamo esaminato le principali barriere ai siti di eCommerce segnalate dagli utenti con qualche forma di compromissione. Ora diamo un’occhiata a una serie di siti molto più ampia: le home page dei primi 1.000.000 di siti web, analizzato automaticamente da WebAIM nell’agosto 2019. Il 98% delle pagine analizzate presentava almeno un errore. Gli errori più comuni sono

    1. Testo a basso contrasto (86,1%)
    2. Testo alternativo mancante per le immagini (67,9%)
    3. Collegamenti vuoti (58,9%)
    4. Etichette di input modulo mancanti (53,2%)
    5. Lingua del documento mancante (30,5%)

    Abbiamo affrontato il basso contrasto, i collegamenti e gli input dei moduli sopra. Ora diamo un’occhiata a come possiamo evitare gli altri errori molto comuni.

    8) Fornire alternative testuali per tutte le immagini, i video e l’audio

    In breve: qualsiasi informazione comunicata attraverso un’immagine o un video deve avere un equivalente testuale.

    Ogni deve disporre di un testo alternativo (“testo alternativo”) che può essere comunicato ai visitatori con problemi di vista o quelli con bassa larghezza di banda / piani dati costosi che hanno disattivato le immagini nei loro browser. Questo include immagini di testo.

    Ecco le regole di base:

    • Se l’immagine è puramente decorativa, deve contenere un testo alternativo vuoto: alt = "". (Ma le immagini puramente decorative dovrebbero probabilmente essere in CSS, comunque.)
    • Se un’immagine è descritta nel corpo del testo, dovrebbe contenere un testo alternativo vuoto (alt = ""), per evitare la ripetizione. Ma fai attenzione se è un in un
      – vedi Come immagini? per più.
    • Se un’immagine è l’unico contenuto di un collegamento (ad esempio, è possibile fare clic sul logo della tua organizzazione per accedere alla home page), il testo alternativo dovrebbe descrivere la destinazione del collegamento. Per esempio, alt = "home page".
    • Non utilizzare i caratteri icona; possono essere davvero dannosi per le persone dislessiche. Se li usi, convertili in SVG.

    Testo alternativo audio e video

    Non dimenticare che i contenuti audio richiedono testo alternativo per le persone con problemi di udito. Ciò significa trascrizioni di podcast e sottotitoli sui video. E ancora: non riprodurre automaticamente i media.

    9) Aggiungi la lingua del documento corretta

    In breve: informa la tecnologia di supporto nella lingua in cui si trova il tuo testo.

    Il 30% delle home page non dichiara la lingua in cui è scritto, il che può creare confusione per gli utenti di screen reader. Questo è importante perché la parola “sei” è pronunciata in modo molto diverso se la frase è in inglese o francese, per esempio.

    È facile risolverlo aggiungendo un attributo lang al tuo elemento HTML:

    “En” indica a uno screen reader (o software di traduzione) che questa pagina è in inglese. “Es” è spagnolo, “fr” è francese e così via. Per la maggior parte delle lingue, il tag della lingua è abbastanza facile da determinare. Il W3C ha una guida a Scelta di un tag di lingua.

    Se la pagina contiene contenuti in una lingua diversa da quella dichiarata principale, aggiungi un attributo di lingua a un elemento che circonda quel contenuto. Ad esempio, in una pagina dichiarata inglese:

    Se desideri chattare a matador, in qualche figo cabana
    Ed incontrare Senoritas dal punteggio, Espana por favor

    10) Aiuta un visitatore a girare intorno ai tuoi contenuti

    In breve: utilizzare gli elementi di riferimento HTML per aiutare gli utenti della tecnologia assistiva a comprendere e navigare nei contenuti.

    Quando un visitatore vedente arriva alla tua pagina, può facilmente scansionarlo visivamente per capire dove si trova la navigazione e dove inizia il contenuto principale. Un utente di screen reader non può farlo. Tuttavia, HTML5 ci fornisce alcuni nuovi tag per contrassegnare queste aree e le tecnologie assistive hanno scorciatoie che possono saltare (o saltare) a punti di riferimento come intestazione, footer, navigazione e simili.

    Ecco un video di sei minuti che ho realizzato con Léonie Watson, uno sviluppatore web e un utente di screen reader, su come usa il suo screen reader per esaminare queste semantiche per navigare nel mio sito personale:

    • Avvolgi il tuo contenuto principale, vale a dire cose che non sono intestazione, navigazione principale o piè di pagina, in a
      elemento. In quasi tutti i casi, dovrebbe essercene solo uno
      per pagina. Tutti i browser (IE9 +) ti consentono di modellarlo e le tecnologie di assistenza sanno cosa farne.
    • Avvolgi l’intestazione (logo del marchio, linea sottile, intestazione della pagina) in a
      elemento.
    • Avvolgi il piè di pagina (materiale legale, dettagli di contatto, note sul copyright, ecc.) In a
    • Contrassegna la tua navigazione principale usando
        avvolto in un elemento. Questo può essere nidificato all’interno di
        se si adatta al design visivo della pagina.
      • La pubblicità e i contenuti non essenziali dovrebbero essere racchiusi in un
      • Se hai più di un prodotto / video / notizie / post di blog su una pagina, avvolgi ognuno di essi in un
        elemento.

      Nel suo sondaggio degli utenti dello screen reader, WebAIM ha riscontrato che il 26% degli utenti di screen reader utilizza frequentemente o sempre questi punti di riferimento durante la navigazione di una pagina.

      Inoltre, includendo contenuti discreti in

      aiuta WatchOS di Apple a visualizzare i contenuti in modo ottimale. Vedi il mio articolo Il valore pratico dell’HTML semantico per di più su questo.

      11) Utilizzare HTML in modo corretto

      In breve: comprendere la semantica e i comportamenti predefiniti degli elementi HTML; usa l’elemento giusto per i tuoi contenuti.

      Un tema comune in questo articolo è stato l’utilizzo degli elementi HTML corretti. Usare un etichetta ha un comportamento del browser integrato che focalizza il suo campo di input associato; utilizzando

      è preferibile

      perché consente agli utenti di screen reader di passare direttamente ai contenuti importanti pur essendo assolutamente discreti per coloro che non usano uno screen reader.

      Un altro esempio sta usando a

      Like this post? Please share to your friends:
Adblock
detector
map