Gestore contenuti: linee guida per l'accessibilità

Implementa le linee guida per l'accessibilità nel Gestore contenuti per rendere il tuo sito utilizzabile da tutti i visitatori, inclusi coloro che si affidano alle tecnologie assistive. Queste linee guida includono l'aggiunta di nomi accessibili ai tasti, l'utilizzo di un testo alternativo efficace per tutti i contenuti multimediali e il posizionamento di elementi in sezioni o contenitori con attributi ARIA. Usa queste linee guida per aiutare tutti a navigare e interagire con i tuoi contenuti più facilmente.

L'alt text è essenziale per fornire un contesto a immagini, video e forme vettoriali. Quando scrivi l'alt text, descrivi i contenuti multimediali in modo chiaro e conciso, come se l'IA o gli screen reader li interpretassero. Mantieni l'alt text inferiore a 125 caratteri ed evita frasi come "immagine di". Per indicazioni più dettagliate su come scrivere un alt text efficace, vedi Accessibilità: preparare immagini e gallerie.

Ti consigliamo di creare un campo di testo nella raccolta del Gestore contenuti da utilizzare come testo alternativo per ogni elemento multimediale. Per mantenere la tua raccolta organizzata, posiziona questo campo accanto al campo multimediale che rappresenta e assegnagli un nome chiaro, ad esempio "Alt text [nome immagine/galleria]".

Per gli elementi video, la proprietà alt text è chiamata Descrizione video nel pannello Collegamenti del dataset. Per le immagini vettoriali o le forme, utilizza l'opzione  L'alt text si collega a. Per le immagini di sfondo in sezioni, strisce, colonne o elementi della lista dinamica (solo Editor Wix), utilizza L'alt text di sfondo si collega a.

Le immagini decorative e i contenuti multimediali che non trasmettono contenuti significativi possono avere il loro testo alternativo lasciato vuoto. Ciò consente agli screen reader di saltarli e riduce le distrazioni.

Quando aggiungi immagini non decorative al tuo Gestore contenuti, è fondamentale fornire un alt text descrittivo. Ti consigliamo di aggiungere un tipo di campo "Testo" separato nella raccolta del Gestore contenuti che rappresenti l'alt text delle immagini. Concentrati sull'utilizzo di un linguaggio specifico e descrittivo nell'alt text. Ad esempio, invece di scrivere l'alt text "una donna", usa "una donna che pianta margherite in giardino". 

Quando colleghi l'immagine nell'Editor al dataset, clicca sul campo Alt text collega a e seleziona il campo alt text che hai creato. Ciò consente agli screen reader di descrivere l'immagine e il suo scopo, rendendo il tuo sito più inclusivo. 

Le immagini decorative in genere non trasmettono contenuti significativi e non richiedono l'alt text. Se un'immagine ha uno scopo puramente decorativo, puoi lasciare l'alt text scollegato nel dataset. Questo aiuta gli screen reader a saltare l'immagine, evitando inutili distrazioni.

Se un link immagine si collega a un'azione del dataset, ad esempio aprendo la pagina dinamica elemento, il suo alt text dovrebbe descrivere l'azione, non solo l'immagine stessa. Ad esempio, se il clic su un'immagine porta i visitatori a una pagina del profilo, l'alt text potrebbe essere "Scopri di più su Willis McSmoot". 

Con le espressioni, puoi combinare testo statico (es. "Scopri di più su") con valori dinamici dei campi della raccolta (ad esempio "Willis McSmoot") per garantire che l'alt text cambi in base all'immagine. In questo modo, i visitatori possono capire lo scopo dell'immagine quando utilizzano le tecnologie assistive. 

Per le gallerie che si collegano ai tipi di campo "Immagine", è importante fornire l'alt text per ogni immagine. Crea un tipo di campo "Testo" separato nella raccolta del Gestore contenuti, specifico per l'alt text delle immagini. Quando colleghi la galleria al dataset, collega il menu a tendina  Alt text collega a a al campo alt text corrispondente. Ciò garantisce che gli screen reader possano fornire descrizioni delle immagini all'interno della galleria, migliorando l'accessibilità.

Collegare una galleria al campo "Galleria multimediale" è un ottimo modo per mostrare numerose immagini o video su un elemento su una pagina dinamica elemento. Quando lo fai, aggiungi l'alt text di ogni file multimediale direttamente all'interno del campo "Galleria multimediale" nella tua raccolta. Clicca sul campo "Galleria multimediale" accanto all'elemento pertinente nella tua raccolta per aggiungere un alt text a ogni file multimediale. Lì, puoi anche inserire il titolo e la descrizione di ogni file. Ciò consente agli screen reader di comunicare il contesto sia per le immagini che per i video, assicurando che tutti i contenuti multimediali della galleria siano accessibili.

