绝对定位和固定定位会破坏屏幕阅读器语义流，需显式补充ARIA属性；相对与粘性定位较安全但需防焦点错位；transform平移比top/left更友好，但仍不能替代语义结构。
绝对定位和固定定位会直接破坏屏幕阅读器的语义流，除非你显式补全可访问性语义；相对定位和粘性定位基本安全，但视觉偏移仍可能引发焦点错位。
position: absolute / fixed 会让屏幕阅读器“跳过”元素
当元素脱离文档流后，若没加 role、aria-labelledby 或 aria-live，屏幕阅读器大概率不会主动读取它——尤其它在 DOM 中位置靠后时。常见现象包括：
- 弹窗打开后，标题不自动朗读，用户不知道当前在什么界面
- 用
position: absolute实现的 Tooltip，只靠::before显示文字，屏幕阅读器完全无视 - 广告浮层写在
<footer>里，视觉上盖在主内容上，但朗读顺序仍是先读 footer 最后才读主内容
解决办法不是“加个 aria-hidden="false"”，而是按语义重建结构：
<div role="dialog" aria-labelledby="modal-title" aria-modal="true"> <h2 id="modal-title">确认操作</h2> <button>取消</button> <button>确定</button> </div>
同时必须手动管理焦点：focus() 到第一个按钮，关闭后恢复到触发源。
立即学习“前端免费学习笔记（深入）”；
z-index 高 ≠ 可访问性高，反而容易卡住键盘焦点
一个 z-index: 9999 的遮罩层如果没设 pointer-events: none，又没加 tabindex="-1"，键盘用户按 Tab 时焦点会停在它身上——但它是空的、不可见的、无法操作的。
检查方法很简单：打开控制台运行 document.activeElement，再连按几次 Tab，看焦点是否意外停在不该停的元素上。
安全做法是：
- 非交互型遮罩（如半透明背景）：加
pointer-events: none，且确保无tabindex、无子元素可聚焦 - 交互型浮层（如含关闭按钮的弹窗）：必须实现
focus-trap，限制焦点只在内部循环 - 避免给
body或html设overflow: hidden后忘记同步处理inert或aria-hidden
transform 平移比 top/left 更友好，但不能替代语义
transform: translate() 不改变文档流，屏幕阅读器仍按 DOM 顺序读取，键盘焦点也能自然抵达——这是它比 position: absolute 安全的核心原因。
但注意：
- 对原本不可聚焦的
<div>应用transform，它依然不可聚焦；需手动加tabindex="0"并监听Enter/Space - 仅适合纯视觉调整：图标微位移、卡片悬停上浮、加载动画偏移
- 不适合构建导航菜单或模态框——这些必须有正确
<nav>、role="menu"、aria-expanded等语义链
fixed 导航栏遮挡锚点跳转，必须配 scroll-margin-top
点击 #section2 或使用屏幕阅读器“跳到主内容”快捷键时，目标元素常被 position: fixed 的顶部导航栏盖住，导致内容不可见或朗读错位。
最简解法是给主内容区加：
<main id="main" role="main" style="scroll-margin-top: 64px;">
其中 64px 对应导航栏高度；若导航栏高度动态变化，用 CSS 自定义属性 + calc() 更稳妥：
:root { --header-height: 64px; }
main { scroll-margin-top: calc(var(--header-height) + 8px); }
别依赖 JS 计算滚动偏移——它在 SSR 或首屏渲染阶段不可控，且与屏幕阅读器的原生锚点行为不同步。
