Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Rendere più accessibile il tuo sito Squarespace

I siti Web accessibili permettono alle persone con disabilità un utilizzo più agevole tramite screen reader e altre tecnologie assistive. Puoi personalizzare molti aspetti del tuo sito per semplificarne la navigazione.

Utilizza questa guida per scoprire le procedure consigliate per progettare e strutturare i tuoi contenuti.

Nota: questa guida è disponibile come risorsa per aiutarti a iniziare, ma non deve essere interpretata o considerata come una consulenza legale. Squarespace non può fornire consigli su come rendere il tuo sito conforme a leggi, regolamenti o standard specifici in maniera di accessibilità.

Titoli delle pagine

La prima cosa che gli screen reader comunicano quando gli utenti visitano una nuova pagina Web è il suo titolo. Poiché i titoli delle pagine sono importanti per orientarsi nella navigazione, assicurati che ogni pagina abbia un titolo che ne introduca l'argomento o lo scopo e la differenzi dalle altre pagine del sito.

Testo

Intestazioni

Gli screen reader utilizzano il codice HTML anziché elementi visivi per comprendere la struttura di una pagina. I visitatori che utilizzano uno screen reader possono navigare più facilmente tra le pagine quando ogni sezione della pagina ha un'intestazione. Utilizza la barra degli strumenti di testo per formattare il testo come intestazione.

Per maggiori informazioni sulla struttura delle pagine e sulle intestazioni, visita la Web Accessibility Initiative.

Fai
  • Utilizza le intestazioni in base all'importanza del testo. Per esempio, utilizza Intestazione 1 (h1) per le intestazioni più importanti.
Don't
  • Affidati al testo incorporato nelle immagini per trasmetterne il significato a meno che tu non decida anche di aggiungere testo alt.
  • Rely on bolding, italics, or other design formatting to create structure.

Link

Assicurati che i tuoi visitatori possano individuare lo scopo di ogni link basandosi esclusivamente sul suo testo. Questa formattazione aiuta gli utilizzatori di screen reader che potrebbero voler passare da un link all'altro senza perdere il contesto. Formattare correttamente i link contribuisce anche a migliorare la SEO. Non è necessario includere la parola link nel testo del link. La maggior parte degli screen reader annuncia link quando ne trova uno. Ad esempio:

Fai “To reach out, visit our contact page.”
Don't

«Per contattarci, fai clic qui

Spaziatura

Assicurati che il testo abbia un'interlinea adeguata. In questo modo i visitatori possono regolare l'interlinea in base alle loro esigenze per migliorare l'esperienza di lettura, se necessario. Puoi controllare la spaziatura tra lettere e l'altezza riga in Stili sito.

Immagini

Internet è un mezzo visivo e le immagini possono svolgere un ruolo significativo nella presentazione del tuo sito. Assicurati che le tue immagini siano accessibili ai visitatori, indipendentemente dalle loro abilità. È importante non tralasciare elementi come il testo alt e la formattazione di immagini o .gif animate.

Testo alternativo

Durante la scansione di una pagina, gli screen reader identificano le immagini e leggono il testo descrittivo (testo alt) ai visitatori. Quando aggiungi testo alt, rifletti sul motivo principale per cui hai usato l'immagine. Ad esempio, serve a trasmettere informazioni o è decorativa? Cosa devono sapere sull'immagine i visitatori con disabilità visiva per accedere a tutte le informazioni disponibili per i visitatori normovedenti?

Una buona prassi consiste nel descrivere brevemente l'immagine come faresti parlando con un amico al telefono. Le immagini puramente decorative, come la grafica che separa i contenuti o le immagini di sfondo astratte, non richiedono descrizioni.

Fai
  • Considera lo scopo dell'immagine e cerca di trasmettere questo significato in 125 caratteri o meno.
  • Se l'immagine ha un URL di click-through o qualsiasi altro scopo funzionale, descrivi la funzione. Ad esempio, il testo alt per l'immagine di una coppia di fidanzati sorridenti collegata a una pagina con foto di fidanzamento potrebbe essere Coppia di fidanzati sorridenti. Link a foto di fidanzamento.
  • Per le immagini che richiedono descrizioni dettagliate, come grafici, diagrammi o rappresentazioni grafiche complesse, includi una descrizione dell'immagine nelle vicinanze, all'interno del testo del sito. In alternativa, puoi aggiungere una pagina separata contenente una descrizione dell'immagine, quindi aggiungere un URL di click-through che conduca dall'immagine a quella pagina.
