可访问且富有表现力的 HTML 语义

2025-06-08

可访问且富有表现力的 HTML 语义

编写语义化且易于访问的代码可能看起来很耗时，尤其是在您刚开始构建易于访问的网站时。但从长远来看，其好处是惊人的。编写正确的语义化 HTML 可以帮助各种类型的用户正确地使用内容并浏览您的网站，无论他们通过哪种媒介进行交互。

在我们开始讨论语义之前，访问屏幕阅读器的最佳方式是使用Chrome Vox。这是测试网页是否适合屏幕阅读器的好方法。

我们还可以使用语音合成 API。
使用此 API 进行简单的文本转语音输出非常简单。

var to_speak = document.querySelector('main').textContent;


function speak() {
  window.speechSynthesis.speak(new SpeechSynthesisUtterance(to_speak));
}
Enter fullscreen mode Exit fullscreen mode

让我们开始吧！

文本级语义

1. 措辞强调

在 HTML 中，我们有几种元素变体可用于此目的 -
strong、、、。但是何时使用哪个呢？boldemi

当文本具有高度重要性时，应使用该strong元素。相反，该b元素应仅用于样式设置，而不会暗示轮廓文本比其周围的文本更重要。

<!-- of strong importance -->
<strong>Pay attention: All classes are suspended for today</strong>

<!-- only adding visual differentiation -->
This recipe needs some <b>salt</b> and <b>pepper</b>
Enter fullscreen mode Exit fullscreen mode

元素em强调文本的突出性，而i元素主要用于对话或交谈中以表达不同的语气。i元素也可用于表达语言的变化。

<!-- emphasis on the prominence -->
I <em>really</em> want to go the movies

<!-- setting a different tone -->
I like her certain <i hreflang="fr">je ne sais quoi</i>
Enter fullscreen mode Exit fullscreen mode

2. 扩展 HTML 标签以使其更易于访问

abbr当我们陈述缩写时使用标签，例如

<abbr title="British Broadcasting Corporation">BBC</abbr> has headquarters in London, United Kingdom.
Enter fullscreen mode Exit fullscreen mode

对于可视化浏览器来说，鼠标悬停时会显示工具提示，但屏幕阅读器会完全忽略 title 属性。那么，我们该如何实现呢？

我们可以提供一个aria-label属性-

  <abbr title="British Broadcasting Corporation" aria-label="British Broadcasting Corporation">BBC</abbr> has headquarters in London, United Kingdom.
Enter fullscreen mode Exit fullscreen mode

另外，我们可以提供仅对屏幕阅读器可见的附加信息 -

<!-- screen reader specific styles -->

.sr-only {
    position: absolute;
     width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0); 
    border: 0; 
}

<abbr title="British Broadcasting Corporation">
    <span class="sr-only">British Broadcasting Corporation</span>BBC
</abbr> has headquarters in London, United Kingdom.
Enter fullscreen mode Exit fullscreen mode

这种方法可以扩展到屏幕阅读器缺少的其他有用的 HTML 元素，例如mark、、。delins

mark元素用于突出显示部分文本，但屏幕阅读器在读出时没有任何区别。解决这个问题的一种方法是使用上述方法：

The current world population is <mark><span class="sr-only">highlight begins</span>7.7 billion<span>highlight ends<span/></mark> as of December 2018</mark>
Enter fullscreen mode Exit fullscreen mode

mark这里给出了另一种使标记更易于访问的有用方法：关于使您的标记更易于访问的简短说明

ins和del元素分别用于声明在文档中插入和删除文本。

His son is <del>6</del> <ins>7</ins> years old
Enter fullscreen mode Exit fullscreen mode

屏幕阅读器不会以任何不同的方式读取这些标签，因此为了使其更易于访问，我们需要添加更多上下文。

His son is <del><span class="sr-only">deleted</span>6</del> <ins><span class="sr-only">inserted</span>7</ins> years old
Enter fullscreen mode Exit fullscreen mode

注意：del与一起使用的附加属性ins是cite和datetime，其中cite提供机器可读源，为添加/删除提供参考，并datetime提供添加/删除发生的时间。

3. 隐藏屏幕阅读器的内容以减少认知负荷

