HTML 可访问性

HTML 可访问性

写 HTML 代码时一定要考虑到可访问性!

为用户提供一个很好的方式来浏览和互动你的网站。使你的 HTML 代码尽可能具有语义。


语义 HTML

语义 HTML 意味着尽可能使用正确的 HTML 元素来实现它们的正确目的。语义元素是有意义的元素;如果需要按钮,请使用<button>元素(而不是<div>元素)。

语义

<button>点击这里</button>
亲自试一试 »

非语义

<div>点击这里</div>
亲自试一试 »

语义 HTML 为屏幕阅读器提供上下文,屏幕阅读器大声读出页面内容。

按钮示例:

  • 默认情况下,按钮具有更合适的样式
  • 屏幕阅读器将其标识为按钮
  • 聚焦的
  • 可点击

依赖于纯键盘导航的用户也可以访问按钮;它可以用鼠标和键来单击,也可以在两者之间使用制表符(使用键盘上的制表符键)。

非语义non-semantic元素的例子:<div><span>-没有说明它的内容。

语义semantic元素示例:<form>, <table>, and <article> - 明确定义了其内容。


标题很重要

标题由<h1><h6>标记定义:

实例

<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
亲自试一试 »

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

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

<h1> 标题应用于主标题,然后是<h2>标题,然后是不太重要的<h3>,依此类推。

注释: 仅对标题使用HTML标题。不要用标题使文本变大或加粗。



替代文本

如果用户由于某种原因无法查看图像(由于连接速度慢、src属性出错或用户使用屏幕阅读器),则alt属性为图像提供备用文本。

alt属性的值应该描述图像:

实例

<img src="img_chania.jpg" alt="花在公园">
亲自试一试 »

如果浏览器找不到图像,它将显示 alt 属性的值:

实例

<img src="wrongname.gif" alt="花在公园">
亲自试一试 »

声明语言

您应该始终在<html>标记中包含lang 属性,以声明网页的语言。这是为了帮助搜索引擎和浏览器。

以下示例指定英语为语言:

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

...

</body>
</html>

使用清晰的语言

要使用清晰的语言,那是很容易理解的。同时,尽量避免屏幕阅读器无法清晰读取的字符。例如:

  • 句子尽量简短
  • 避免破折号。不是写1~3,而是写1-3
  • 避免使用缩写。
  • 避免使用俚语

创建好的链接文本

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

好链接和坏链接的示例:


标题属性

title 标题属性指定有关元素的额外信息。

当鼠标移到元素上时,信息通常显示为工具提示文本。

title标题属性可以用于任何HTML元素(它将在任何HTML元素上验证,但是它不一定有用)。

实例

<p><abbr title="世界卫生组织">WHO</abbr> 成立于1948年。</p>

<p title="免费网络教程">W3Schools.com</p>
亲自试一试 »