直接加 alt、lang、aria-label 和 tabindex 四类属性可解决80%以上基础可访问性问题；需正确使用：img 必须设 alt（装饰性为""，内容型需传达核心信息），SVG 内联时加 role="img"+aria-label，表单控件须显式绑定 label，tabindex="0" 用于可聚焦元素，lang 声明全局语言，title 作语义补充而非 tooltip 替代。
直接加 alt、lang、aria-label 和 tabindex 这四类属性，能解决 80% 以上的基础可访问性断裂问题。不靠 JS 拦截或复杂 ARIA 套件，纯 HTML 层就能让屏幕阅读器用户听懂页面、键盘用户顺利导航。
img 的 alt 不是“可选”，而是强制识别路径
缺失 alt 的 <img> 对屏幕阅读器而言等于“此处有一张图，但不知道是什么”——它可能读出文件名（如 icon_menu.png），也可能完全跳过。装饰性图片必须写 alt=""，而非省略；内容型图片的 alt 要能独立传达图像核心信息，比如图表不能只写“柱状图”，而应写“2024 年各季度销售额：Q1 ￥240 万，Q2 ￥310 万…”
- 避免用
alt堆砌关键词，屏幕阅读器会逐字朗读，影响理解节奏 - SVG 图标若内联在 HTML 中，需加
role="img"+aria-label，因为<svg></svg>本身无语义 -
<picture></picture>包裹多源时，alt放在最内层<img>上，不是<picture></picture>
表单控件必须显式绑定 <label></label>，别依赖视觉对齐
仅靠 CSS 把文字放在输入框旁边，屏幕阅读器无法自动关联两者。用户聚焦 <input> 时，听不到这是“邮箱”还是“密码”。显式绑定有两种方式：
- 用
for和id：给<input id="email">配<label for="email">邮箱地址</label> - 用隐式包裹：把
<input>直接放进<label></label>标签内，更简洁且无需维护 ID 一致性 - 禁用
aria-label替代<label></label>—— 它绕过表单验证逻辑，且无法被某些辅助技术稳定读取
tabindex 的值决定元素是否进键盘流，不是“加了就能聚焦”
tabindex="0" 表示按 Tab 键可进入该元素，tabindex="-1" 表示只能用 JS 主动聚焦（比如模态框打开后自动聚焦到关闭按钮），tabindex="1" 及以上会破坏自然顺序，引发键盘导航混乱。
- 自定义按钮（如
<div onclick>）必须加 <code>tabindex="0"+role="button"，否则键盘用户无法触发 - 禁用状态的控件（如
disabled的<button></button>）会自动退出焦点流，此时再设tabindex="0"无效 - 避免给纯展示性元素（如
<div> 文本块）加 <code>tabindex="0"，这会让键盘用户被迫“穿过”大量无操作内容lang和title是低侵入、高回报的全局属性lang决定屏幕阅读器用什么语音引擎读文本，title则为悬停/聚焦提供补充说明。它们不改变样式或行为，但直接影响非视觉用户的上下文理解。-
必须声明，子元素可用lang="en"覆盖局部语言（如英文引文） -
title不是 tooltip 替代品，而是语义补充；按钮带图标时，title="删除第3项"比空title或泛泛的 “操作” 更有效 - 慎用
title替代alt：图片的title不会被屏幕阅读器作为替代文本读出，仅作悬停提示
真正容易被忽略的是：所有这些属性一旦写错（比如拼错
aria-labelledby引用的 ID），就会静默失效——既不报错，也不警告，只是让辅助技术彻底“看不见”那段信息。检查时别只看代码有没有，得用屏幕阅读器实际听一遍，或用浏览器 DevTools 的 Accessibility 面板验证可访问名称是否生成正确。 -
