跳到主要内容

HTML 无障碍性

提示
  1. HTML辅助功能的重要性：强调了让网站对所有用户，包括残障人士和移动设备用户，更加友好和易于访问的重要性。
  2. 实现辅助功能的方法：提出了几种方法来增强HTML的辅助功能，如使用语义化HTML、提供良好的替代文本、正确使用标题、设置HTML语言属性和编写描述性链接文本。
  3. 网络辅助功能标准：介绍了网络辅助功能的组成部分，包括Web内容、用户代理和授权工具，以及在某些国家，将辅助功能整合入网站是法律要求。

辅助功能是指让你的网站尽可能对更多用户友好的实践。它有助于残障人士和使用移动设备或网速较慢的互联网连接的人士。

使 HTML 辅助功能更强的方法​

通过确保正确的 HTML 元素被用于正确的目的，可以使网页内容更易于访问。使 HTML 辅助功能更强的一些主要方式如下：

  • 语义化 HTML
  • 良好的替代文本
  • 正确使用标题
  • HTML lang 属性
  • 描述性链接文本

我们将详细了解每一种方式：

语义化 HTML​

语义化 HTML 意味着出于正确的目的使用正确的 HTML。如果你的网页上需要一个按钮，请使用 <button> 标签而不是 <div> 标签。例如，

<button> 标签​

<button>登录</button>

浏览器输出

简单按钮示例

<div> 标签​

<div>登录</div>
<style>
  div,
  button {
    border: 1px solid #767676;
    display: inline;
    padding: 5px;
    background: #efefef;
    border-radius: 3px;
    font-family: "Arial";
  }
</style>

浏览器输出

使用 CSS 修改以类似按钮的 div

如你所见，通过一些 CSS，我们也可以使 <div> 看起来像 <button>。有些人也这样做，但这对辅助功能来说非常不利。按钮有一些内置的辅助功能特性，如果我们使用 <div> 就会错过这些特性。其中包括：

  • 可点击
  • 可聚焦
  • 屏幕阅读器将其读作按钮。
  • 它可以通过键盘访问。
  • 还有更多。

因此，使用明确定义其内容的适当语义化 HTML，如 <form>、<article>、<figure>、<header>，比使用像 <div> 或 <span> 这样的非语义标签更好，因为后者不会提供关于内容的任何信息。

良好的替代文本​

alt 属性是图像的文本描述。alt 属性的值应描述图像，使得即使图像无法加载，内容仍然有意义。例如，

<img src="cat.jpg" alt="一只白猫躺在椅子上睡觉" />

在这个例子中，一只白猫躺在椅子上睡觉 由屏幕阅读器大声朗读，这有助于视觉障碍人士理解网页上显示的图像。这对网速慢的人也有益处。

正确使用标题​

标题有助于构建文档结构。标题用 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 标签定义。

<h1>在线教程</h1>

屏幕阅读器使用标题进行导航。不同类型的标题指定了页面的大纲。标题有助于屏幕阅读器正确传达上下文给用户。

HTML lang 属性​

<html> 标签中的 lang 属性标识网页的主要语言给浏览器、翻译软件、屏幕阅读器等。例如，

<html lang="en">
  /* 英文页面的其余内容 */
</html>

这里，lang = "en" 指定页面内容为英语。

描述性链接文本​

HTML 链接文本应清

楚地解释读者点击它后将获得的信息。

一个好的链接应该总是在锚标签内有相关的文本。

click here、visit 是链接文本的糟糕示例。

描述性链接文本的好例子包括 访问 HTML 链接以了解更多关于 HTML 链接的信息、访问 马上学123 以了解更多关于编程的信息 等。

网络辅助功能标准​

网络辅助功能依赖于多个共同工作的组件，其中一些如下所述：

  • Web 内容 - 指网站的任何部分，包括文本、图像、表单和多媒体。这是我们在 HTML、CSS 和 JS 中编写的代码。
  • 用户代理 - 人们用来访问 Web 内容的软件。
  • 授权工具 - 人们用来开发 Web 内容的软件或工具，包括网页编辑器、文档转换工具等。

注意： 在一些国家，将辅助功能实现到网站上甚至是法律的一部分。

最后于 更新