Puoi aggiungere nomi accessibili ai tasti che si collegano al Gestore contenuti. I nomi accessibili funzionano come l'alt text, ma sono specifici dei tasti. Aiutano gli screen reader a descrivere cosa fa il tasto o dove porta. L'aggiunta di nomi accessibili ai tasti migliora l'accessibilità del sito e aiuta tutti i visitatori a navigare tra i tuoi contenuti più facilmente.

Quando colleghi un tasto al dataset, utilizza il menu a tendina Nome accessibile si collega a per collegare il nome accessibile a un campo "Testo" nella raccolta. Questo campo dovrebbe descrivere l'azione o la destinazione del tasto in modo chiaro e conciso.

Ad esempio, invece di un nome generico come "Clicca qui", utilizza "Scopri di più sui nostri servizi" o "Invia la tua richiesta". 

Se necessario, puoi utilizzare le espressioni per combinare il testo statico con i valori dei campi della raccolta. In questo modo, gli screen reader forniscono descrizioni significative per ogni tasto in base al contenuto. Ad esempio, puoi creare un nome accessibile come:

Quando aggiungi un tasto "Carica altro" nell'Editor Studio, tieni tutto ciò che è posizionato sotto la lista dinamica o la galleria in una sezione separata. Se inserisci elementi nella stessa sezione della lista dinamica o della galleria e direttamente sotto la lista dinamica o la galleria, gli elementi si sovrapporranno quando si clicca sul tasto "Carica altro". Questa sovrapposizione può creare confusione tra i visitatori in quanto ostacola visibilità e accessibilità.

Per evitare questo problema, assicurati sempre che tutti gli elementi che desideri posizionare sotto la lista dinamica o la galleria, incluso il tasto "Carica altro", siano collegati a una sezione separata. In questo modo, quando gli utenti cliccano sul tasto "Carica altro", la galleria o la lista dinamica si espande in modo appropriato senza sovrapposizioni, offrendo un'esperienza più chiara e intuitiva.

Nelle pagine statiche, se i visitatori possono cliccare sui tasti "Elemento successivo" o "Elemento precedente" che fanno sì che gli elementi collegati al Gestore contenuti modifichino il contenuto, collega gli elementi mostrati a un singolo contenitore. Imposta quindi gli attributi ARIA (Accessible Rich Internet Applications) del contenitore in modo che gli screen reader possano annunciare il contenuto modificato quando i visitatori cliccano sui tasti.

Devi solo allegare gli elementi che mostrano il contenuto che cambia. Non è necessario che i tasti "Elemento successivo" o "Elemento precedente" siano collegati a un contenitore.

Se mostri il numero di elementi del dataset in un elemento di testo e i visitatori possono cliccare su un elemento di input per modificare il numero di elementi, allega il testo a un contenitore. Imposta quindi gli attributi ARIA (Accessible Rich Internet Applications) del contenitore in modo che gli screen reader possano annunciare il numero di elementi quando cambia.

Questo può essere rilevante quando i visitatori cliccano sugli input che filtrano i contenuti o sugli input che raccolgono contenuti. Ogni volta che i visitatori hanno il potenziale per modificare il numero di elementi mostrato, allega il testo che mostra il numero di elementi a un contenitore in modo che gli screen reader possano annunciare la modifica.

Quando hai elementi di input impostati per filtrare i contenuti, i filtri vengono applicati non appena un visitatore effettua una selezione per impostazione predefinita. Puoi modificare questo comportamento aggiungendo un tasto "Applica filtri". 

Per l'accessibilità, è meglio aggiungere un tasto "Applica filtri". Con questo tasto, il contenuto non viene filtrato fino a quando i visitatori non cliccano su di esso. Questo crea un'esperienza migliore, soprattutto se gli utenti vogliono impostare più filtri prima di applicarli tutti contemporaneamente. 

Per rendere le barre di numerazione più accessibili, aggiungi nomi accessibili sia alla barra stessa che ai suoi tasti. Questi nomi non sono visibili sullo schermo ma sono essenziali per gli screen reader, aiutando gli utenti a capire come navigare tra le pagine. Ad esempio, puoi assegnare un nome alla barra di numerazione "Navigazione pagina" e assegnare nomi chiari a tasti come "Pagina successiva", "Pagina precedente" o personalizzarli in base al tuo contenuto (ad esempio "Prossima storia" o "Prodotto precedente").

Clicca qui sotto per trovare le risposte alle domande più frequenti sull'accessibilità.