分区元素将页面分成有意义的区域。其中许多映射到 ARIA landmarks——辅助技术允许用户跳转的命名区域,就像页面的目录一样。
html
...
Details
...
...
屏幕阅读器用户可以按一个键列出地标并直接跳到 <main>,跳过重复的标题和导航。这是一个重大的效率提升——语义标签自动提供它,无需 ARIA。
<article> — 独立存在并可被联合的内容:博客文章、产品卡片、评论。<section> — 文档内的主题分组,通常有自己的标题。不是独立的。<article>
<h1>Blog post title</h1>
<section><h2>Introduction</h2>...</section>
<section><h2>Conclusion</h2>...</section>
</article>
经验法则:如果它可以独立存在,它就是 <article>;如果它只是更大整体的一个标记块,它就是 <section>。不要仅将 <section> 用作样式包装器——那是 <div> 的作用。
使用正确的分区元素可以为键盘/屏幕阅读器导航获得免费、强大的地标和清晰的文档大纲——无需任何额外的 ARIA 属性即可改进可访问性和 SEO。