应使用 aria-label 为无文本按钮/图标提供无障碍文本，避免混用 title；装饰性图片设 alt=""，功能性图片用 alt 或 role="img"+aria-label；纯装饰元素用 aria-hidden="true"；复杂说明用 aria-describedby 关联可见描述块。
用 aria-label 替换按钮/图标中的不可见文本
屏幕阅读器无法理解纯 <svg> 或空 <button> 的意图，必须显式提供文本替代。直接写死文本会破坏 UI 一致性，所以用 aria-label 是最轻量、兼容性最好的方案。
常见错误是把 aria-label 和 title 混用：title 只触发鼠标悬停提示，对无障碍无效；而 aria-label 会被读屏软件优先读出，且不渲染到页面。
-
aria-label值应为简短、动词开头的中文（如“删除文件”“展开菜单”），避免“图标”“按钮”等冗余词 - 若组件已有可见文字（如按钮内含“提交”），不要加
aria-label，否则会重复朗读 - React/Vue 中动态绑定时，确保值非空字符串，否则部分读屏器会跳过该元素
用 alt 和 role="img" 控制图片语义
不是所有图片都需要 alt 描述——装饰性图片应设为 alt=""，功能性图片（如链接图标、操作按钮）必须有明确 alt。但当图片作为 CSS 背景图出现时，alt 不生效，此时需用 role="img" + aria-label 补救。
典型场景：用 <div style="background-image: url(…)"> 实现 icon，又想让读屏器识别。单纯加 alt 无效，因为这不是 <img> 元素。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置
role="img"和aria-label，否则部分读屏器忽略该div - 避免用
aria-labelledby指向隐藏<span>，增加 DOM 复杂度且易被误删 - 如果图片内容随状态变化（如“播放”变“暂停”），
aria-label必须同步更新，否则读屏器仍读旧值
用 aria-hidden="true" 隐藏纯装饰性非文本元素
有些 SVG 图标、分隔线、加载动画纯粹为视觉服务，既无功能也无需被读出。此时不能靠 CSS display: none 或 visibility: hidden —— 它们虽隐藏视觉，但某些读屏器仍会尝试解析内部结构。
正确做法是加 aria-hidden="true"，它明确告诉辅助技术“忽略这个节点及其所有子节点”，比样式隐藏更可靠。
- 仅用于无交互、无语义的装饰元素，比如页脚的花纹 SVG、卡片间的分割线
<hr> - 切勿在可聚焦元素（如
<button>、<a>）上使用aria-hidden="true"，否则键盘用户无法操作 - 若父容器已设
aria-hidden="true"，子元素无需重复设置，避免冗余
用 aria-describedby 关联复杂非文本内容的说明
当一个图标或图表需要多句解释（比如信息图、带状态的徽标），aria-label 字数受限、不易维护，更适合用 aria-describedby 指向一个独立的描述块。
关键点在于：描述块本身必须存在且可访问，不能是 display: none，推荐用 visually-hidden 技巧隐藏视觉但保留读屏可读性。
- 描述块用
<div id="desc-id">…</div>，确保 ID 唯一且与aria-describedby值一致 - 描述内容要简洁，避免嵌套列表或长段落，读屏器可能截断
- 若描述内容动态生成（如实时数据徽标），需确保 DOM 更新后，
aria-describedby仍指向最新节点
aria-label，要么靠关联文本，要么靠焦点管理。否则键盘用户卡在那儿，读屏器一声不吭。 
