Usabilità e Accessibilità siti web

Regole per un sito accessibile e usabile

Autore: Andrea Pacchiarotti
Ultimo aggiornamento: 06 Maggio 2023
Categoria: Web Marketing Usabilità e Accessibilità siti web

Usabilità e accessibilità servono indirettamente ad aumentare il traffico al sito web e quindi rappresentano fattori che concorrono a migliorare il posizionamento delle pagine. Soddisfare i criteri di usabilità e accessibilità sono inoltre obiettivi del W3C e rappresentano elementi strettamente connessi tra loro e anche con la SEO. E non è finita perché dal 2021 i Core Web Vitals (i cosiddetti segnali necessari per valutare l’usabilità di una pagina web) sono diventati un fattore di ranking per Google. Vediamo dunque come ottimizzare Usabilità e Accessibilità dei siti web per migliorare la SEO.

• Usabilità di questa pagina
• Usabilità e Accessibilità siti web
• Pillole di Usabilità e Accessibilità siti web
• Tool di usabilità e accessibilità

Usabilità di questa pagina

La pagina sulla quale ti trovi soddisfa i criteri di usabilità e accessibilità secondo gli standard correnti.
Ad esempio di default presenta un alto contrasto, una dimensione di testo pari a 18px, un'interlinea 1.5em e un tipo di carattere sans-serif. Inoltre:

• è possibile navigare i link tramite il tasto TAB secondo l'ordine da me deciso
• combinazioni da tastiera (alt+tasto per Google Chrome con Windows) aprono determinati link di navigazione principale:
  • A apre Amazon
  • B l'archivio (Blog)
  • H l'home
  • I Instagram
  • L LinkedIn
  • M la mappa del sito
• in alto a sinistra del documento trovi le diciture:
  • Versione accessibile: carica una diversa versione grafica modificando altresì la dimensione del testo ingrandendola al 150%
  • Versione normale: torna alla versione grafica e alle dimensioni del testo originali

Usabilità e Accessibilità siti web

• Usabilità: consente la navigazione in modo facile e intuitivo
• Accessibilità: consente la navigazione a persone con disabilità o limitazioni di vario tipo
  • ipovisione
  • cecità
  • daltonismo
  • sordità
  • disabilità motorie
  • difficoltà di comprensione
  • difficoltà dipendenti dall'anzianità
  • persone dotate di tecnologie assistive (display braille, screen reader, ingranditori di schermo, dispositivi di input, ecc.)
  • persone in possesso di computer datati

Pillole di Usabilità e Accessibilità siti web

• I bottoni/link come “avanti”, “indietro”, “clicca qui”, “scrivimi” sono da evitare e bisogna usare anchor text descrittive (cioè testo non impersonale che spieghi dove il link porterà, es: “Leggi l’articolo completo”, “Guarda le immagini della premiazione”, pacchiarotti@gmail.com)
• L'uso eccessivo delle tecnologie (es. j-based) va disincentivato per evitare caricamenti lenti, così come va evitato l'uso di linguaggi appena usciti (ad esempio HTML6 e CSS4 andranno adottati solo quando i browser li riconosceranno correttamente, fino a quel momento utilizzare HTML5 e CSS3)  per mancata interpretazione dei comandi da parte dei browser e degli screen reader
• I testi sottolineati vanno evitati se non si tratta di link
• Le breadcrumbs (briciole di pane) vanno implementate almeno dal momento in cui le pagine di un sito web non sono raggiungibili attraverso le sole voci di menu. Si può usare ad esempio una struttura simile alla seguente:
  Link all'Home > Link a una sottopagina dell'home > Titolo della pagina corrente
  ovvero
  Home > Blog > Usabilità e Accessibilità dei siti web (usando l’entità > per il simbolo di maggiore) proprio come mostrato similmente su questa pagina in alto a sinistra
