---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/advanced/accessibility'
title: 'Make your pages accessible | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'What the builder provides, what you must add (alt text, heading order, contrast) and how to check the result'
tags:
  - 'Make pages accessible and findable'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Make your pages accessible'
      description: 'What the builder provides, what you must add (alt text, heading order, contrast) and how to check the result'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/advanced/accessibility'
      articleSection: 'Make pages accessible and findable'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/advanced/accessibility'
      description: 'What the builder provides, what you must add (alt text, heading order, contrast) and how to check the result'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Make pages accessible and findable](/hc/documentation/learn-dxpr-builder/manage/accessible-findable) # Make your pages accessible.

What the builder provides, what you must add (alt text, heading order, contrast) and how to check the result

 Learn DXPR BuilderManage the siteMake pages accessible and findable

   ## In this guide

 Related guides

- [Keyboard shortcuts](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)
- [Firewall and data residency](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall)

You give every image a description, keep headings in order and make text readable over colour, so screen reader and keyboard users can use your pages. This page lists what DXPR Builder does for you, what you add yourself, and how you check the result before you publish.

## What the builder does for you

- **Real text structure.** The Text element uses CKEditor 5 with real headings (**Heading 1** to **Heading 6**), paragraphs and lists.
- **ARIA on interactive elements.** Tabs carry `role="tablist"`and `role="tab"`. Progress bars and circle counters carry `role="progressbar"` with their minimum, maximum and current value. Collapse panel titles are buttons that report whether their panel is open.
- **Accessible editor dialogs.** Every settings dialog is a `role="dialog"` with `aria-modal` and a title.
- **Keyboard access in the editor.** **Enter** opens an element's settings, **Escape** closes a panel or deselects the element, and **Ctrl** (**Cmd** on a Mac) with an arrow key moves elements. See the [keyboard shortcuts reference](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts).

Layout elements (sections, rows and columns) are plain `div`elements. The structure a screen reader announces comes from your headings.

## Add alt text to an image

1. Point at the image and click **More** > **Settings**.
2. Open the **SEO** panel.
3. Type a description in **Alt attribute**: what the image shows and why it is on the page, in one or two sentences, without "image of".
4. Click **Save** in the dialog, then **Save** on the container bar.

When **Alt attribute** is empty, the Image element writes no `alt`at all, and screen readers may read out the file name. For a purely decorative picture, use a section **Background image** in the **Style** panel instead; screen readers skip backgrounds. The Image carousel uses one **Alt attribute** for all its images, so describe the set.

AI-generated images start with your prompt as their alt text. Edit it so it describes the result rather than the request. See [image alt text](/hc/documentation/learn-dxpr-builder/ai/image-alt-text).

## Keep headings in order

1. Give the page one Heading 1. Most themes show the page title as Heading 1, so do not add a second one in the builder. On DXPR CMS you can hide that title on one page instead: on its edit form, open **DXPR Theme Settings** and tick **Page Title** under **DXPR Hide Regions**.
2. In the Text element toolbar, use the heading list to mark section titles as **Heading 2** and sub-sections as **Heading 3**. Do not skip levels.
3. Use the toolbar's list buttons for lists rather than typed dashes.

Three elements fix their heading level. The Jumbotron **Title** is always Heading 1, the Card **Title** is always Heading 5, and each **Toggle title** of a Collapse panel is a Heading 2.

## Check colour contrast

The colour pickers offer your theme's palette but do not measure contrast, so check it yourself:

| Text | Minimum ratio (WCAG AA) |
|---|---|
| Body text | 4.5:1 |
| Large text (24 px, or about 19 px bold) | 3:1 |

For text over a photo, darken the photo so the ratio holds across the whole image. In the section's **Background effects** panel, set **Background effect** to **Gradient** with semi-transparent dark **Start color** and **End color**. [Backgrounds](/hc/documentation/learn-dxpr-builder/element-settings/background)shows the steps.

## Use descriptive links and buttons

The Button and Link elements show the text you type as the link text. Write what the link does ("Register for Open Day"), not "click here". The Link element also has a **Title attribute** in its **SEO** panel for a longer description.

## What you see

1. Set **View mode** on the container bar to **Preview**, so no editor controls are in the way.
2. Press Tab to move through the page. Every button, link and tab is reachable and shows a visible focus ring.
3. An automated checker, such as the browser's accessibility audit or the axe extension, reports no errors for the builder content on the published page.

## If you don't see a clean report

- **The checker reports an image without alt text.** The Image element's **Alt attribute** is empty. Fill it in, or move a decorative picture to a section background.
- **The checker reports two Heading 1s.** A Jumbotron **Title** is always Heading 1, next to the page title of your theme. Use a Text element with a Heading 2 instead.
- **The checker reports a skipped heading level.** A Card **Title**is always Heading 5. Leave it empty and start the card with a Text element heading at the right level.
- **The checker reports low contrast on text over a photo.** Add the gradient described above, or pick a darker text background.

## What's next?

- [Keyboard shortcuts](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) for the full editor shortcut list.
- [Firewall and data residency](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) for the other compliance topics.