屏幕阅读器默认不读文字，因其无语义；需用语义化标签（如）或aria属性（如role、aria-live）明确可访问性，并配合键盘导航与焦点管理实现真无障碍。
屏幕阅读器真的会读 <div> 里的文字吗
<p>不会，除非你明确告诉它这是可读内容。默认情况下，<code><div> 和 <code><span></span> 是“无语义”的容器，屏幕阅读器（如 NVDA、VoiceOver、JAWS）会跳过它们，或仅在聚焦时读出纯文本（取决于上下文和浏览器渲染模式）。真正被识别为“可读块”的是语义化标签，比如 <h1></h1>、<p></p>、<article></article>、<nav></nav> —— 它们自带 ARIA 隐式角色（heading、paragraph、article、navigation），阅读器靠这个决定“读什么”和“怎么读”。
实操建议：
- 把纯视觉分组的
<div class="card"> 换成 <code><article></article>或加role="article"（优先语义化标签） - 避免用
<div onclick="..."> 模拟按钮；改用 <code><button></button>，否则键盘无法聚焦、阅读器不报“按钮” - 动态插入的文字（如 Toast 提示）必须加
aria-live="polite"，否则阅读器根本不会主动读 - 给
<input>同时写aria-label和label：阅读器只读aria-label，原<label></label>形同虚设 - 用
aria-labelledby引用一个不可见（display: none或visibility: hidden）的元素：阅读器读不到，因为 DOM 中不可访问 - 多个 ID 写错空格或逗号：
aria-labelledby="id1, id2"是错的，正确是aria-labelledby="id1 id2" - 复选框/单选组：用
<fieldset></fieldset>+<legend></legend>定义组意图，比每个都加aria-label更清晰 - 搜索框：如果只有一个
<input type="search">，加上aria-label="站内搜索"可接受；但若有独立搜索按钮，必须让按钮和输入框形成关联（aria-controls或aria-describedby） - 隐藏标签（仅视觉隐藏）：用
class="sr-only"（CSS 为position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;），别用display: none - 未 trap focus：Tab 键会跳出对话框，进入背景页面，用户迷失
- 没设
aria-modal="true"（或旧版用aria-hidden="true"手动切背景）：NVDA 在某些模式下仍会读背景内容 - 初始焦点没指向第一个可交互元素（如确认按钮或输入框）：用户不知道从哪开始，尤其盲人用户无法靠视觉定位
- React/Vue 组件中动态挂载 dialog 时，若没在
useEffect/mounted里手动focus()，焦点不会自动落进去
aria-label 和 aria-labelledby 到底该选哪个
区别不在“哪个更好”，而在“谁控制描述权”。aria-label 是硬编码文案，适合图标按钮（如 <button aria-label="删除"><i class="icon-trash"></i></button>）；aria-labelledby 是引用页面上已有文本的 ID，适合复用标题或避免重复维护。
常见错误现象：
表单控件没 <label></label> 就等于对屏幕阅读器“失联”
没有显式 <label for="xxx"></label> 或包裹式 <label><input>邮箱</label> 的输入框，99% 的屏幕阅读器不会播报其目的。用户听到的可能只是“编辑文本，空白”，完全不知道要填什么。
使用场景与参数差异：
为什么用了 role="dialog" 还是没法键盘导航
因为角色只是“声明”，不是“实现”。role="dialog" 告诉阅读器“这是个对话框”，但焦点管理、Esc 关闭、背景遮罩不可交互、初始焦点设置——全得手写 JS 补齐。缺任何一环，键盘用户就会卡死或误操作。
性能与兼容性影响：
最常被忽略的一点：所有自定义弹窗、下拉菜单、选项卡面板，只要不是原生 <select></select> 或 <details></details>，就必须同时满足语义角色 + 键盘行为 + 焦点逻辑 —— 少一个，就不是真无障碍。
