5 accorgimenti per rendere il tuo sito accessibile

Rendere un sito web fruibile alla maggior parte degli utenti: ecco come ottimizzare la struttura

Rendere un sito web fruibile alla maggior parte degli utenti non è solo una norma del buon senso, ma produce degli effetti economici estremamente positivi.

Ormai anche i non vedenti o ipovedenti possono utilizzare internet utilizzando gli screen readers e avere un sito inaccessibile significa anche perdere potenziali utenti/clienti.

Per questo possiamo con solo 5 azioni sul codice migliorare la fruibilità delle pagine web.

Vediamo quali sono:

  1. Ottimizzare immagini e links

Ogni attributo <img> deve contenere un Alt nel quale viene indicato cosa raffigura l’immagine.

tag alt

Il SEO ci insegna che è buona pratica nominare le immagini con parole che ne descrivono il contenuto, nel caso di più stringhe, esse vengono separate da un

Nei link invece si inserisce il Tag “title” che ha la stessa funzione: descrivere la conseguenza del click.

Nota: nel caso di un aggregato come quello seguente, si puo’ decidere di omettere il Tag title del link in quanto, si è già spiegato il significato dell’elemento nell’altdell’immagine. Sarebbe solo una ripetizione!

tag title

Nel caso necessiti invece di una lunga descrizione testuale di una immagine, puoi utilizzare l’attributo <longdesc> seguito dalla pagina di riferimento.

Alt e Longdesc coesistono!

Esempio:

long desc

  1. Le abbrevizioni devono essere spiegate!

Esempio:

abbr

Come potete notare tramite l’attibuto <abbr title=””> abbiamo spiegato per cosa sta l’acronimo SEO.

  1. Strutturare gli elementi di un form

Utilizzando l’attributo <label for=””> e l’ID associato si crea una corrispondenza univoca tra l’etichetta e l’elemento del form.

Esempio:

codice form html

  1. Accorgimenti sui Tag Html

Secondo gli esperti di accessibilità i Tag <b> (grassetto) e <i> (corsivo) devono essere rispettivamente sostituiti con <strong > e <em>.

Per le citazioni si devono utilizzare i seguenti Tag:

<cite>, quando ci si riferisce al nome di un’opera;

<blockquote>, quando si riporta un pezzo di uno scritto.

Nel caso in cui la citazione è scritta in una lingua diversa da quella dichiarata nell’ <head>, è necessario aggiungere xml:lang seguito dall’abbreviazione della lingua usata.

Esempio: Se nell’ head ho dichiarato che il documento è scritto in lingua italiana, e, devo aggiungere una citazione in inglese, la sintassi da rispettare è la seguente:

block quote

  1. Ottimizzare la grafica per gli IPOVEDENTI.
  1. Le dimensioni del testo devo oscillare tra 14 e 24 pt.
  2. Il font consigliato, perchè facilmente leggibile è Arial.
  3. Utilizzare il grassetto e il corsivo per singole parole, l’uso continuato puo’ provocare fatica nel leggere lettere come (g, j, p, q e y);
  4. E’ consigliato utilizzare l’allineamento a sinistra.
  5. E’ preferibile utilizzare sfondi chiari e tenui con testo scuro.

Seguendo questi punti semplici e veloci otterrete un vantaggio competitivo rispetto agli altri siti e, noterete anche nel lungo periodo una piccola variazione positiva del vostro posizionamento sui motori di ricerca, poiché le tecniche di accessibilità sono particolarmente apprezzate dagli spiders.

× Possiamo aiutarti?
Vai alla barra degli strumenti