哪些 HTML 功能可以提高可访问性？
以下内容描述了 HTML 的具体功能，这些功能应被用来使网页更容易被不同残障人士访问。
链接文本
如果您的链接不是自描述性的，或者链接目标可以通过更详细的说明来改进，您可以使用 aria-label 或 aria-labelledby 属性为链接添加信息。
<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>
请注意，大多数情况下，最好还是编写有用的链接文本。
<p>
I wrote a
<a href="capable.html">blog post about how good I am at writing link text</a>.
</p>
跳过链接
为了方便键盘标签页导航，您可以提供一个 跳过链接，让用户可以跳过网页中的某些内容块。您可能希望允许用户跳过页面上重复出现的导航链接。这使得键盘用户能够快速跳过重复内容，直接转到页面的主内容。
<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 属性值包含的信息。
<!-- 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> 元素。
<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 图像。
<img src="mdn.svg" alt="MDN logo" role="img" />