HTML 无障碍

❮ 上一节 HTML 参考❯

HTML 辅助功能

编写 HTML 代码时始终考虑可访问性！

为用户提供一种良好的方式来导航您的网站并与之交互。将您的 HTML 代码设置为语义尽可能。

语义HTML

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

语义学

<button>Report an Error</button>

亲自试一试 »

非语义的

<div>Report an Error</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属性应该描述图片：

示例

亲自试一试 »

如果浏览器找不到图片，它将显示该图片的值alt属性：

示例

亲自试一试 »

声明语言

您应该始终包括lang里面的属性<html>标签，声明网页的语言。这是为了帮助搜索引擎和浏览器。

以下示例指定英语作为语言：

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

...

</body>
</html>

使用清晰的语言

始终使用清晰、易于理解的语言。还要尽量避免使用屏幕阅读器无法清晰读取的字符。例如：

句子尽可能短
避免破折号。不要写 1-3，而是写 1 到 3
避免缩写。不要写二月，而写二月
避免俚语

创建良好的链接文本

链接文本应清楚地解释读者通过单击该链接将获得哪些信息。

好链接和坏链接的示例：

好的

Find out more about the HTML language

坏的

Click here