移动端无障碍布局需确保结构语义、焦点流与触摸交互三者对齐：使用语义标签（如）、原生按钮、44×44px触控区、线性DOM焦点顺序、模态框焦点捕获及可滚动区域明确标注。
移动端无障碍页面布局不是加个aria-label就完事，关键在于结构语义、焦点流和触摸交互三者必须对齐。否则屏幕阅读器会跳过内容，键盘用户卡在死区，触控操作误触发。
用<header></header>、<nav></nav>、<main></main>等语义标签替代<div>包裹
<p>非语义<code><div>会让辅助技术失去上下文判断依据。比如一个“返回按钮”放在<code><div class="back-btn">里，读屏软件只会念“div”，不会知道这是导航控制；换成<code><button aria-label="返回上一页"></button>并放在<nav></nav>内，就能被正确归类为导航组件。
- 必须确保每个页面有且仅有一个
<main></main>，且它不嵌套在<article></article>或<section></section>中
-
<footer></footer>不应出现在<article></article>内部——除非它是该文章专属的元信息（如作者、发布时间）
- 避免用
<div role="button">模拟按钮，优先用原生<code><button></button>，它自带键盘焦点、空格/回车触发、禁用状态等无障碍能力
触摸目标尺寸与间距必须满足 WCAG 44×44px 最小要求
很多团队只调了font-size或padding，却忽略了实际可触区域是否达标。iOS 和 Android 系统级触摸识别依赖物理像素，CSS 的rem或%单位在高 DPR 屏幕下可能缩得太小。
- 用
min-height: 44px + min-width: 44px定义按钮/链接容器，而不是仅靠padding
- 相邻可触元素之间留至少 8px 间隙，防止误触（尤其在手指滑动时）
- 禁用
-webkit-tap-highlight-color: transparent后，务必补上视觉反馈，比如:active状态变色或缩放
焦点顺序必须线性、可预测，不能被position: absolute或z-index打乱
移动端键盘用户（如外接蓝牙键盘的视障人士）依赖Tab键逐个聚焦。如果用绝对定位把“跳转到内容”链接扔到 DOM 开头但视觉上压在底部，焦点会先落到它，再跳回顶部导航——形成逻辑断层。
立即学习“前端免费学习笔记（深入）”；
- DOM 顺序即焦点顺序：把
<a href="#main">跳过导航</a>放在<header></header>末尾
- 避免对非交互元素设
tabindex="0"，尤其不要给<div>加，它会插入无意义焦点点
<li>模态框打开时，用<code>inert属性或aria-hidden="true"配合focus trap锁定焦点在框内，否则焦点可能逃逸到背景内容
最容易被忽略的是：当页面启用横向滚动（比如表格）时，overflow-x: auto容器若没加role="region"和aria-label，读屏软件根本不会提示“此处可滑动”。而用户摸不到滚动条，又没语音提示，就会以为内容被截断了。
<main></main>，且它不嵌套在<article></article>或<section></section>中<footer></footer>不应出现在<article></article>内部——除非它是该文章专属的元信息（如作者、发布时间）<div role="button">模拟按钮，优先用原生<code><button></button>，它自带键盘焦点、空格/回车触发、禁用状态等无障碍能力
触摸目标尺寸与间距必须满足 WCAG 44×44px 最小要求
很多团队只调了font-size或padding，却忽略了实际可触区域是否达标。iOS 和 Android 系统级触摸识别依赖物理像素，CSS 的rem或%单位在高 DPR 屏幕下可能缩得太小。
- 用
min-height: 44px+min-width: 44px定义按钮/链接容器，而不是仅靠padding - 相邻可触元素之间留至少 8px 间隙，防止误触（尤其在手指滑动时）
- 禁用
-webkit-tap-highlight-color: transparent后，务必补上视觉反馈，比如:active状态变色或缩放
焦点顺序必须线性、可预测，不能被position: absolute或z-index打乱
移动端键盘用户（如外接蓝牙键盘的视障人士）依赖Tab键逐个聚焦。如果用绝对定位把“跳转到内容”链接扔到 DOM 开头但视觉上压在底部，焦点会先落到它，再跳回顶部导航——形成逻辑断层。
立即学习“前端免费学习笔记（深入）”；
- DOM 顺序即焦点顺序：把
<a href="#main">跳过导航</a>放在最开头，而非<header></header>末尾 - 避免对非交互元素设
tabindex="0"，尤其不要给<div>加，它会插入无意义焦点点 <li>模态框打开时，用<code>inert属性或aria-hidden="true"配合focus trap锁定焦点在框内，否则焦点可能逃逸到背景内容
最容易被忽略的是：当页面启用横向滚动（比如表格）时，overflow-x: auto容器若没加role="region"和aria-label，读屏软件根本不会提示“此处可滑动”。而用户摸不到滚动条，又没语音提示，就会以为内容被截断了。
