无需使用h1-h6标签做强调文本的场景及自定义span的WCAG合规性咨询

无需使用h1-h6做强调文本的场景 #

• 纯视觉装饰的文本高亮：比如段落里为了吸引眼球给关键词加颜色或下划线，本身不是页面/区块的标题，也不承担结构导航作用。
• 内联内容的样式化：表单提示里的重点文字、文章正文里的术语标注这类文本，只是普通内容的一部分，不构成层级标题。
• 辅助性视觉补充：已有明确标题的卡片组件里，添加的小字号补充文字，仅用于视觉层级区分，不具备独立的标题语义。
• 功能性提示文本：必填项的*标记、操作按钮里的强调文字，这类文本是功能说明，和页面结构层级无关。

自定义span的WCAG合规性问题 #

你使用的<span class="subheader-uline">My custom emphasised text</span>本身不违反WCAG规则，检测工具报错的核心原因是：你的CSS样式让这段文本视觉上和真正的标题（h1-h6）过于相似（比如字号、加粗、下划线样式和标题一致），触发了工具的「语义-视觉一致性」检查。

WCAG的核心要求之一是页面的视觉表现要和语义结构匹配：如果视觉用户把一段文本当成标题，但屏幕阅读器无法通过标题导航找到它，就会造成信息不对称，影响无障碍体验。

如果你确定这段文本仅用于美观、不具备标题的结构意义，可以继续使用该写法，同时解决工具误判的问题：

1. 调整视觉样式：让这段文本的字号、粗细、间距等和页面真正的标题有明显区分，从根源上避免视觉混淆。
2. 明确语义属性：如果无法调整样式，给span添加role="text"，明确它只是普通文本内容；如果这段文本是纯装饰（无实际信息价值），可以加aria-hidden="true"让屏幕阅读器直接忽略它（注意：若文本包含实际可读内容，不要使用这个属性）。
3. 工具忽略注释：针对axe等特定检测工具，可添加工具支持的忽略注释跳过该元素的标题规则检查，但这是备选方案，优先保证语义与视觉的一致性。

内容的提问来源于stack exchange，提问作者nelle