自然语义和无障碍性：HTML5 中的新语义元素-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发的时候，我们需要为页面中的每个元素考虑语义和无障碍性，这对于一些视觉和听觉上存在障碍的用户而言非常关键。HTML5 中引入了一些语义元素，可以帮助我们更好地构建可访问性强的网站。

初探语义

语义是指在 HTML 中使用标签，让代码能够更好地表达页面中的元素所具有的意义。一个语义化的网页，不仅更容易被搜索引擎理解和识别，也让读屏软件更加准确地将页面内容传达给视觉障碍用户。因此，无障碍性也与语义紧密相关。

先看一个不太好的例子：

<div class="movie">
  <div class="title">The Dark Knight</div>
  <div class="description">Action, Crime, Drama</div>
  <div class="rating">8.9/10</div>
</div>

这里使用了三个 div 元素分别显示了电影名称、类型和评分，几乎没有任何语义。在这个页面中，它们有什么样的作用，网页中各个元素之间的关系，很难一目了然。

如果我将这个例子稍作改写：

<section class="movie">
  <h2 class="title">The Dark Knight</h2>
  <p class="description">Action, Crime, Drama</p>
  <div class="rating">8.9/10</div>
</section>

这个例子使用了 HTML5 语义化的元素，具体是一个 section 元素和一个 h2 元素。section 元素的作用在于标记页面的各个主要部分，对比之下显得更加主次分明；h2 元素则可以很自然地表达电影名称所具有的重要性程度，也便于搜索引擎通过标签来发现页面的关键内容。

常见的语义化元素

常见的语义化元素有：

header 元素：表示文档头部，包括导航、搜索栏、网站名称等；
nav 元素：作为页面导航栏时，应包括一系列导航链接，例如菜单、目录等内容；
article 元素：表示一个独立的文章，可以包括标题、正文、作者、评论、标签等；
section 元素：表示文档的一个区域，可以包括一些具有共同主题的内容元素；
aside 元素：通常表示侧栏，一般放置辅助性或者切换语境的内容；
footer 元素：表示文档的尾部，一般包括版权说明、相关链接、联系方式等。

具体使用的时候，需要根据文档的结构来决定哪个元素适用于哪个场景。

无障碍性

无障碍性是指构建无障碍性网站，使得身体或视障碍用户能够无障碍地通过页面阅读或者导航。语义化的 HTML 元素也有助于提升页面的可访问性，更易于读屏软件拥有更好的阅读体验，从而更好地服务于视觉障碍用户。

以下是一些有助于无障碍性的 tips：

对于不含文本元素的图像，必须指定一个有意义的 alt 属性；
如果使用了 iframe，那么一定要为这个 iframe 指定一个有意义的 title，以便读屏软件能够更好地代替用户感知这个嵌入式内容；
避免使用仅仅依赖于颜色来传递信息的设计，这样的信息对于视力受损用户来说是完全不可访问的；
注意语言的声明，可以使用 lang 或者 xml:lang 属性来进行标注。

总结

HTML5 新增加的语义化元素提供了一种更好的页面结构的构建方式，对于提升网站的可访问性和搜索引擎优化显得尤其重要。合理使用这些元素，可以让我们的页面更易于维护、更易于分析和交换，也为视障群体提供了更好的用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64e876fdf6b2d6eab3400c77