网络可访问性——为什么我们应该使用语义 HTML

assistive technologies在上一篇文章中，我们讨论了旨在帮助残障人士访问网络的一项技术： screen readers。如果您还记得，我们提到过 将screen readers他们在屏幕上看到的信息翻译成音频和/或盲文输出。但为了实现这一点，开发人员需要确保HTML能够被屏幕阅读器读取和翻译。

为了让他们的页面/应用程序更容易被所有人访问，开发者可以采取的最简单的步骤之一就是尽可能多地使用语义化 HTML。但这是什么？它和常规的 HTML 有什么不同吗HTML？

答案是否定的。Semantic HTML标记能够非常清晰地描述其含义。例如，像 、 或 这样的元素header非常table清楚section地article描述了它们的内容，而div或 则span没有说明它们可能包含的内容。自 2014 年以来，HTML4已升级为HTML5。在新版本中，添加了许多语义元素，因此编写可访问的代码比以前简单得多。不幸的是，即使在今天，我们仍然可以看到很多non-semantic不常见的标记。请考虑以下示例：

<div>
   <div>This is a list</div>
    <br>
     <span>First item</span>
      <br>
     <span>Second item</span>
      <br>
     <span>Third item</span>
   </div>
</div>

这当然有些夸张，但却是一个非常明显的屏幕阅读器代码不友好的例子。虽然我们编写了 valid tags，但它们并没有达到预期的目的（我们试图使用list和divs来创建，brs而不是使用正确的元素）。现在来看正确的例子：

<section>
  <h2>This is a list</h2>
   <ul>
     <li>First item</li>
     <li>Second item</li>
     <li>Third item</li>
   </ul>
</section>

当屏幕阅读器遇到第二个示例时，很明显用户正在查看网页的某个部分，并且该部分内有一个无序列表 - 而这些是第一个例子无法理解的。

与非语义 HTML 相比，语义 HTML 无需额外投入，尤其是在项目初期就使用语义 HTML 的情况下。以下是semantic元素的简要列表：

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

这并不意味着我们不应该使用divs或spans或其他含义不明确的元素，但如果你想让你的应用程序更容易被所有人访问，就应该尽可能HTML5多地使用 。除了用户数量更多之外， 的其他优点semantic HTML还包括代码更简洁、更易读、更易于维护（想想所有ids和 ，classes在尝试使元素更具体时，你可以避免使用non-semantic；例如，有人可能会写成<div id=header></div>而不是<header></header>）。

图片来源：Unsplash 上的 Goran Ivos/@goran_ivos