在P标签内分组按钮是否符合WCAG规范？如何判断合规性？

通用判断方法 #

• 对照WCAG四大核心原则（可感知、可操作、可理解、健壮性）及对应成功准则逐一验证，比如检查文本对比度是否达标、所有功能是否支持键盘操作、页面语义结构是否清晰等。
• 借助辅助工具测试：用屏幕阅读器（如NVDA、VoiceOver）模拟视障用户体验，用WAVE、axe等工具扫描页面无障碍问题，用对比度检查工具验证文本可读性。
• 确认HTML元素语义化使用：每个标签都应符合其预期用途，避免用文本标签（如<p>、<h1>）充当布局容器。

针对<p>标签内分组按钮的合规性分析 #

WCAG没有直接禁止在<p>里放置按钮，但这种做法存在语义化问题，可能违反WCAG「可理解」原则下的内容结构清晰要求。

<p>标签的原生语义是段落文本容器，辅助技术（如屏幕阅读器）会将其识别为段落内容，而非控件组。把按钮放在<p>里，会让辅助工具用户混淆内容类型，无法快速识别这是一组可操作控件，降低页面可理解性。

推荐替代方案

• 如果是无关联的独立按钮，用通用容器<div>包裹即可：

<div>
  <button data-message="This is from the first button">Click me!</button>
  <button data-message="This is from the second button">Click me too!</button>
  <button data-message="This is from the third button">And me!</button>
</div>

• 如果是一组关联操作按钮（比如同属一个功能模块），用<fieldset>+<legend>组合，明确标注控件组用途，辅助技术能准确识别这是一组关联操作：

<fieldset>
  <legend>示例操作按钮</legend>
  <button data-message="This is from the first button">Click me!</button>
  <button data-message="This is from the second button">Click me too!</button>
  <button data-message="This is from the third button">And me!</button>
</fieldset>

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