横竖屏切换时可访问性崩塌主因是布局切断语义流与焦点顺序，须同步加固HTML结构、CSS布局及JS监听：viewport必须设width=device-width且不可被JS覆盖，禁用user-scalable=no以满足WCAG 2.2缩放要求；优先用Grid+grid-template-areas重排区域而非绝对定位或flex-direction翻转；matchMedia监听需手动触发首次状态并同步更新aria-orientation与class。
横竖屏切换时可访问性崩塌，往往不是因为没加 aria-label，而是布局本身切断了语义流和焦点顺序——屏幕阅读器“读不到”，键盘用户“走不过”，触控目标“点不中”。必须从 HTML 结构、CSS 布局、JS 监听三处同步加固。
viewport 和媒体查询必须协同，否则 screen reader 读取错乱
仅靠 @media (orientation: landscape) 切换样式，对 VoiceOver/TalkBack 来说可能完全不可见：layout viewport 宽度在加载时已锁定，横屏后若未正确设置 width=device-width，屏幕阅读器仍按竖屏宽度解析 DOM 顺序，导致标签跳转错位、表单控件被跳过。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在<head>最顶部，且不能被 JS 动态覆盖 - 避免
user-scalable=no：它禁用辅助缩放，WCAG 2.2 明确要求支持 200% 缩放，否则视障用户无法看清表单字段 - 横屏下若用
transform: rotate(90deg)强制翻转容器，必须同步设置aria-orientation="horizontal"并更新tabindex顺序，否则焦点仍按原始 DOM 流走
Flex/Grid 布局重构要保 DOM 顺序，别用绝对定位“视觉欺骗”
很多横屏方案用 position: absolute 把按钮拖到右上角、或用 flex-direction: row-reverse 翻转导航栏，这会让键盘 Tab 键跳过元素，或让 TalkBack 按 CSS 渲染顺序而非 DOM 顺序朗读。
- 横屏布局优先用
display: grid划分区域：grid-template-areas可声明逻辑区域（如 "header sidebar main"），再通过媒体查询重排grid-area，DOM 顺序不变，可访问性不破 - 若必须用 Flex，改用
order属性调整视觉顺序，而非flex-direction或flex-wrap：前者不影响焦点流，后者会打乱可聚焦顺序 - 所有交互元素（
button、a、input）必须有min-width: 44px; min-height: 44px，横屏下尤其注意右侧操作按钮的触控热区是否被裁切
matchMedia 监听要手动触发首次状态，否则初始横屏无 class
只写 mql.addEventListener('change', ...) 而不检查 mql.matches，会导致页面首次加载在横屏时，body 缺少 landscape class，屏幕阅读器无法获知当前朝向，也无法触发对应 ARIA 状态更新。
立即学习“前端免费学习笔记（深入）”；
- 监听代码必须包含初始化逻辑：
const mql = window.matchMedia('(orientation: landscape)');<br>if (mql.matches) {<br> document.body.classList.add('landscape');<br> document.body.setAttribute('aria-orientation', 'horizontal');<br>}<br>mql.addEventListener('change', e => {<br> if (e.matches) {<br> document.body.classList.add('landscape');<br> document.body.setAttribute('aria-orientation', 'horizontal');<br> } else {<br> document.body.classList.remove('landscape');<br> document.body.setAttribute('aria-orientation', 'vertical');<br> }<br>}); - 不要用
window.orientation或orientationchange：iOS Safari 16.4+ 已彻底移除，Chrome 95+ 不触发，依赖它等于放弃所有新版 iOS 用户 - 横屏提示层（如“请旋转设备”）必须用
inert属性或手动设tabindex="-1"+aria-hidden="true"，否则屏幕阅读器会在横屏状态下仍朗读该提示
最易被忽略的是：横屏后 100vh 在 iPhone 上只剩约 390px，若表单高度依赖它，键盘弹出会直接顶飞 submit 按钮——此时 dvh 单位虽好，但 Safari 16.4 以下不支持，降级方案必须用 min-height: 100% 配合 html, body { height: 100% }，否则可访问性测试工具会报“焦点元素被截断”错误。
