HTML 可访问性
HTML 可访问性
写 HTML 代码时一定要考虑到可访问性！
为用户提供一个很好的方式来浏览和互动你的网站。使你的 HTML 代码尽可能具有语义。
语义 HTML
语义 HTML 意味着尽可能使用正确的 HTML 元素来实现它们的正确目的。语义元素是有意义的元素；如果需要按钮，请使用<button>元素（而不是<div>元素）。
语义 HTML 为屏幕阅读器提供上下文，屏幕阅读器大声读出页面内容。
按钮示例：
- 默认情况下，按钮具有更合适的样式
- 屏幕阅读器将其标识为按钮
- 聚焦的
- 可点击
依赖于纯键盘导航的用户也可以访问按钮；它可以用鼠标和键来单击，也可以在两者之间使用制表符（使用键盘上的制表符键）。
非语义non-semantic元素的例子：<div>和<span>-没有说明它的内容。
语义semantic元素示例：<form>, <table>, and <article> - 明确定义了其内容。
标题很重要
标题由<h1>到<h6>标记定义：
搜索引擎使用标题来索引网页的结构和内容。
用户通过标题浏览页面。使用标题来显示文档结构和不同部分之间的关系是很重要的。
<h1> 标题应用于主标题，然后是<h2>标题，然后是不太重要的<h3>，依此类推。
注释： 仅对标题使用HTML标题。不要用标题使文本变大或加粗。
替代文本
如果用户由于某种原因无法查看图像（由于连接速度慢、src属性出错或用户使用屏幕阅读器），则alt属性为图像提供备用文本。
alt属性的值应该描述图像：
如果浏览器找不到图像，它将显示 alt 属性的值：
声明语言
您应该始终在<html>标记中包含lang 属性，以声明网页的语言。这是为了帮助搜索引擎和浏览器。
以下示例指定英语为语言：
<html lang="en">
<body>
...
</body>
</html>
使用清晰的语言
要使用清晰的语言，那是很容易理解的。同时，尽量避免屏幕阅读器无法清晰读取的字符。例如：
- 句子尽量简短
- 避免破折号。不是写1~3，而是写1-3
- 避免使用缩写。
- 避免使用俚语
创建好的链接文本
链接文本应该清楚地解释读者通过点击链接将获得什么信息。
好链接和坏链接的示例：
标题属性
title 标题属性指定有关元素的额外信息。
当鼠标移到元素上时，信息通常显示为工具提示文本。
title标题属性可以用于任何HTML元素（它将在任何HTML元素上验证，但是它不一定有用）。