我们有时会添加一些东西来提升视觉吸引力，但当视觉不再起作用时，这些东西可能就不相关了。就像前面这个带有 和 的例子一样ins，del我们不妨将删除的文本隐藏在屏幕阅读器中，因为它可能在视觉上相关，但在其他方面则不相关。

His son is <del aria-hidden="true">6</del> <ins>7</ins> years old
Enter fullscreen mode Exit fullscreen mode

关键在于，你真的需要留意哪些信息可能与你的用户相关。我们需要为屏幕阅读器用户提供多少额外的信息，又应该精简多少信息。

超链接语义

网络上充斥着“点击此处”之类的文字链接，这些文字无法为用户提供足够的上下文信息。最好避免在超链接中使用此类文字，而是为用户提供完整的上下文信息。

I am currently reading <a href="https://addyosmani.com/resources/essentialjsdesignpatterns/book/"><cite>Essential JS Design Patterns</cite></a>. You will find a lot of useful tips in it.
Enter fullscreen mode Exit fullscreen mode

超链接属性

type属性可用于为链接的内容类型提供上下文。

<a href="video.mp4" type="video/mp4">Download Video</a>
Enter fullscreen mode Exit fullscreen mode

download属性为浏览器提供了更多上下文，其中提到的文件href是要下载而不是显示。

<a href="video.mp4" type="video/mp4" download>Download Video</a>
Enter fullscreen mode Exit fullscreen mode

如果链接中的文本与文档的语言不同，我们可以提供hreflang属性来说明。

<a href="..." hreflang="fr">La vie en rose</a>
Enter fullscreen mode Exit fullscreen mode

链接属性列表可以在微格式网站上找到

超链接不仅可以用来链接到其他网页，还可以链接到同一网页上的元素。例如，如果我们引用了前面提到的一些图表或表格数据，我们可以使用a标签进行链接，以便为用户提供上下文信息。我们可以通过将其添加id到“可链接”内容中来实现这一点。

<figure id="figure-2">...</figure>

This phenomena was explained in <a href="figure-2">Figure 2</a>
Enter fullscreen mode Exit fullscreen mode

网页内链接的另一个常见用例是“跳至主要内容”链接。它不仅对屏幕阅读器用户有用，对键盘用户也同样有用。

您可以在此处找到如何创建“跳至主内容”链接

创建清晰的导航

  1. 键盘导航的常见方式是按下键盘上的某个键从一个链接跳转到另一个链接。因此，正如前面提到的，在标签tab中添加合适的文本就显得尤为重要。a

  2. 屏幕阅读器可以通过标题概述文档结构，因此请务必在标题中简洁地概括该部分的内容。使用标题创建适当的概述h1，h6可以帮助用户更好地理解页面结构以及各个部分之间的关​​系。
    另一个技巧是添加id标题，以便我们可以使用标签链接这些a标题，即使视力正常的用户也可以将其用作导航地标。

  3. 如果我们希望用户在使用键盘导航时跳转到链接以外的特定部分，我们可以将其放入tabindex = 0该元素中。这样，我们就将该特定部分添加到了 Tab 键顺序中。

  4. 另一种导航方式是通过地标角色。这包含在 ARIA 规范中，用于根据上下文定义页面区域。我们使用role属性来实现这一点。

<div role="navigation">
  <ul>
    <li>
       <a href="/contact">Contact Me</a>
      <li/>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

许多这些里程碑式的角色都有同等的里程碑标签 -

  • 横幅 - header
  • 导航 - nav
  • 主要的 - main
  • 内容信息——footer
  • 互补 -aside
  • 搜索

最后但同样重要的一点是，始终尝试使用更有意义的元素而不是来构建您的页面div。

  • header
  • footer
  • nav
  • main
  • section
  • article
  • aside

它们不仅提供更多背景信息，还为各类用户提供丰富的体验。

到此结束。

我不是专家，这绝对不是关于创建可访问 HTML 的全部内容，但我相信这会给你指明正确的方向。

参考

  1. WCAG 检查清单
  2. 只需键盘即可访问网络
  3. 使用屏幕阅读器进行一天的网络学习
鏂囩珷鏉ユ簮锛�https://dev.to/ananyaneogi/accessible-and-expressive-html-semantics-43h1
Devto 翻译
PREV
观察你的 Web 应用程序 - 快速总结
NEXT
如何在你的 git readme 中添加一些徽章（GitHub、Gitlab 等）