Creare contenuti accessibili per il sito

Suggerimenti per creare contenuti chiari e concisi per il tuo sito.

Ultimo aggiornamento 17 luglio 2024

Quando si creano i contenuti di un sito, è importante considerare l'accessibilità. Questo include il linguaggio utilizzato, la struttura del testo e il modo in cui si organizzano i contenuti del sito.

Questa guida fornisce suggerimenti su come creare contenuti e organizzare il sito nel rispetto dell'accessibilità.

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 materia di accessibilità.

Linguaggio chiaro e conciso

Un testo ben organizzato, breve e chiaro è utile per tutti i visitatori, soprattutto per quelli con disabilità. Quando scrivi il testo per il tuo sito, prendi in considerazione questi suggerimenti:

  • Utilizza un linguaggio e una formattazione chiari.
  • Scrivi frasi e paragrafi concisi.
  • Evita di usare gergo tecnico e parole o frasi inutilmente complesse.
  • Espandi gli acronimi al primo utilizzo. Ad esempio, Dominio di Primo Livello (TLD).
  • Utilizza gli elenchi puntati quando è opportuno.
  • Prova a utilizzare immagini, video, e audio per aiutare a chiarire il significato.

Titoli

La prima cosa che gli screen reader comunicano quando i visitatori accedono a una nuova pagina web è il titolo. Se la pagina ha un  titolo SEO, gli screen reader lo leggeranno e ignoreranno il titolo della pagina. Se una pagina non ha un titolo SEO, gli screen reader leggono il titolo della pagina.

Fornire un titolo di pagina breve, specifico e unico aiuta gli utenti che navigano tramite tecnologie assistive a comprendere rapidamente il contenuto e lo scopo di una pagina web.

Procedure ottimali per i titoli

Quando scrivi i titoli, tieni a mente quanto segue:

  • Presenta l'argomento e lo scopo della pagina.
  • Il titolo di ogni pagina deve essere univoco e differenziare la pagina dalle altre pagine del tuo sito.
  • Metti al primo posto le informazioni uniche e più rilevanti. Ad esempio, "Guida all'accessibilità" invece di "Una guida a riguardo dell'accessibilità".
  • Per le pagine che fanno parte di un processo a più fasi, includi la fase attuale nel titolo della. Ad esempio, "Scegli il colore del tuo prodotto (fase 2 di 3) - azienda ABC".

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. I motori di ricerca utilizzano anche le intestazioni per comprendere meglio i contenuti, quindi le intestazioni sono un ottimo modo per dare al tuo sito una spinta nella SEO.

Fai
  • Utilizza le intestazioni in base all'importanza del testo. Ad esempio, utilizza Intestazione 1 (H1) per le intestazioni più importanti.
  • Creare un titolo/intestazione 1 per pagina.
  • Utilizza intestazioni brevi per raggruppare i paragrafi correlati e descrivere chiaramente le sezioni.
  • Utilizza la barra degli strumenti di testo per formattare il testo come intestazione.
Da non fare
  • Utilizzare intestazioni fuori sequenza. Le opzioni per le intestazioni vanno da H1 a H6 e gli screen reader li leggono in ordine.
  • Affidarti al testo incorporato nelle immagini per trasmetterne il significato a meno che tu non decida anche di aggiungere testo alt.
  • Affidarti al grassetto, al corsivo o ad altre formattazioni di progettazione per creare una struttura.
  • Utilizzare intestazioni vuote solo per formattare il testo. Questo rende la struttura della pagina confusa e meno comprensibile. 
  • Formattare il testo in modo che assomigli a un'intestazione anche se non è previsto che lo sia. Ciò potrebbe confondere i visitatori e impedire a coloro che utilizzano la tecnologia assistiva di navigare rapidamente nel tuo sito. 

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

Descrivi chiaramente lo scopo di ciascun link nel testo del link, in modo che i visitatori che utilizzano la tecnologia assistiva possano 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 "Per contattarci, visita la nostra pagina contatti."
Da non fare "Per contattarci, clicca qui."

Elenchi

Organizza il layout del tuo testo utilizzando elenchi e intestazioni. L'utilizzo di elenchi è utile per mostrare la relazione tra elementi di contenuto, come un gruppo di link o una serie di esempi. La formattazione del testo utilizzando elenchi:

  • Semplifica la navigazione tra i tuoi contenuti.
  • Aiuta i visitatori con disabilità cognitive a comprendere i tuoi contenuti.
Fai
  • Usa degli elenchi numerati quando l'ordine del contenuto è importante.
Da non fare
  • Utilizza gli elenchi per contenuti diversi dall'elenco, ad esempio tabelle di dati o solo per motivi di stile.

Spaziatura

Assicurati che il testo abbia un'interlinea adeguata. In questo modo, i visitatori possono regolarla 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.

Colori

È possibile personalizzare i colori del sito utilizzando Stili sito. Tuttavia, evita di affidarti esclusivamente al colore per trasmettere informazioni ai tuoi visitatori. È possibile che le differenze di colore vengano ignorate dalle persone ipovedenti o affette da alterazioni del senso cromatico (discromatopsia). Inoltre, il colore da solo non trasmette il significato ai visitatori non vedenti che utilizzano gli screen reader.

Puoi utilizzare gli Strumenti per sviluppatori di Google Chrome o l'Accessibility Inspector di Firefox per simulare il modo in cui le tue pagine appaiono agli utenti con le più comuni anomalie della percezione cromatica.

Nota

questi sono strumenti di terze parti che non rientrano nell'ambito dell'assistenza Squarespace.

Fai Raggruppa i colori ad alto contrasto.
Da non fare Abbinare colori difficili da differenziare, come il blu e il viola.

Moduli

I moduli possono rappresentare una sfida per alcuni visitatori. È importante assicurarsi che ogni campo sia chiaramente etichettato e che il modulo sia facile da navigare. Utilizza un blocco di testo per includere brevi istruzioni che informino i visitatori esattamente su ciò che devono sapere per completare correttamente il modulo.

È possibile includere dei segnaposto con il testo che appare nei campi del modulo come esempio per i visitatori. In questo modo, i visitatori avranno un'idea più precisa di come devono compilarlo. Tieni presente che il testo segnaposto non deve sostituire il testo dell'etichetta. Per maggiori informazioni sul testo segnaposto, puoi consultare il nostro forum.

Nota

le personalizzazioni basate su codice non rientrano nell'ambito del nostro supporto. Ciò significa che non possiamo fornire ulteriore assistenza in relazione alla configurazione o alla risoluzione dei problemi. Inoltre, non possiamo garantire la funzionalità o la completa compatibilità del codice inserito con Squarespace. Ciò include il modo in cui funziona con il nostro design reattivo, soprattutto relativamente all'aspetto sui dispositivi mobili e al funzionamento su tutti i modelli. Il codice personalizzato potrebbe causare problemi di visualizzazione con i futuri aggiornamenti della nostra piattaforma. Pur non potendo offrire ulteriore assistenza, esistono diverse risorse per indicarti la giusta direzione da seguire:

Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.

Creare contenuti accessibili per il sito