Don't
  • Includi frasi come "immagine di" o "foto di" nel testo alt. Le tecnologie assistive le identificano automaticamente come immagini.

File .gif animati

Puoi aggiungere immagini animate o .gif alla maggior parte delle aree del tuo sito. Assicurati che i file .gif animati non lampeggino tre o più volte al secondo. È noto che questo tipo di contenuto può causare crisi epilettiche o reazioni fisiche.

Suggerimento: se il tuo sito è nella versione 7.1, i visitatori possono disattivare alcune funzionalità animate tramite le impostazioni del dispositivo. In questo modo, visualizzeranno meno movimento quando visitano il tuo sito. Ad esempio, se un utente Mac sceglie di ridurre il movimento dello schermo sul proprio dispositivo, le animazioni abilitate per gli effetti immagine di sfondo o Scenographik non appariranno animate per quel visitatore.

Colori

Evita di basarti esclusivamente sui colori per trasmettere informazioni ai visitatori. Le differenze di colore possono sfuggire alle persone ipovedenti o con anomalie della percezione cromatica, e il colore da solo non comunica nulla di significativo ai visitatori non vedenti che utilizzano screen reader. Per modificare i colori del sito, usa Stili sito.

Puoi utilizzare gli Strumenti per sviluppatori di Google Chrome o l'Indicatore dei servizi per l'accessibilità di Firefox per simulare il modo in cui le tue pagine appaiono agli utenti con le più comuni anomalie della percezione cromatica. Questi sono strumenti di terze parti che non rientrano nell'ambito dell'assistenza Squarespace.

Fai
  • Group colors with high contrast.
Don't
  • Abbinare colori difficili da differenziare, come il blu e il viola.

Video

Quando aggiungi video al tuo sito, tieni a mente questi suggerimenti:

  • Aggiungi didascalie sincronizzate utilizzando le funzionalità integrate di sottotitolazione per YouTube e Vimeo. In questo modo, gli utenti possono abilitare o disabilitare le didascalie nel Blocco video. Visita YouTube e Vimeo per maggiori informazioni sull'aggiunta di didascalie.
  • Aggiungi non più di due video di sfondo per pagina. Un eccesso di movimento può provocare effetti indesiderati nelle persone con sensibilità al movimento.
  • Evita contenuti video che lampeggiano tre o più volte al secondo.

Audio

Puoi aiutare i visitatori con deficit uditivi ad accedere ai tuoi contenuti audio, come i podcast, aggiungendo una trascrizione. Per mantenere le pagine organizzate, puoi includere le trascrizioni nelle pagine non collegate.

Domande frequenti

Is my site accessible?

I requisiti di accessibilità variano a livello internazionale. Sei responsabile della conformità del tuo sito alle leggi applicabili, inclusi i requisiti locali in materia di accessibilità. Un modo per comprendere l'accessibilità del tuo sito e identificare le aree di miglioramento è consultare uno specialista in materia. Puoi anche esaminare questa checklist preliminare per l'accessibilità Web. L'assistenza clienti Squarespace non può fornire consulenza su come rendere il tuo sito conforme a leggi o atti specifici sull'accessibilità.

Is Squarespace working to improve accessibility?

Sì. Squarespace prende molto sul serio l'accessibilità. Cerchiamo sempre di migliorare e stiamo lavorando in tal senso. Ci impegniamo a rendere i nostri servizi più accessibili a tutti gli utenti, indipendentemente dalle loro abilità. Stiamo esaminando i nostri servizi per migliorare l'esperienza utente e per aiutare i nostri clienti a realizzare siti accessibili.

È possibile personalizzare la cornice intorno all'elemento focus?

No. I siti Squarespace in versione 7.1 dispongono di una funzionalità integrata che evidenzia con una cornice gli elementi focus di una pagina, come i link di navigazione e i campi modulo, ma questa cornice è standard per tutti i siti e le pagine. Non è possibile personalizzare il colore o lo spessore della linea. La cornice appare quando i visitatori del sito premono TAB sulla tastiera. La prima volta che premi TAB, viene visualizzato il messaggio Vai al contenuto. Premi la barra spaziatrice per saltare l'intestazione e la navigazione del sito e passare direttamente al contenuto o continua a premere TAB per accedere ad altri contenuti. 

Navigazione nell'intestazione di pagina con cornice intorno a un elemento del menu

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 221 su 274
Rendere più accessibile il tuo sito Squarespace