---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/advanced/accessibility'
title: '让您的页面无障碍可访问 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:44:24+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '请为每张图片添加描述，保持标题顺序，并让颜色上的文字清晰可读，这样使用屏幕阅读器和键盘的用户也能使用您的页面。本页列出了 DXPR Builder 为您做好的部分、需要您自己添加的部分，以及发布前如何检查结果。'
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: 让您的页面无障碍可访问
      description: '请为每张图片添加描述，保持标题顺序，并让颜色上的文字清晰可读，这样使用屏幕阅读器和键盘的用户也能使用您的页面。本页列出了 DXPR Builder 为您做好的部分、需要您自己添加的部分，以及发布前如何检查结果。'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:44:24+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/zh-hans/hc/documentation/learn-dxpr-builder/advanced/accessibility'
      articleSection: 'Pagina’s toegankelijk en vindbaar maken'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/advanced/accessibility'
      description: '请为每张图片添加描述，保持标题顺序，并让颜色上的文字清晰可读，这样使用屏幕阅读器和键盘的用户也能使用您的页面。本页列出了 DXPR Builder 为您做好的部分、需要您自己添加的部分，以及发布前如何检查结果。'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/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) # 让您的页面无障碍可访问.

 Learn DXPR BuilderManage the sitePagina’s toegankelijk en vindbaar maken

   ## In this guide

 Related guides

- [键盘快捷键](/zh-hans/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)
- [Firewall and data residency](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall)

请为每张图片添加描述，保持标题顺序，并让颜色上的文字清晰可读，这样使用屏幕阅读器和键盘的用户也能使用您的页面。本页列出了 DXPR Builder 为您做好的部分、需要您自己添加的部分，以及发布前如何检查结果。

## 构建器为您做好的部分

- **真实的文本结构。** Text 元素使用 CKEditor 5，提供真实的标题（**Heading 1** 到 **Heading 6**）、段落和列表。
- **交互元素的 ARIA。** 选项卡带有 `role="tablist"` 和 `role="tab"`。进度条和环形计数器带有 `role="progressbar"` 及其最小值、最大值和当前值。折叠面板标题是按钮，会报告其面板是否展开。
- **无障碍的编辑器对话框。** 每个设置对话框都是 `role="dialog"`，带标题和 `aria-modal`。
- **编辑器中的键盘操作。** **Enter** 打开元素的设置，**Escape** 关闭面板或取消选择元素，**Ctrl**（Mac 上为 **Cmd**）加方向键可移动元素。请参阅 [键盘快捷键参考](/zh-hans/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)。

布局元素（版块、行和列）是普通的 `div` 元素。屏幕阅读器播报的结构来自您的标题。

## 为图片添加替代文本

1. 指向图片，点击 **More** > **Settings**。
2. 打开 **SEO** 面板。
3. 在 **Alt attribute** 中输入描述：用一两句话说明图片内容及其出现在页面上的原因，不要写“image of”。
4. 点击对话框中的 **Save**，再点击容器栏上的 **Save**。

当 **Alt attribute** 为空时，Image 元素完全不写 `alt`，屏幕阅读器可能会读出文件名。对于纯装饰性图片，请改用版块 **Background image**（**Style** 面板中）；屏幕阅读器会跳过背景。Image carousel 对所有图片只用一个 **Alt attribute**，因此请描述整组图片。

AI 生成的图片以您的提示词作为初始替代文本。请修改它，让它描述生成结果，而不是描述请求。请参阅 [图像替代文本](/zh-hans/hc/documentation/learn-dxpr-builder/ai/image-alt-text)。

## 保持标题顺序

1. 给页面设置一个 Heading 1。大多数主题将页面标题显示为 Heading 1，因此不要在构建器中再加第二个。在 DXPR CMS 上，您可以只隐藏单个页面的标题：在其编辑表单中打开 **DXPR Theme Settings**，勾选 **Page Title**（**DXPR Hide Regions** 下）。
2. 在 Text 元素工具栏中，用标题列表将版块标题标记为 **Heading 2**，子版块标记为 **Heading 3**。不要跳级。
3. 用工具栏的列表按钮制作列表，而不要手动输入短横线。

有三个元素固定了标题级别。Jumbotron 的 **Title** 始终是 Heading 1，Card 的 **Title** 始终是 Heading 5，每个 Collapse 面板的 **Toggle title** 都是 Heading 2。

## 检查颜色对比度

颜色选择器提供主题的调色板，但不测量对比度，因此请自行检查：

| 文本 | 最小对比度（WCAG AA） |
|---|---|
| 正文 | 4.5:1 |
| 大文本（24 px，或约 19 px 的粗体） | 3:1 |

对于照片上的文字，请将照片调暗，使整个图片的对比度都达标。在版块的 **Background effects** 面板中，将 **Background effect** 设为 **Gradient**，并设置半透明深色的 **Start color** 和 **End color**。[背景](/hc/documentation/learn-dxpr-builder/element-settings/background)中有具体步骤。

## 使用描述性链接和按钮

Button 和 Link 元素将您输入的文字显示为链接文本。请写明链接的作用（“Register for Open Day”），而不是写“click here”。Link 元素还提供 **Title attribute**（其 **SEO** 面板中），可写更长的描述。

## 您会看到的内容

1. 将容器栏上的 **View mode** 设为 **Preview**，这样编辑器控件不会挡住视线。
2. 按 Tab 键遍历页面。每个按钮、链接和选项卡都可到达，并显示可见的焦点环。
3. 用自动化检查工具（如浏览器的无障碍审核或 axe 扩展）检查，已发布页面上的构建器内容应无报错。

## 如果检查报告不干净

- **检查工具报告图片缺少替代文本。** Image 元素的 **Alt attribute** 为空。请填写它，或将装饰性图片移到版块背景中。
- **检查工具报告有两个 Heading 1。** Jumbotron 的 **Title** 始终是 Heading 1，与主题的页面标题并存。请改用带 Heading 2 的 Text 元素。
- **检查工具报告标题跳级。** Card 的 **Title** 始终是 Heading 5。请将其留空，用 Text 元素标题以正确的级别开头。
- **检查工具报告照片上文字的对比度不足。** 添加上文所述的渐变，或选择更深的文字背景。

## 接下来做什么？

- [键盘快捷键](/zh-hans/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)：完整的编辑器快捷键列表。
- [防火墙和数据驻留](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall)：其他合规主题。