无障碍（Accessibility，简称 a11y）的核心理念，是让你的网站尽可能多的人都能用。据 WHO 世界残疾报告，全球约 15% 的人口有某种形式的残障。把时间花在改善无障碍上，比花在兼容 IE（全球使用率仅约 2%）上划算得多——而且在不少国家，这已经是法律要求。
好消息是，Bricks 天生就为生成最语义化的 HTML 设计，大部分无障碍最佳实践不写代码也能做到。本文依据 Bricks 官方文档《Accessibility》改写。
为什么无障碍很重要
无障碍网站对所有人更友好，长期看对业务也是加分项：
- 覆盖更广的受众：视障、听障、行动障碍用户以及使用辅助技术（如屏幕阅读器）的人群都能正常访问；
- SEO 加分：语义化 HTML、描述性链接、图片 alt 文本，这些无障碍要素与搜索引擎的喜好高度一致；
- 合规要求：部分国家/地区对公共网站的 WCAG 合规有硬性要求。
保证内容能被目标访客中的绝大多数理解，本身就是无障碍的一部分：HTML 合法且语义结构正确、链接和按钮描述清晰、图片有相关的 alt 描述——这些是 a11y 的几个核心方面。
Bricks 如何帮助解决无障碍
Bricks 的核心思路是默认输出语义化 HTML：
- 元素尽可能使用最合适的 HTML 标签——Form 元素输出
form标签，Nav Menu 元素输出nav标签； - 页面结构（Header / Main / Footer）自动生成标准地标（landmark）；
- 键盘导航、焦点样式、跳过链接等基础无障碍能力内置，开箱即用。
你在构建器里做的选择（比如给图片填 alt、给链接加 aria-label）会直接反映到前端 HTML 里，不需要懂无障碍规范也能做对大部分。
ARIA 地标与语义化 HTML
Bricks 默认创建三个地标区域（landmark regions）：Header、Main、Footer。
需要更多地标或其他语义标签时：
- 用 Container 元素，在其设置里选择需要的 HTML tag（也可以填自定义标签）；
- 或者用 Custom Attributes（Bricks 1.3 引入）给任意元素加额外属性。
一个常见例子：想给容器加 role 属性，到元素的 Style → Attributes，点 + 添加，Name 填 role，Value 填对应的角色值即可。
| 场景 | 做法 |
|---|---|
| 默认地标 | Header / Main / Footer 自动生成，无需设置 |
| 额外地标 | Container 元素选 HTML tag，或自定义标签 |
| 自定义属性 | Style → Attributes 添加，如 role、aria-* |
图片的替代文本
- Bricks 的图片元素会使用 WordPress 媒体库里的替代文本（alt），
alt是给无法看图的人描述图片内容的地方； - 在构建器里用 Image 元素时，也可以单独填自定义
alt属性； - 背景图（background image）以 CSS 背景输出，只用于装饰性图片。如果一张图承载了信息，优先用 Image 元素让它有合适的替代文本；或者手动补充说明文字/自定义属性。
一句话：有意义的图用 Image 元素加 alt，纯装饰用背景图。
链接的可达性
链接文字不清时，用构建器给链接设置 aria-label（以及 title）属性——辅助技术（如屏幕阅读器）会优先朗读 aria-label，为链接提供更明确的语境。
另外两个好习惯：
- 避免「Read more」「Click here」「了解更多」这类无上下文链接文案；
- 如果必须用这类文案，一定要给链接加
aria-label说明去向。
表单标签
Form 元素可以自由添加/移除字段标签。字段标签对无障碍至关重要——它告诉用户每个输入框该填什么。
如果你倾向于不显示字段标签（比如视觉上更简洁），Bricks 会自动给字段输入框加上 aria-label 属性，内容就是你在构建器里为该字段设置的标签。也就是说：标签始终存在，只是视觉上可能隐藏，屏幕阅读器用户不会迷路。
键盘导航与焦点样式
只靠键盘就能操作网站，是无障碍的核心要求之一——这不仅服务无法用鼠标的用户，也服务其他辅助技术用户。
键盘导航的关键是焦点（focus）有清晰的视觉提示。Bricks 1.3 起内置了默认的 :focus 样式：
- 想自定义焦点样式：Settings → Theme Styles → Typography → Focus Outline；
- 虽然不推荐，但确实可以在这里设为
none去掉默认焦点外框——强烈建议保留，否则键盘用户会不知道焦点在哪。
跳过导航链接
纯键盘操作时，每进一个页面都要按 Tab 穿过整个菜单才能到正文，非常痛苦。最佳实践是在页面顶部放一个「跳到内容」的链接。
Bricks 1.3 起默认内置两个跳过链接：一个跳到内容区，一个跳到页脚（如果存在）。它们自动添加到网站，平时不可见，按下 TAB 键时才会出现——配合语义化 ARIA 地标，键盘用户可以直接跳到主要内容。
菜单的键盘操作
导航菜单是网站使用率最高的元素之一，Bricks 生成的所有菜单都包在 <nav> 标签里，并且完全支持键盘操作（采用 W3C 的 fly-out 菜单方案）。
焦点在菜单内时，按键行为如下：
| 按键 | 行为 |
|---|---|
| TAB | 选中下一个菜单项 |
| SHIFT + TAB | 选中上一个菜单项 |
| ENTER | 打开链接（等同点击） |
| SPACE | 展开/收起子菜单（如果有） |
无障碍规范与最佳实践一直在演进，Bricks 也在持续跟进——如果你发现任何可改进的无障碍细节，可以直接向 Bricks 官方反馈。
常见问题（FAQ）
Q：Bricks 默认就满足无障碍要求吗？ A：基础层面（语义化 HTML、地标、键盘导航、跳过链接）开箱即用；但内容层面的责任在站长——图片 alt、链接 aria-label、表单标签这些需要你在构建器里填对。
Q：隐藏了表单标签会影响无障碍吗？
A：不会。Bricks 会自动用字段标签生成 aria-label，视觉上隐藏但辅助技术可读。
Q：焦点样式可以去掉吗？ A：可以，在 Theme Styles → Typography → Focus Outline 设为 none。但不推荐——键盘用户会失去焦点指示。
Q：背景图需要写 alt 吗？ A：不需要。背景图是 CSS 输出的装饰性图片；承载信息的图请用 Image 元素并填写 alt。
Q：菜单支持键盘吗？
A：支持。所有 Bricks 菜单都在 <nav> 标签内，TAB / SHIFT+TAB / ENTER / SPACE 均可操作。
延伸阅读
- 表单字段的标签与布局细节：Bricks 表单生成器完整指南 与 Bricks Form 添加 Google reCAPTCHA v3 验证
- 元素样式与焦点样式同源：Bricks 元素 Style 设置详解
- 页面结构打底：Bricks Layout 布局详解
- 键盘操作进阶：Bricks 构建器自定义键盘快捷键
- 无障碍与 SEO 互相成就，配合阅读 Bricks 建站 SEO 教程
- 官方文档：Accessibility
- 相关阅读：Bricks Setup Guide
延伸阅读
Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据
教程：Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
tutorialBricks 中输出 ACF Relationship 关联文章的数量
教程：Bricks 中输出 ACF Relationship 关联文章的数量——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
tutorialACF Relationship 字段 + Bricks 查询循环：显示关联文章
教程：ACF Relationship 字段 + Bricks 查询循环：显示关联文章——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
tutorial把任意自定义 WP_Query 循环接入 Bricks 查询循环
教程：把任意自定义 WP_Query 循环接入 Bricks 查询循环——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。