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> 加上 <code>role="button"，屏幕阅读器会读成“按钮”，但用户 Tab 键进不去、空格/回车按了没反应——这比不加更危险，属于挂假招牌。

真正让自定义按钮可用，三件套缺一不可：

• tabindex="0"：让元素进入标准键盘导航流
• onkeydown 监听：显式处理 Enter 和 Space（注意 Space 必须 preventDefault()，否则触发页面滚动）
• 视觉焦点样式：比如 :focus-visible { outline: 2px solid #007aff; }，否则键盘用户看不到当前在哪

原生 <button></button> 完全不需要加 role="button"；加了反而可能干扰旧版读屏器识别。

aria-hidden="true" 会整棵树“消失”，连里面的真实按钮都不可聚焦

模态框打开时，常有人给背景区域加 aria-hidden="true" 来隐藏内容。但如果写成这样：

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

  <div id="modal">...</div>

那 #modal 里的所有子元素——包括里面的 <button></button>、<input>——全被可访问树剔除，屏幕阅读器读不到，键盘也 Tab 不进去。

正确做法是：

• 只给背景容器加 aria-hidden="true"，确保模态框自身不在其内部（即模态框是同级兄弟节点，或用 aria-hidden="false" 显式覆盖）
• 模态框开启后，用 JavaScript 把焦点强制移到第一个可聚焦元素（如主操作按钮），关闭时再切回触发按钮
• 禁用状态不要只靠 CSS 灰显，必须配 aria-disabled="true"，否则读屏器仍会把它当作可操作项

lang 和 dir 是多语言页面的硬性基础，不是“锦上添花”

lang="zh" 不只是告诉搜索引擎这是中文页，它直接决定屏幕阅读器用哪种语音引擎朗读、标点停顿是否合理、数字读法（如“123”读作“一百二十三”还是“一二三”）。漏掉它，视障用户听到的就是错乱音节。

dir="rtl" 同理：阿拉伯语、希伯来语页面若没设，表单输入光标、按钮图标顺序、文字对齐都会反向错位，且无法靠 CSS 修复。

• 比 lang="zh" 更精确，明确简体中文（避免繁体引擎误读）
• 嵌套内容语言不同时，可在局部覆盖，如 <span lang="en">React</span>
• dir 建议用 HTML 属性而非 CSS direction，因为后者不参与可访问树计算

这些属性一旦设错，后续所有 ARIA 补救都难挽回——它们是整个可访问链路的地基，不是最后补丁。