导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C ECMS

HTML 无障碍访问


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

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


语义化 HTML

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

语义化

<button>报告错误</button>
自己动手试一试 »

非语义化

<div>报告错误</div>
自己动手试一试 »

语义化 HTML 为屏幕阅读器提供上下文,屏幕阅读器会朗读页面的内容。

以按钮为例

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

按钮对于仅依赖键盘导航的用户也是可访问的;它可以通过鼠标和按键点击,并且可以通过 Tab 键(使用键盘上的 Tab 键)在不同元素之间切换。

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

语义化元素的例子:<form><table><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 标题用于标题。不要使用标题来使文本粗体


替代文本

alt 属性为图像提供替代文本,如果用户由于某种原因无法查看图像(因为连接缓慢、 src 属性中的错误或用户使用屏幕阅读器)。

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
  • 避免使用缩写。不要写 Feb,而是写 February
  • 避免使用俚语

创建良好的链接文本

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

良好和不良链接的示例

注意:本页面是网络可访问性的入门介绍。请访问我们的可访问性教程以获取更多详细信息。


Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。