iOS Safari 不支持 title 提示，移动端用户无法获取其内容；关键信息须用 aria-describedby 关联真实 DOM 元素，并在真机验证。
title 属性在桌面端能用，但移动端根本不会触发
写了 title="查看详情" 却在 iPhone 上长按没反应？不是代码错了，是 iOS Safari 从不支持 title 的悬停或长按提示机制。Android 浏览器表现也不统一，部分仅在长按时短暂弹出，且无焦点管理、不可键盘操作。
这意味着：把关键操作说明（比如“该按钮将删除全部数据”）只塞进 title，等于对移动端用户完全失语。它只适合极简补充，例如 <abbr title="World Wide Web">WWW</abbr> 这类静态缩写解释。
- 别用
title替代表单错误提示、操作后果说明、动态状态更新 - 若必须提供额外文本，优先用
aria-describedby关联真实 DOM 元素（如<span id="hint-1" class="sr-only">删除后不可恢复</span>） - 测试时务必在真机 Safari 和 Chrome for iOS 上验证，不能依赖桌面模拟器
role 不是“加了就可访问”，而是要配齐 tabindex + 键盘事件
给一个 <div> 加上 role="button"，屏幕阅读器会读成“按钮”，但用户 Tab 键进不去、空格/回车按了没反应——这比不加更危险，属于挂假招牌。
真正让自定义按钮可用，三件套缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
tabindex="0"：让元素进入标准键盘导航流 -
onkeydown监听：显式处理Enter和Space（注意Space必须preventDefault()，否则触发页面滚动） - 视觉焦点样式：比如
:focus-visible { outline: 2px solid #007aff; }，否则键盘用户看不到当前在哪
原生 <button> 完全不需要加 role="button"；加了反而可能干扰旧版读屏器识别。
aria-hidden="true" 会整棵树“消失”，连里面的真实按钮都不可聚焦
模态框打开时，常有人给背景区域加 aria-hidden="true" 来隐藏内容。但如果写成这样：
<body aria-hidden="true"> <div id="modal">...</div> </body>
那 #modal 里的所有子元素——包括里面的 <button>、<input>——全被可访问树剔除，屏幕阅读器读不到，键盘也 Tab 不进去。
正确做法是：
- 只给背景容器加
aria-hidden="true"，确保模态框自身不在其内部（即模态框是同级兄弟节点，或用aria-hidden="false"显式覆盖） - 模态框开启后，用 JavaScript 把焦点强制移到第一个可聚焦元素（如主操作按钮），关闭时再切回触发按钮
- 禁用状态不要只靠 CSS 灰显，必须配
aria-disabled="true"，否则读屏器仍会把它当作可操作项
lang 和 dir 是多语言页面的硬性基础，不是“锦上添花”
lang="zh" 不只是告诉搜索引擎这是中文页，它直接决定屏幕阅读器用哪种语音引擎朗读、标点停顿是否合理、数字读法（如“123”读作“一百二十三”还是“一二三”）。漏掉它，视障用户听到的就是错乱音节。
dir="rtl" 同理：阿拉伯语、希伯来语页面若没设，表单输入光标、按钮图标顺序、文字对齐都会反向错位，且无法靠 CSS 修复。
-
<html lang="zh-Hans">比lang="zh"更精确，明确简体中文（避免繁体引擎误读） - 嵌套内容语言不同时，可在局部覆盖，如
<span lang="en">React</span> -
dir建议用 HTML 属性而非 CSSdirection，因为后者不参与可访问树计算
这些属性一旦设错，后续所有 ARIA 补救都难挽回——它们是整个可访问链路的地基，不是最后补丁。
