HTML 无障碍性
HTML 无障碍性
始终以无障碍性为前提编写 HTML 代码！
为用户提供一种良好的方式来浏览和与您的网站互动。使您的 HTML 代码尽可能地 **语义化**。
语义化 HTML
语义化 HTML 指尽可能地使用正确的 HTML 元素来实现其正确的目的。语义元素是指具有意义的元素；如果您需要一个按钮，请使用 <button> 元素（而不是 <div> 元素）。
语义化 HTML 为屏幕阅读器提供上下文，屏幕阅读器会大声朗读页面的内容。
以按钮示例为例
- 按钮默认情况下具有更合适的样式
- 屏幕阅读器将其识别为一个按钮
- 可聚焦
- 可点击
按钮也适用于依赖键盘导航的人员；它可以使用鼠标和键盘点击，并且可以使用（使用键盘上的 Tab 键）在按钮之间切换。
**非语义化** 元素的示例：<div> 和 <span> - 不提供关于其内容的任何信息。
**语义化** 元素的示例：<form>、<table> 和 <article> - 清楚地定义了其内容。
标题很重要
标题使用 <h1> 到 <h6> 标签定义
搜索引擎使用标题来索引网页的结构和内容。
用户通过标题浏览您的页面。使用标题来显示文档结构以及不同部分之间的关系非常重要。
屏幕阅读器还将标题用作导航工具。不同类型的标题指定了页面的大纲。 <h1> 标题应用于主标题，然后是 <h2> 标题，然后是重要性较低的 <h3>，依此类推。
**注意：** 仅将 HTML 标题用于标题。不要使用标题来使文本 **变大** 或 **加粗**。
替代文本
alt 属性为图像提供了替代文本，如果用户由于某种原因无法查看图像（连接速度慢， src 属性中的错误，或者用户使用屏幕阅读器），则可以提供替代文本。
alt 属性的值应描述图像
如果浏览器找不到图像，它将显示 alt 属性的值
声明语言
您应该始终在 <html> 标签内包含 lang 属性，以声明网页的语言。其目的是帮助搜索引擎和浏览器。
以下示例指定英语为语言
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
使用清晰的语言
始终使用清晰易懂的语言。此外，请尝试避免使用屏幕阅读器无法清晰读取的字符。例如
- 使句子尽可能简短
- 避免使用破折号。不要写 1-3，写 1 到 3
- 避免使用缩写。不要写 Feb，写 February
- 避免使用俚语
创建良好的链接文本
链接文本应清楚地解释单击该链接后读者将获得哪些信息。
良好链接和不良链接的示例
**注意：** 本页是对 Web 无障碍性的简介。访问我们的 无障碍性教程 以了解更多详细信息。
