Le richieste per il web design includono sempre più una migliore accessibilità al web. Ma l'ottimizzazione del sito per tutti i principali browser con compatibilità con più dispositivi non è sufficiente? Puoi misurare facilmente le prestazioni, l'accessibilità, le best practice e la SEO del tuo sito web utilizzando Google Lighthouse. Allora perché l'accessibilità è importante?

Secondo il CDC (Centers for Disease Control and Prevention), oltre 60 milioni di americani vivono con una disabilità. Seguendo le Linee guida per l'accessibilità dei contenuti Web, è possibile introdurre alcune considerazioni preliminari che contribuiranno a rendere accessibile un sito Web. Ecco tutto ciò di cui hai bisogno per iniziare con l'accessibilità web utilizzando HTML e CSS.

HTML strutturato con semantica adeguata

Pur rendendo il sito Web visivamente accattivante, gli utenti della tecnologia assistiva non dovrebbero confondersi. Sebbene molti sistemi di gestione dei contenuti come WordPress applichino l'HTML, è tua responsabilità ricontrollare e confermare che sia applicato correttamente.

Ad esempio, a

Leggi di più: Semplici esempi di codice HTML che puoi imparare in 10 minuti

L'HTML semantico è più facile da sviluppare poiché otterrai funzionalità aggiuntive insieme ad esso. Funziona benissimo sul cellulare. Inoltre, quando dai importanza alle parole chiave racchiuse all'interno

o tag, aiuta nella SEO.

Contenuto strutturato per utenti di lettori di schermo

Ecco un esempio di HTML semantico buono vs. Cattivo.

Buon HTML semantico
Il mio titolo

Ecco come creare un sito Web accessibile utilizzando HTML e CSS

La mia seconda rubrica

HTML semantico errato
Il mio titolo

Ecco come creare un sito Web accessibile utilizzando HTML e CSS

Il primo caso è abbastanza facile da navigare per gli screen reader. Leggerà l'intestazione notificando l'intestazione e il paragrafo. Si fermerà per un secondo dopo ogni elemento. Puoi saltare alcuni titoli o tornare al precedente usando Invio/Invio. Puoi anche formare un sommario usando il tag di intestazione.

Quando si scrive HTML di presentazione anziché HTML semantico (nel secondo caso), la riga si interrompe inutilmente e si traduce in un'esperienza negativa. È come preparare un blocco gigante che è molto più difficile da sovrapporre e manipolare poiché non ci sono potenziali selettori.

Lingua e layout per un sito Web accessibile

Dovresti usare un linguaggio preciso con acronimi e abbreviazioni espansi. Se possibile, cerca di evitare i trattini scrivendo 9-5 -> 9 to 5. In precedenza le tabelle HTML venivano utilizzate per creare i layout di pagina. In passato ostacolava le letture corrette a causa di tabelle nidificate che formavano un layout piuttosto complesso. Ecco una moderna struttura del sito web:

Questa è un'intestazione



Contenuto della pagina principale

contenente articolo

Titolo dell'articolo

contenuto dell'articolo



Piè di pagina del sito web

Quindi, come puoi vedere, questo layout è compatibile con lo screen reader. Il markup è comprensibile con un codice chiaro e conciso. Inoltre, è facile da mantenere e richiede meno larghezza di banda durante il download. Assicurati di aver inserito il codice sorgente in modo logico; farà la differenza.

Riconsiderare i controlli dell'interfaccia utente, le tabelle e il testo alternativo

Più comunemente, i controlli dell'interfaccia utente sono pulsanti, moduli e controlli di collegamento del documento Web. La regola generale è che possono essere manipolati dalla tastiera. Hanno uno stile predefinito (può differire nei diversi browser) in cui puoi passare ad altre opzioni utilizzando il tasto tab e premere Invio/Invio per raggiungere una conclusione. Puoi gestire le etichette di testo aggiungendo testi di ancoraggio distintivi e significativi invece di "fai clic qui".

Per creare tabelle accessibili, aggiungi intestazioni di tabella

e specificare le righe o le colonne utilizzando l'attributo scope. Inoltre, puoi utilizzare il o attributo di riepilogo per fornire agli screen reader una rapida panoramica del contenuto della tabella.

Il testo alternativo fornisce le informazioni contestuali dell'immagine o del video ai crawler Web e agli screen reader. Se la tua immagine è a scopo decorativo, è meglio lasciare vuoto il tag alt. Altrimenti, dare una descrizione dettagliata dell'immagine aiuta molto.

