让您的页面无障碍可访问.
请为每张图片添加描述，保持标题顺序，并让颜色上的文字清晰可读，这样使用屏幕阅读器和键盘的用户也能使用您的页面。本页列出了 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）加方向键可移动元素。请参阅 键盘快捷键参考。
布局元素（版块、行和列）是普通的 div 元素。屏幕阅读器播报的结构来自您的标题。
为图片添加替代文本
- 指向图片，点击 More > Settings。
- 打开 SEO 面板。
- 在 Alt attribute 中输入描述：用一两句话说明图片内容及其出现在页面上的原因，不要写“image of”。
- 点击对话框中的 Save，再点击容器栏上的 Save。
当 Alt attribute 为空时，Image 元素完全不写 alt，屏幕阅读器可能会读出文件名。对于纯装饰性图片，请改用版块 Background image（Style 面板中）；屏幕阅读器会跳过背景。Image carousel 对所有图片只用一个 Alt attribute，因此请描述整组图片。
AI 生成的图片以您的提示词作为初始替代文本。请修改它，让它描述生成结果，而不是描述请求。请参阅 图像替代文本。
保持标题顺序
- 给页面设置一个 Heading 1。大多数主题将页面标题显示为 Heading 1，因此不要在构建器中再加第二个。在 DXPR CMS 上，您可以只隐藏单个页面的标题：在其编辑表单中打开 DXPR Theme Settings，勾选 Page Title（DXPR Hide Regions 下）。
- 在 Text 元素工具栏中，用标题列表将版块标题标记为 Heading 2，子版块标记为 Heading 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。背景中有具体步骤。
使用描述性链接和按钮
Button 和 Link 元素将您输入的文字显示为链接文本。请写明链接的作用（“Register for Open Day”），而不是写“click here”。Link 元素还提供 Title attribute（其 SEO 面板中），可写更长的描述。
您会看到的内容
- 将容器栏上的 View mode 设为 Preview，这样编辑器控件不会挡住视线。
- 按 Tab 键遍历页面。每个按钮、链接和选项卡都可到达，并显示可见的焦点环。
- 用自动化检查工具（如浏览器的无障碍审核或 axe 扩展）检查，已发布页面上的构建器内容应无报错。
如果检查报告不干净
- 检查工具报告图片缺少替代文本。 Image 元素的 Alt attribute 为空。请填写它，或将装饰性图片移到版块背景中。
- 检查工具报告有两个 Heading 1。 Jumbotron 的 Title 始终是 Heading 1，与主题的页面标题并存。请改用带 Heading 2 的 Text 元素。
- 检查工具报告标题跳级。 Card 的 Title 始终是 Heading 5。请将其留空，用 Text 元素标题以正确的级别开头。
- 检查工具报告照片上文字的对比度不足。 添加上文所述的渐变，或选择更深的文字背景。