aria-label需作用于可聚焦或具语义的交互元素（如button、a）或带role的容器，纯div/span无效；空值或冗余描述会导致屏幕阅读器跳过或重复朗读。
aria-label 怎么写才不会被屏幕阅读器跳过
写了 aria-label 却没读出来？大概率是元素本身不可聚焦或语义缺失。它只对交互元素（如 button、a）或带 role 的容器生效，纯 div 或 span 加了也没用。
- 按钮没文字但有图标？直接加
aria-label="删除"，别留空或写“图标” - 链接指向 PDF？补上
aria-label="年度报告（PDF）"，让听障用户知道文件类型 - 避免和可见文本重复，比如
<button aria-label="提交">提交</button>—— 屏幕阅读器会读两遍
alt 属性不是可选的，但空值有讲究
alt 是图像无障碍的底线。不写会被读作“图片”，写了空字符串 alt="" 才代表“纯装饰图，无需描述”。初学者常把两者搞混，结果屏幕阅读器强行念出一堆无意义的“图片”。
- 信息图、图表必须写实质描述，比如
alt="2023年用户留存率：7日留存42%，30日留存18%" - 头像图若含姓名，写
alt="张伟，产品设计师"；若只是占位符且无上下文，才用alt="" -
img标签缺alt时，部分浏览器会显示破损图标，WCAG 直接判为 A 级失败
role="navigation" 和 nav 标签别混着用
用 role="navigation" 不等于替代 <nav>。前者是给非语义标签“打补丁”，后者是原生语义。初学者为了“看起来高级”硬套 role，反而破坏浏览器默认行为。
- 导航栏用
<nav><ul>...</ul></nav>就够了，不用额外加role - 只有老项目里一堆
div套div时，才考虑<div role="navigation">，且必须配aria-label或aria-labelledby -
role="navigation"不会自动让内部链接获得导航快捷键支持，得靠键盘焦点流配合
focusable 元素必须有键盘响应逻辑
加了 tabindex="0" 让 div 可聚焦，却不处理 Enter 或 Space 键？这会让键盘用户卡住。无障碍不是加属性就完事，得跟操作链对齐。
立即学习“前端免费学习笔记（深入）”；
- 自定义按钮：加
tabindex="0"+role="button"+keydown监听Enter/Space - 展开/折叠区域：除了
aria-expanded，还得用aria-controls指向目标区域 ID - 禁用状态别只靠 CSS 灰掉，得同步设
aria-disabled="true"和tabindex="-1"
最易被忽略的是焦点管理 —— 模态框打开后焦点没锁进内部，关闭后没回退到触发点。这点没做，前面所有属性都白搭。