Nella maggior parte dei casi, lo screen reader leggerà il testo alternativo, il nome del file e l'attributo del titolo (puoi saltarlo). Inoltre, se non desideri utilizzare il testo alternativo o desideri aggiungere la stessa etichetta a più immagini, ecco un suggerimento rapido:

Un fiore rosso...

Hai usato l'attributo aria-labelledby per fare riferimento a quell'id. Consentirà agli screen reader di utilizzare il testo alternativo sotto forma di quel paragrafo.

CSS standard per una migliore accessibilità

Lo stile delle funzionalità della pagina accessibile significa che il tuo design dovrebbe comportarsi in base al contenuto principale della pagina. Ad esempio, per a

,

, e

elemento, un tipico CSS dovrebbe essere:

h1 {
dimensione del carattere: 4rem;
}
p, li {
dimensione del carattere: 1.5rem;
colore blu;
}

La dimensione del carattere, la spaziatura delle lettere, la famiglia di caratteri, ecc. Dovrebbero aiutare in una lettura confortevole. I titoli dovrebbero distinguersi dal corpo del testo (anche lo stile predefinito è buono). Inoltre, il testo dovrebbe avere un colore contrastante rispetto al sfondo selezionato con CSS.

Stile di testo, collegamenti ed etichette

Le micro interazioni sono possibili con un CSS accessibile. Può essere piccolo come enfatizzare il testo per evidenziare i collegamenti in modo corretto. Puoi usare il e etichetta distintamente. Puoi aggiungere una sottolineatura tratteggiata usando il elemento.

Il collegamento standard dovrebbe essere sottolineato con un colore predefinito: blu e un collegamento precedentemente visitato con un colore predefinito: viola (è possibile personalizzarlo).

un {
colore: #ff0000;
}
a: attivo {
colore: #000000;
colore di sfondo: #a60000;
}
a: hover, a: visitato, a: focus {
colore: #a60000;
decorazione del testo: nessuna;
}

Quindi, con un cambiamento nel puntatore del mouse, dovresti evidenziare il testo focalizzato. Il cursore puntatore e la struttura svolgono un ruolo importante nell'accessibilità del web.

Usa i CSS per dare un aspetto pulito agli elementi e alle etichette del modulo. Inoltre, decidi gli stati focus/hover che sono coerenti nella maggior parte dei browser. Ricorda che questi piccoli suggerimenti aiutano le persone a capire la tua pagina web.

Contrasto colore e valori nascosti

Regola la combinazione di colori del sito Web in modo che il colore di primo piano (testo/immagine) contrasti con il colore di sfondo principalmente perché è più difficile per le persone con disabilità visive (ad esempio daltonismo) leggere il contenuto correttamente. Puoi usare Controllo del contrasto di colore per ottenere uno schema di colori decente secondo i criteri WCAG. Inoltre, prova ad aggiungere segni di markup (come un asterisco) insieme ad avvertimenti o termini e condizioni (non solo un avviso rosso).

I lettori dello schermo non hanno nulla di cui preoccuparsi finché l'ordine del codice sorgente non viene scritto in modo decente. Cerca di evitare di utilizzare display: nessuno o visibilità: proprietà nascoste poiché nascondono il contenuto agli screen reader.

Rendi facile l'override dello stile

Il punto chiave è che non importa quanto bene si progetta il sito, gli utenti hanno vari motivi per ignorare lo stile. Ad esempio, forse alcuni vogliono una dimensione del testo più grande o vogliono cambiare il testo e il colore di sfondo per la leggibilità. Quindi la tua area di contenuto dovrebbe essere in grado di gestirlo completamente.

Riepilogo: Combina HTML e CSS

Ora conosci le basi per iniziare con l'HTML semantico e scrivere un codice sorgente sensato nell'ordine giusto per un sito Web accessibile. Concentrati sull'HTML e passa alla creazione di un CSS accessibile una volta terminato.

Utilizzando le tecniche di cui sopra, puoi migliorare l'esperienza dell'utente e servire un pubblico meraviglioso. Quindi, inizia a creare siti Web reattivi e accessibili.

Come creare un sito Web: per principianti

Oggi ti guiderò attraverso il processo di creazione di un sito Web completo da zero. Non preoccuparti se sembra difficile. Ti guiderò in ogni fase del percorso.

Leggi Avanti

Circa l'autore

Espandi per leggere la storia completa