HTML 无障碍访问

HTML 无障碍访问

编写 HTML 代码时始终要考虑到无障碍访问！

为用户提供良好的网站导航和交互方式。尽可能使您的 HTML 代码具有语义性。

语义化 HTML

语义化 HTML 意味着尽可能为正确的目的使用正确的 HTML 元素。语义元素是具有意义的元素；如果您需要一个按钮，请使用 <button> 元素（而不是 <div> 元素）。

语义化

<button>报告错误</button>

亲自试一试

非语义化

<div>报告错误</div>

亲自试一试

语义化 HTML 为屏幕阅读器提供了上下文，屏幕阅读器会大声朗读页面内容。

以按钮示例为例：

  • 按钮默认具有更合适的样式
  • 屏幕阅读器将其识别为按钮
  • 可获得焦点
  • 可点击

按钮对于仅依赖键盘导航的用户也是可访问的；它可以用鼠标和键盘点击，并且可以使用 Tab 键在元素之间切换。

非语义化元素的示例：<div> 和 <span> - 对其内容没有说明。

语义化元素的示例：<form>、<table> 和 <article> - 明确定义其内容。

标题很重要

标题使用 <h1> 到 <h6> 标签定义：

实例

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

亲自试一试

搜索引擎使用标题来索引网页的结构和内容。

用户通过标题来浏览您的页面。使用标题来展示文档结构和不同部分之间的关系非常重要。

屏幕阅读器也使用标题作为导航工具。不同类型的标题指定了页面的大纲。<h1> 标题应用于主标题，其次是 <h2> 标题，然后是重要性较低的 <h3>，依此类推。

注意：HTML 标题仅用于标题。不要使用标题来使文本变大或加粗。

替代文本

alt 属性为图像提供替代文本，如果用户因某些原因无法查看图像（由于连接速度慢、src 属性错误或用户使用屏幕阅读器）。

alt 属性的值应描述图像：

实例

<img src="chania.jpg" alt="一条狭窄的干尼亚城市街道，两旁有鲜花">

亲自试一试

如果浏览器无法找到图像，它将显示 alt 属性的值：

实例

<img src="wrongname.gif" alt="一条狭窄的干尼亚城市街道，两旁有鲜花">

亲自试一试

声明语言

您应始终在 <html> 标签内包含 lang 属性，以声明网页的语言。这有助于搜索引擎和浏览器。

下面的例子指定英语为语言：

<!DOCTYPE html>
<html lang="en">
<body>

...

</body>
</html>

使用清晰的语言

始终使用清晰易懂的语言。同时尽量避免使用屏幕阅读器无法清晰读取的字符。例如：

  • 保持句子尽可能简短
  • 避免使用破折号。与其写 1-3，不如写 1 到 3
  • 避免缩写。与其写 Feb，不如写 February
  • 避免使用俚语

创建良好的链接文本

链接文本应清楚说明读者通过点击该链接将获得什么信息。

良好和不良链接的示例：

良好

了解更多关于 HTML 语言的信息

阅读更多关于如何健康饮食的信息

在此购买火星门票

亲自试一试

不良

点击此处

阅读更多..

在此购买火星门票

亲自试一试

注意：本页是网络无障碍访问的介绍。有关更多详细信息，请访问我们的无障碍访问教程。