我正在努力使现有的React网站更容易访问。有一段代码，我想改进：
<div className={Styles.headline2}>This title is visually smaller.</div>
<div className={Styles.headline3}>This title is visually bigger.</div>审计时，发现这两个div应该是标题。由于样式的原因，我计划使用role="heading"而不是h2 HTML标记。定义一个div是否可以像下面这样带有子项，或者是否会被认为是不正确的，在可访问性方面？
<div role="heading" aria-level="2">
<div className={Styles.headline2}>This title is visually smaller.</div>
<div className={Styles.headline3}>This title is visually bigger.</div>
</div>
1条答案
按热度按时间fykwrbwg1#
不，这是不正确的。你最终会使用辅助技术--比如屏幕阅读器--认为这里有一个单一的二级标题，其内容是“这个标题在视觉上更小。这个标题在视觉上更大。"
如果你必须使用ARIA，正确的方法是这样做：
(or无论
aria-level值是什么-我稍后会对此进行更多的评论）或者，最好使用实际的元素（同样，精确的标题级别--在本例中意味着实际的标题元素--可能会引起争论）：
我知道你说你不能这样做“因为造型”，但我不认为这是一个很好的理由。浏览器为标题元素提供了默认样式，您可能不想使用这些样式--但只需使用CSS覆盖这些样式！我假设您提供的
className已经设置了您想要的样式--这不应该因为您现在使用不同的（并且语义正确）元素。至于你应该使用哪一级标题--这取决于你页面的整体内容，但我在这里想不出任何明智的选择。事实上，你有两个标题，一个接一个，中间没有文本或其他内容，只有当第一个是一节的标题，下一个是第一个“小节”的标题时，对我来说才有意义。这通常意味着使第二个比第一个“低”一个级别-所以如果第一个是
h2，第二个将是h3。但是，不太重要的标题--假设的
h3--就像你说的那样“在视觉上更大”是没有任何意义的。标题应该遵循一个特殊的结构，它反映了你的页面内容的结构--参见例如MDN了解更多。所以你需要标记级别--无论是
<div role="heading">上的aria-level还是（好得多）实际的标题元素在这里并不重要--这样你的内容对那些只能访问标题列表的屏幕阅读器用户就有意义了。（这类似于一个视力正常的用户快速浏览页面，仅仅通过看标题就能了解其内容和结构。）