• Va usato l'attributo target _blank (o new) per quei link che puntano al di fuori del sito o per risorse tipo i PDF
• È consigliato mantenere lo stesso template (impaginazione) in CSS per tutto il sito, a meno di pagine particolari (ad esempio l'homepage); non usare le tabelle per impaginare, ma solo per presentare testo o immagini nel corpo della pagina
• Prevedere il link all’home in tutte le pagine
• Occuparsi del Target tocco ovvero dimensionare i bottoni ravvicinati ad almeno 48 pixel e distanziarli un minimo; se misurano meno necessita ulteriore spazio circostante. Lo spazio circostante dev’esserci anche per i link
• Il contenuto principale va above the fold (parte che si vede senza scrollare): ricordare anche che i testi devono essere ricchi (minimo sindacale 3.000 caratteri, circa 500 parole spazi inclusi), pertinenti, unici, aggiornati e interessanti per l’utente
• Prevedere pochi colori, animazioni ed effetti: evitare sfondi troppo colorati o ripetuti; animazioni in loop; gif animate; video e audio che partono in automatico; pop-up e banner di advertising
• Non disabilitare le funzionalità del browser mandando a tutto schermo la pagina con JavaScript, scomparirebbero i tasti “Avanti” e “Indietro”, la barra dell’URL, ecc.
• Evitare siti non crossbrowser: testare il sito web su diversi OS, risoluzioni e browser (è importante la massima fruibilità dei contenuti e non la perfetta corrispondenza grafica)
• Usare i rollover sui link: danno l’impressione che l’interfaccia reagisca immediatamente all’azione dell’utente, costruirli solo con variazione di colore e/o di sottolineatura, non di grassetto, dimensione, carattere. Usare preferibilmente una tonalità blu per il colore dei link dato che fin dalla nascita del web è stato il colore deputato a questo scopo; in ogni caso i link devono essere graficamente diversi dal resto del testo. Inoltre nel menu il link della pagina corrente deve differenziarsi dagli altri della barra di navigazione (colore o sottolineatura o sfondo), bisognerebbe anche far capire all’utente dove è già stato (link di colore diverso in a:visited). Preferire i link testuali ai link immagine. Evitare le regole a{outline:0} o a{outline:none}, che su alcuni browser tolgono il contorno sul focus, dato che è meglio rendere maggiormente visibili gli elementi che lo ricevono
• Creare massimo 7 voci per il menu, oltre l’utenza incomincia a perdersi; in ogni caso si deve poter raggiungere ogni contenuto del sito con non più di 3 clic
• Considerare che sul web la lettura è più stancante di circa il 25% rispetto al cartaceo quindi usare:
  • sempre lo stesso tipo di carattere in tutto il sito per non generare confusione
  • il testo centrato eventualmente solo per i titoli, altrimenti la leggibilità cala del 10%. Il corpo del testo allinearlo a sinistra o giustificarlo, meglio con una spaziatura tra paragrafi e/o indentazione: l’indentazione, la cui regola CSS è text-indent, è elegante, riposa lo sguardo e crea separazione
  • le parole scritte in minuscolo perché il maiuscolo rallenta il processo di riconoscimento e quindi la velocità di lettura
  • caratteri sans serif cioè senza grazie, es. Arial, Verdana e dimensioni almeno di 14px
    
  • elenchi puntati o numerati
  • grassetto solo per sottolineare parole chiave e sue varianti
  • termini non troppo dotti e non dialettali, a meno di precise scelte dovute alla natura del sito
• Tenere i testi aggiornati: scrivere la data di pubblicazione o di ultimo aggiornamento all’inizio dell’articolo; spostare gli articoli che non verranno più aggiornati in una sezione dedicata, es. Archivio, perché se le date sono vecchie la credibilità del sito ne risente
• Implementare una casella di ricerca (ottima quella fornita da Google)
• Richiedere una registrazione solo se necessario
• Rendere facile il reperimento delle informazioni di contatto con un link apposito
• Nella versione mobile, se necessario, usare il trigramma
• Usare id unici, title, alt, contrasti sufficienti, user-scalable=yes nella viewport
• Per i form/moduli:
  • Segnalare i campi obbligatori, es. con un *
  • Spiegare, se complesso, il tipo di dato da inserire nei campi
  • Usare il tag label e placeholder
  • Cercare di non avere form e select molto lunghi
  • Inviare una risposta dopo che l’utente ha inviato il form
  • Evitare il tasto Reset (ovvero Cancella), a volte gli utenti li cliccano per sbaglio al posto del tasto Invia
• Massimizzare il contrasto tra primo piano e sfondo: il testo e il relativo sfondo (compreso il testo contenuto nelle immagini), devono rispettare un preciso rapporto di contrasto di 4,5:1. Controlla attraverso questo sito
• Veicolare le informazioni non unicamente con il colore, es. in rosso le informazioni obbligatorie, perché non tutti potrebbero percepire la differenza di colore per vari motivi: giorno notte, stampa in bianco e nero, videoproiezione, daltonismo; aggiungere quindi un elemento testuale o grafico
• Deve essere possibile rimuovere il limite di tempo di visualizzazione di un oggetto nella pagina, o regolarne la scadenza (es. attenzione a pubblicare un contenuto che scorre come un carousel di notizie)
• Il testo si deve poter ingrandire fino al 200% senza sovrapposizioni di elementi che lo rendano incomprensibile. A tal scopo prevedere un metodo alternativo per la grandezza del testo e per lo switch del contrasto (anche se i browser moderni hanno questa funzionalità bisogna prevederne la fattibilità direttamente nella pagina attraverso JavaScript)
• Inserire l’attributo per l'interpretazione della lingua <html lang="it">
• Inserire i significati espliciti di abbreviazioni e acronimi tramite il tag abbr e l’attributo title <abbr title="Search Engine Optimization">SEO</abbr>
• Inserire:
  • title univoci e pertinenti di 55/60 caratteri, spazi inclusi. Appare come prima linea testuale del risultato dei motori di ricerca
  • meta description univoche di 155/160 caratteri, spazi inclusi. Appare come terza linea testuale (dopo la URL della pagina) del risultato dei motori di ricerca
  • tre meta keyword idonee a rappresentare i contenuti, redigere contenuti originali e canonicalizzati, centrati sui bisogni dell’utente, con un linguaggio il più possibile chiaro e aggiornarli regolarmente
• Per maggiore leggibilità paragrafare il testo della pagina, titolando quando necessario con h1, h2 e h3 per garantire una migliore esperienza utente (UX) sul sito e agevolare il lavoro di scansione dei crawler dei motori di ricerca. Il testo della pagina, nel caso delle notizie, deve rispondere sinteticamente alle 5 domande: chi, dove, quando, perché, come. In generale:
  • Ogni paragrafo deve contenere al massimo 3 frasi
  • Utilizzare liste puntate numerate per elencare concetti costituiti a partire da tre elementi
  • Creare una mission in ogni pagina che sintetizzi in almeno 155/160 caratteri, spazi inclusi (si può quindi copiare dalla description) l’oggetto dell’articolo; se inserita in più pagine, deve essere diversa per ogni pagina
  • Controllare che la pagina sia leggibile tramite l’indice Gulpease
• L'URL di una pagina web, che appare come seconda linea testuale del risultato di ricerca (fra title e description), deve essere semplice:
  • impostare le URL in modo che contengano parole salienti e pertinenti rispetto ai contenuti
  • utilizzare i trattini (-) invece che gli underscore (_)
  • cercare di ridurre il più possibile la lunghezza delle URL
  • usare il file robots.txt per bloccare la scansione da parte dei crawler dei motori di ricerca delle URL non importanti
• Per il contenuto audio deve essere fornita una funzionalità per metterlo in pausa o interromperlo. Per audiolesi inserire sottotitoli nei video
• Immagini:
  • testarle alla ricerca degli attributi alt, width, height e longdesc (non più supportato dai browser) mancanti attraverso questo tool (purtroppo non testa i title). Longdesc (long description) avrebbe dovuto allungare la descrizione di un’immagine in caso alt e title non fossero state sufficienti, creando un link a una pagina con informazioni supplementari:
    <img src="img.png" alt="descrizione" longdesc="descrizione-lunga.html">
    Al suo posto usare il tag figcaption (didascalia) eventualmente con un link a una pagina.
  • Nominare i file immagine in maniera evocativa e pertinente al contenuto della pagina ove sono collocati
  • Usare title con lo stesso testo di alt. Citare la fonte. Salvare le immagini in cartelle apposite, abbassandole di peso (tinypng webp). Inserire i metadati.
    È possibile generare e utilizzare una sitemap XML ad hoc per le immagini e per i video per fornire ai crawler maggiori informazioni rispetto all’organizzazione dei file presenti nel sito: guarda su Google come costruire un file images_sitemap.xml e un file video_sitemap.xml
  • Se l'elemento grafico è decorativo (es. pallino) usare alt="" senza spazi fra gli apici
• Le pagine web non devono contenere nulla che lampeggi per più di tre volte al secondo
• Usare sempre i seguenti tag HTML: h1, h2, h3, p, li, em e strong
• Per le tabelle usare gli attributi summary, caption, th e scope ed evitare la nidificazione e l’unione di celle. Ecco un esempio:
  <table summary="Riepilogo. Sintetizza il contenuto della tabella per aiutarne la comprensione da parte di non vedenti">
  <caption>Didascalia. Inserire un titolo significativo nella tabella di dati</caption>
  <tr>
  <th scope="col">Intestazione</th> scope specifica se una cella d’intestazione è un’intestazione per una colonna o una riga
  <th scope="col">Intestazione</th>
  </tr>
  <tr>
  <td>HTML</td>
  <td>CSS</td>
  </tr>
  </table>
• Link e controlli modulo: tutti i componenti dell’interfaccia si devono poter utilizzare tramite comandi da tastiera analogamente a quanto si riesce a fare col mouse e quindi:
  • adoperare nel tag a l'attributo tabindex=”1” (anche sui form)
  • adoperare nel tag a l'attributo accesskey=”A” accesso alle pagine alternativo al mouse, è possibile attivare i link mediante combinazioni da tastiera (farlo solo per la navigazione principale)
    Ecco un esempio per i due attributi citati:
    <a href=”https://www.miosito.it” title=”Vai sul sito www.miosito.it” tabindex=”1” accesskey=”H”>Home</a>
    <a href=”https://www.miosito.it” title=”Vai agli articoli del sito www.miosito.it” tabindex=”2” accesskey=”A”>Articoli</a>
    <a href=”https://www.miosito.it” title=”Vai ai contatti del sito www.miosito.it” tabindex=”3”>Contatti</a>
    Poi spiegare all'utente l'uso di accesskey come fa il sito della biblioteca nazionale italiana
  • evitare l'attributo autofocus
• Nella progettazione di un contenuto web, considerare che le persone spesso utilizzano il mobile anche quando hanno la possibilità di navigare tramite desktop; quindi, nella gestione dei contenuti da mobile, verificare se sia possibile eliminare il contenuto superfluo
• Creare una mappa.html destinata agli utenti, e un file sitemap.xml destinato ai motori di ricerca
• Aggiungere il markup con dati strutturati
• Impostare un metodo per stampare l’articolo (da icona o link) senza animazioni, barre dei link, ecc., ciò è fattibile in due modi:
  • con i CSS <link rel="stylesheet" href="stampa.css" media="print"> per le regole di stampa, in aggiunta a <link rel="stylesheet" href="schermo.css" media="screen"> per le regole del foglio di stile normale
  • creando da Word un .pdf che, tra l'altro, è possile posizionare nei motori di ricerca, costruendo il documento da Word e poi salvandolo come .pdf

Tool di usabilità e accessibilità

Strumenti utili a testare usabilità e accessibilità dei siti web:

• aXe è un’estensione per Chrome che analizza l’usabilità di un sito. Tasto destro del mouse sul sito da testare, scegliere Ispeziona, si apre il pannello per gli sviluppatori, nel menu in alto selezionare aXe (ultima tab sulla destra) e poi Analyze
• www.cynthiasays.com testa accessibilità e controlla dove ci sono errori di riga
• Colorblind Web Page Filter testa come i daltonici vedono le pagine

I tool appena elencati vanno ad aggiungersi a quelli già descritti all'interno dell'articolo.

Se vuoi informarti meglio sui questi problemi leggi l'articolo sull'Accessibilità e anche sull'Usabilità.

Se Usabilità e Accessibilità dei siti web per migliorare la SEO ti è piaciuto, condividilo!