用途
该技能用于确保内容在没有 CSS 的情况下仍然可用。用户可能使用自定义样式、高对比度模式、阅读工具，或遇到样式表加载失败的情况。如果页面只有在视觉呈现下才能被理解，那么一旦呈现方式改变，内容顺序、说明文字和任务流程就会失效。
主要能力
- 检查依赖 CSS 来表达含义的页面或组件。
- 验证在作者样式被禁用或被用户样式替换后，页面是否仍具有逻辑阅读顺序、可见标签、说明文字、错误文本和可操作的主要操作。
- 审查模板、渲染后的 HTML 和组件标记，标记出含义、阅读顺序、标签、说明或任务流程依赖 CSS 而非语义的地方。
- 说明如何通过禁用样式来验证修复效果。
使用方式
快速参考要点：
- 使用语义化 HTML，使标题、列表和表单关系在没有 CSS 时仍然成立。
- 保持 DOM 顺序与阅读顺序和任务完成顺序一致。
- 不要将必要的标签、说明或必填标记放在 CSS 生成内容中。
- 在禁用作者样式或被用户样式覆盖的情况下测试关键用户旅程。
检查步骤：
- 找出依赖 CSS 来表达含义的页面或组件。
- 验证当作者样式被禁用或被用户样式替换时，页面是否仍具有逻辑阅读顺序、可见标签、说明文字、错误文本和可操作的主要操作。
修复方式：
- 使用语义化 HTML 和 DOM 顺序来保留标题、列表、标签、字段分组、辅助文本和错误消息，而不依赖 CSS 定位、伪元素或纯视觉线索。
解释要点：
- 解释为什么语义化 HTML 和有意义的 DOM 顺序能让内容在 CSS 加载失败或用户应用自己的样式时仍然可理解。
代码评审：
- 审查与“确保内容在没有 CSS 时仍然可用”相关的模板、渲染后的 HTML 和组件标记。
- 标记出含义、阅读顺序、标签、说明或任务流程依赖 CSS 而非语义的地方，并说明如何通过禁用样式来验证修复。
完整实现细节、代码示例和框架特定指导见 references/rule.md。
规则页面：https://frontendchecklist.io/en/rules/accessibility/content-without-css
适用场景
- 无障碍审查。
- 布局组件和设计系统模式评审。
- 模板与组件标记的代码评审。
- 验证关键用户旅程在样式失效或被覆盖时的可用性。
限制
资料未提供关于收费、价格、平台支持范围或具体效果保证的信息。