哪些 HTML 功能可以提高网页可访问性？

以下内容描述了 HTML 的一些特定功能，这些功能应该用于使网页更容易被不同残疾人访问。

链接文本

如果你的链接不是自描述的，或者链接目标需要更详细的解释，你可以使用 aria-label 或 aria-labelledby 属性为链接添加信息。

html
<p>
  I'm really bad at writing link text.
  <a
    href="inept.html"
    aria-label="Why I'm rubbish at writing link text: An explanation and an apology."
    >Click here</a
  >
  to find out more.
</p>
<p>
  I'm really <span id="incompetence">bad at writing link text</span>.
  <a href="inept.html" aria-labelledby="incompetence">Click here</a> to find out
  more.
</p>

请注意，大多数情况下，最好编写有用的链接文本

html
<p>
  I wrote a
  <a href="capable.html">blog post about how good I am at writing link text</a>.
</p>

为了帮助用户使用 Tab 键导航，你可以提供 跳过链接，允许用户跳过网页上的某些部分。你可能希望允许用户跳过在每个页面上都出现的众多导航链接。这使键盘用户能够快速跳过重复的内容，直接跳转到页面的主要内容。

html
<header>
  <h1>The Heading</h1>
  <a href="#content">Skip to content</a>
</header>

<nav>
  <!-- navigation stuff -->
</nav>

<section id="content">
  <!--your content -->
</section>

图像的 alt 属性

每个图像都应该有一个 alt 属性。如果图像纯粹是装饰性的，并且不向文档的内容或上下文添加任何意义，则 alt 属性应该存在，但为空。你也可以选择添加 role="presentation"。所有其他图像都应该包含一个 alt 属性，该属性提供 描述图像的替代文本，以便能够阅读其他内容但无法看到图像的用户能够理解。想想你会如何向无法加载图像的人描述图像：你应该将这些信息作为 alt 属性的值包含在内。

html
<!-- decorative image -->
<img alt="" src="blueswish.png" role="presentation" />
<img
  alt="The Open Web Docs logo: Carle the book worm smiling"
  src="carle.svg"
  role="img" />

同一内容的 alt 属性可能因上下文而异。在以下示例中，使用动画 GIF 而不是进度条来显示文档加载进度的动画，该文档教开发人员如何使用 HTML <progress> 元素。

html
<img alt="20% complete" src="load-progress.gif" />
<img
  alt="The progress bar is a thick green square to the left of the thumb and a thin grey line to the right. The thumb is a circle with a diameter the height of the green area."
  src="screenshot-progressbar.png" />

ARIA role 属性

默认情况下，HTML 中的所有语义元素都具有 role；例如，<input type="radio"> 具有 radio 角色。HTML 中的非语义元素没有角色。ARIA 角色可用于描述 HTML 中不存在的元素，例如 tablist 小部件。角色对于那些存在但尚未得到所有浏览器完全支持的新元素也很有用。例如，在使用 SVG 图像时，在开始标签中添加 role="img"，因为存在 SVG VoiceOver 漏洞，导致 VoiceOver 无法正确宣布 SVG 图像。

html
<img src="mdn.svg" alt="MDN logo" role="img" />