Esempi di codice
per siti accessibili

Questa tecnica è utile per migliorare l’accessibilità dei siti WordPress in cui viene usato un Visual Composer, come Elementor e Divi. Basta una classe CSS già pronta all’uso.

Breve analisi del sito UK Parliament per capire come funziona la navigazione con tastiera, utile per chi non può usare il mouse.

È un link che, quando è cliccato, apre una nuova tab o finestra pop-up. I link che escono dal sito includono target blank nel tag html.

Molte persone anziane sono anche ipovedenti e usano il telefono con la funzionalità di ingrandimento del testo. In questo post vediamo alcune tecniche utili e consigli per gestire lo zoom fino al 200% nei siti web accessibili.

Lo scopo dei link può essere determinato dal testo del link da solo o insieme al contesto determinato a livello di codice, tranne nei casi in cui lo scopo dei link è ambiguo in generale.

Gli ARIA roles forniscono significato semantico al contenuto HTML. Consentono agli Screen Reader (e altri strumenti) di interagire con un elemento, in modo che le aspettative riguardo a quel tipo di elemento siano soddisfatte. Più facile da dire che da scrivere. Vediamo alcuni casi.

Mostrare/Nascondere il mobile menu premendo il burger button.
Semplice vero? Potremmo usare un comune script JS per modificare la proprietà display del menu quando clicchiamo il burger button.

È una proprietà CSS che serve per evidenziare link, pulsanti ed elementi interattivi in generale durante i click con mouse e tastiera. Quindi è particolarmente utile durante la navigazione da tastiera perché permette di capire cosa stai cliccando quando scorri la pagina col tasto TAB.

Quando carichi un’immagine sul tuo sito web, puoi scegliere tra 4 dimensioni standard.

Sono 2 metodi pratici per migliorare l’usabilità e quindi l’accessibilità per quante più persone possibili. Sono utili soprattutto per chi usa lo Screen Reader (link di approfondimento nei commenti).