移动端界面可访问性差的根本原因是布局破坏语义流和焦点顺序，而非缺少aria-label；需用语义化HTML标签、确保DOM顺序合理、触控区达标44px、提供清晰焦点反馈并兼顾多输入方式。
移动端界面可访问性差，往往不是因为没加 aria-label，而是布局本身破坏了语义流和焦点顺序——HTML 结构决定屏幕阅读器如何“读”，也决定键盘用户怎么“走”。
用语义化标签替代 div 堆砌
很多所谓“响应式页面”只是把 PC 版套上 @media 就完事，但 div 包裹的按钮、标题、导航，对屏幕阅读器来说就是一堆无意义的容器。
- 把
div class="header"换成<header>，div class="nav"换成<nav>，div class="main"换成<main> -
button必须用原生<button>，别用span+onclick；链接必须用<a href>，别用div+tap事件 - 表单控件必须有明确的
<label for="xxx">关联，或用嵌套方式：<label>用户名 <input name="user"></label>
避免绝对定位和 display: none 破坏焦点流
移动端键盘导航（比如外接蓝牙键盘）依赖 DOM 顺序，而 position: absolute 或 display: none 会让元素从可聚焦流中消失，但又可能被屏幕阅读器意外读出。
- 隐藏内容要用
aria-hidden="true"+tabindex="-1"组合，而不是仅靠 CSS 隐藏 - 模态框（modal）打开时，确保其他内容不可聚焦：用
inert属性（Chrome 101+ 支持），或手动遍历并设tabindex="-1" - 轮播图的“跳转到第3页”按钮，如果用
transform: translateX()移动，要同步更新aria-current="true"和tabindex="0"
触摸目标尺寸与视觉焦点反馈必须达标
WCAG 2.2 要求最小触控区域为 44px × 44px，且焦点状态不能仅靠颜色区分——这是移动端最常被忽略的硬性门槛。
立即学习“前端免费学习笔记（深入）”；
- 给所有可交互元素加
min-width: 44px; min-height: 44px;，用padding扩展点击区，别只靠font-size -
:focus-visible替代:focus，避免鼠标点击时出现多余轮廓线；但必须保留清晰的视觉反馈，例如outline: 2px solid #0066cc; - 禁用
user-select: none在按钮或链接上——它会干扰 TalkBack / VoiceOver 的文本选择和操作识别
真正卡住可访问性的，从来不是某个 ARIA 属性漏写了，而是整个结构默认就假设用户“只用手指点”，忽略了语音控制、开关设备、眼动仪这些真实存在且合法合规的使用方式。DOM 顺序、语义层级、焦点可达性——这三样不稳，后面所有增强都像在沙上盖楼。
