--- url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/advanced/accessibility' title: 'Rendi accessibili le tue pagine | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T03:03:04+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Pagina’s toegankelijk en vindbaar maken' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Rendi accessibili le tue pagine' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T03:03:04+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/advanced/accessibility' articleSection: 'Pagina’s toegankelijk en vindbaar maken' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/advanced/accessibility' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/it' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: it --- [Help Center](/it/hc)/[Documentation](/it/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Pagina’s toegankelijk en vindbaar maken](/hc/documentation/learn-dxpr-builder/manage/accessible-findable) # Rendi accessibili le tue pagine. Learn DXPR BuilderManage the sitePagina’s toegankelijk en vindbaar maken ## In this guide Related guides - [Scorciatoie da tastiera](/it/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) - [Firewall and data residency](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) 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](/it/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts). 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](/it/hc/documentation/learn-dxpr-builder/ai/image-alt-text). ## 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: | Testo | Rapporto minimo (WCAG AA) | |---|---| | Testo del corpo | 4.5:1 | | Testo grande (24 px, o circa 19 px in grassetto) | 3:1 | 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](/hc/documentation/learn-dxpr-builder/element-settings/background)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](/it/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) per l’elenco completo delle scorciatoie dell’editor. - [Firewall e residenza dei dati](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) per gli altri temi di conformità.