React站点优化：带子元素的div设role=heading是否符合WCAG规范？

你当前的写法不符合无障碍规范，原因如下：

• 单个role="heading"元素应对应独立的标题内容，你把两个视觉上独立的标题文本嵌套在同一个heading容器里，会被屏幕阅读器识别为一个h2标题，破坏了原本的语义结构，用户无法区分这是两个不同的标题。
• 视觉上两个文本有明显的大小差异（一个更小、一个更大），但你将它们归为同一个aria-level="2"，不符合「视觉语义与无障碍语义对应」的原则，屏幕阅读器用户无法感知到两者的层级区别。

正确的处理方式有两种：

方案1：给每个标题单独设置role和层级 #

根据视觉大小对应标题层级（层级数值越小，标题级别越高，比如h2 > h3），给每个div单独配置：

<div className={Styles.headline2} role="heading" aria-level="3">This title is visually smaller.</div>
<div className={Styles.headline3} role="heading" aria-level="2">This title is visually bigger.</div>

这样屏幕阅读器会识别出两个独立的标题，且层级关系与视觉表现一致。

方案2：优先使用原生标题标签（推荐） #

如果样式可以适配，优先选择原生h标签而非role模拟——原生标签的无障碍支持更完善，浏览器和屏幕阅读器的兼容性更好：

<h2 className={Styles.headline3}>This title is visually bigger.</h2>
<h3 className={Styles.headline2}>This title is visually smaller.</h3>

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