语义化html是无障碍与seo基础，aria仅作补充；原生标签自带行为与语义，错误使用aria会破坏体验；aria属性需成对使用，aria-label与aria-labelledby不可共存，aria-live需配合dom操作与焦点管理。
语义化 HTML 本身就能同时改善无障碍体验和 SEO 表现，ARIA 是补位工具，不是替代方案——用错地方反而会破坏读屏体验、干扰爬虫理解。
为什么不能只靠 ARIA 补救语义缺失
浏览器和读屏器对 <nav></nav>、<main></main>、<button></button> 这类原生标签有强共识，它们自带隐式 role 和键盘行为；而 role="navigation" 加在 <div> 上，只是“告诉”辅助技术“这是导航”，但不提供焦点管理、Tab 键跳转逻辑或默认语义上下文。
<ul><li><code><div class="nav"> + <code>role="navigation"：读屏器可能识别为导航区，但键盘用户无法用 Shift+Tab 回退到上一个语义区块，也无法被 NVDA 的“N”快捷键定位
<nav></nav>：天然支持所有导航快捷键，且 Googlebot 明确将 <nav></nav> 内链接视为站点核心导航路径，影响 PageRank 分配aria-hidden="true" 的 <nav></nav>，读屏器直接跳过——但搜索引擎仍会抓取并索引其中链接，导致“可访问性关闭、SEO 仍在运行”的错配哪些 ARIA 属性必须配对使用
单独写 role="dialog" 或 aria-expanded="true" 几乎没用，状态与角色必须同步更新，否则读屏器读到的永远是“假状态”。
- 模态框：必须同时有
role="dialog"、aria-modal="true"、aria-labelledby="modal-title"，且打开时要focus()到第一个可聚焦元素 - 下拉菜单：
role="listbox"要配合aria-activedescendant（指向当前高亮项 ID）+aria-expanded（控制按钮状态）+ 键盘方向键逻辑 - 开关控件：不用
<input type="checkbox">就得手动实现role="switch"+aria-checked+tabindex="0"+ Space 键响应 + 视觉反馈切换
aria-label 和 aria-labelledby 怎么选不翻车
关键看“描述文本是否已在页面中可见”。写死 aria-label 容易和 UI 脱节，尤其在多语言或文案迭代场景下。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用
aria-labelledby：搜索框旁有<label id="search-label">查找商品</label>，输入框写aria-labelledby="search-label"—— 翻译时只需改 label 文本，无障碍提示自动同步 - 用
aria-label：纯图标按钮如<button aria-label="删除此项"><svg>...</svg></button>，但注意不要和内部文本冲突：<button aria-label="提交">发送</button>会导致“发送”被静音 - 禁用组合：
aria-label和aria-labelledby同时存在时，后者被忽略，Lighthouse 会报aria-label-and-aria-labelledby错误
动态内容更新时 aria-live 容易漏掉的关键点
aria-live 不是“设了就播报”，它依赖 DOM 插入方式、区域绑定位置、以及读屏器当前模式。很多团队只加属性，却不验证是否真被朗读。
- 必须包裹最小必要节点：比如表单提交后只更新
<div aria-live="polite"></div>包着<p>提交成功</p>，而不是整个<form></form> - 避免用
innerHTML = ...替换整个区域——这会销毁原有 live 区域节点，新插入的内容不会触发播报；应改用textContent或appendChild -
aria-live="assertive"仅用于中断性操作（如登录失败弹窗），表单校验提示一律用polite，否则每输一个字都打断语音流 - 模态框打开时，若把
设为aria-hidden="true"，背景内容虽不可见，但屏幕阅读器已跳过——正确做法是用inert属性（现代浏览器）或tabindex="-1"+focus()锁定焦点
最常被漏掉的是键盘焦点流和 aria-live 的配合：比如提交后提示“成功”，光视觉显示不行，得让读屏器主动播报；而播报的前提是焦点没卡在按钮上、live 区域没被 JS 销毁、且文案没被 aria-label 覆盖掉。
