Rendi accessibili le tue pagine.

Dai a ogni immagine una descrizione, mantieni i titoli in ordine e rendi il testo leggibile sui colori, così gli utenti di screen reader e tastiera possono usare le tue pagine. Questa pagina elenca cosa fa DXPR Builder per te, cosa aggiungi tu e come verifichi il risultato prima di pubblicare.

Cosa fa il builder per te

• Struttura testuale reale. L’elemento Text usa CKEditor 5 con titoli veri (da Titolo 1 a Titolo 6), paragrafi ed elenchi.
• ARIA sugli elementi interattivi. I tab portano role="tablist" e role="tab". Barre di avanzamento e contatori circolari portano role="progressbar" con i loro valori minimo, massimo e corrente. I titoli dei pannelli Collapse sono pulsanti che riportano se il loro pannello è aperto.
• Finestre accessibili dell’editor. Ogni finestra delle impostazioni è un role="dialog" con aria-modal e un titolo.
• Accesso da tastiera nell’editor. Enter apre le impostazioni di un elemento, Escape chiude un pannello o deseleziona l’elemento, e Ctrl (Cmd su Mac) con un tasto freccia sposta gli elementi. Vedi il riferimento alle scorciatoie da tastiera.

Gli elementi di layout (sezioni, righe e colonne) sono semplici elementi div. La struttura annunciata da uno screen reader viene dai tuoi titoli.

Aggiungi testo alternativo a un’immagine

1. Punta l’immagine e fai clic su More > Settings.
2. Apri il pannello SEO.
3. Digita una descrizione in Alt attribute: cosa mostra l’immagine e perché è nella pagina, in una o due frasi, senza "image of".
4. Fai clic su Save nella finestra, poi su Save sulla barra del contenitore.

Quando Alt attribute è vuoto, l’elemento Image non scrive alcun alt, e gli screen reader potrebbero leggere il nome del file. Per un’immagine puramente decorativa, usa invece una Background image di sezione nel pannello Style; gli screen reader saltano gli sfondi. Il carosello Image usa un unico Alt attribute per tutte le sue immagini, quindi descrivi l’insieme.

Le immagini generate dall’AI partono dal tuo prompt come testo alternativo. Modificalo così descrive il risultato e non la richiesta. Vedi testo alternativo delle immagini.

Mantieni i titoli in ordine

1. Dai alla pagina un Titolo 1. La maggior parte dei temi mostra il titolo della pagina come Titolo 1, quindi non aggiungerne un secondo nel builder. Su DXPR CMS puoi invece nascondere quel titolo su una pagina: nel suo form di modifica, apri DXPR Theme Settings e spunta Page Title in DXPR Hide Regions.
2. Nella barra dell’elemento Text, usa l’elenco dei titoli per marcare i titoli di sezione come Titolo 2 e le sottosezioni come Titolo 3. Non saltare livelli.
3. Usa i pulsanti elenco della barra per gli elenchi invece di trattini digitati.

Tre elementi fissano il loro livello di titolo. Il Title di Jumbotron è sempre Titolo 1, il Title di Card è sempre Titolo 5, e ogni Toggle title di un pannello Collapse è un Titolo 2.

Verifica il contrasto dei colori

I selettori di colori offrono la palette del tuo tema ma non misurano il contrasto, quindi verificalo tu:

Per il testo su una foto, scurisci la foto così il rapporto tiene su tutta l’immagine. Nel pannello Background effects della sezione, imposta Background effect a Gradient con Start color ed End color scuri semitrasparenti. Sfondi mostra i passaggi.

Usa link e pulsanti descrittivi

Gli elementi Button e Link mostrano il testo digitato come testo del link. Scrivi cosa fa il link ("Register for Open Day"), non "click here". L’elemento Link ha anche un Title attribute nel suo pannello SEO per una descrizione più lunga.

Cosa vedrai

1. Imposta View mode sulla barra del contenitore a Preview, così nessun controllo dell’editor è d’intralcio.
2. Premi Tab per muoverti nella pagina. Ogni pulsante, link e tab è raggiungibile e mostra un anello di focus visibile.
3. Un verificatore automatico, come l’audit di accessibilità del browser o l’estensione axe, non rileva errori per i contenuti del builder nella pagina pubblicata.

Se non vedi un report pulito

• Il verificatore segnala un’immagine senza testo alternativo. L’Alt attribute dell’elemento Image è vuoto. Compilalo, oppure sposta un’immagine decorativa in uno sfondo di sezione.
• Il verificatore segnala due Titolo 1. Un Title di Jumbotron è sempre Titolo 1, accanto al titolo di pagina del tuo tema. Usa invece un elemento Text con un Titolo 2.
• Il verificatore segnala un livello di titolo saltato. Un Title di Card è sempre Titolo 5. Lascialo vuoto e inizia la card con un titolo di elemento Text al livello giusto.
• Il verificatore segnala contrasto basso sul testo sopra una foto. Aggiungi il gradiente descritto sopra, oppure scegli uno sfondo di testo più scuro.

Prossimi passi

• Scorciatoie da tastiera per l’elenco completo delle scorciatoie dell’editor.
• Firewall e residenza dei dati per gli altri temi di conformità.