Heydon Pickering 研究了如何在 React 组件中根据其上下文赋予其特定标题(如<h1>
、<h2>
等),从而确保 DOM 仍然对屏幕阅读器完全可访问。 那么,为什么使用正确的标题很重要呢? Heydon 在引言中写道
在与同事和朋友进行的研究、测试和日常交谈中,我一直都在思考标题的重要性。 对于屏幕阅读器用户而言,标题描述了各节和各小节之间的关系,并且在使用正确的情况下,可提供大纲和导航方式。 标题是基础设施。
这使我想起了 Amelia Bellamy-Royds 的一篇精彩博文,她在文中探讨了这种“文档大纲困境”所导致的所有问题,例如 <h1>
位于 <h3>
之后的情况。
就目前而言,文档大纲仅对屏幕阅读器用户至关重要,而这些用户目前已习惯于处理网页中标题级别的混乱。 我相信许多屏幕阅读器用户会喜欢标题级别得到修正。 但是,为屏幕阅读器用户修正标题并不仅仅意味着创建一个没有跳过级别编号的整齐嵌套标题树。 它意味着创建一个标题结构,准确地反映网页创建者所意图的含义,即视觉用户从样式和布局中推断出的含义。 为此,我们需要考虑如何将含义传达给所有使用网页的用户,而这些用户无法听到每个标题的数字级别。
令我惊讶的是,简单的标题需要如此多的关注,无论是处理可用性问题还是潜在的开发解决方法。