语义标签不自动生成操作路径，仅提供脚本可读的结构线索；需配合aria-controls、data-target、aria-current等显式绑定跨设备交互逻辑，并确保viewport、tabindex等基础配置完备。
语义标签本身不生成操作路径，只提供可被脚本读取的结构线索
HTML语义标签（如 <nav></nav>、<main></main>、<section></section>）不自动创建或同步跨设备的操作流程。它们的作用是为 JavaScript 提供稳定、可预测的 DOM 路径锚点，让不同设备上的脚本能基于相同结构做一致判断。
比如移动端点击 <button></button> 触发折叠，桌面端需同步展开对应 <section></section> —— 这个“对应关系”不是浏览器自动建立的，而是靠你用语义属性显式绑定：
-
aria-controls值必须是目标<section></section>的id，且该id在所有设备上保持一致 - 避免用 class 名或 index 作为定位依据，因为 DOM 顺序可能因响应式断点变化而错位
- 同一页面中
<nav></nav>内的<a></a>链接，其href必须指向真实id锚点（如#product-details），而非 JS 模拟路由
用 data-* + id 组合构建设备无关的逻辑映射
单纯依赖语义标签层级容易在响应式重排后失效（例如 <aside></aside> 在桌面端是侧边栏，在移动端可能被移入 <main></main> 下）。更可靠的方式是用 data- 属性显式声明跨设备关联：
- 给触发控件加
data-action="toggle-section"和data-target="faq-1" - 给被控区域加
id="faq-1"和data-role="collapsible-section" - JS 统一监听
[data-action]，通过document.getElementById(event.target.dataset.target)获取目标，不依赖父级或兄弟节点位置 - 值统一用小写字母+短横线（如
data-target="user-profile"），避免大小写敏感或空格截断问题
aria-current 是跨设备导航状态同步的关键
当用户在手机上点击“订单”菜单项，桌面端导航栏也需高亮同一项——这个状态同步不能靠 CSS 类名硬编码，而应依赖语义化状态属性：
- 只对当前激活项设置
aria-current="page"（不是"true"或"active"） - 屏幕阅读器和部分辅助技术会识别该值并朗读“当前页面：订单”，视觉样式则由 CSS
[aria-current="page"]控制 - 多端共享状态时，用 localStorage 存储当前
aria-current的 target id，各端加载时统一注入，避免 JS 多次重复判断 - 注意：不要在非导航元素（如
<div>）上滥用 <code>aria-current，它仅适用于明确的导航上下文viewport 和 tabindex 会影响操作路径的实际可达性
即使语义结构正确，操作路径仍可能在某些设备上断裂。常见断点不在标签本身，而在基础配置：
- 缺失
<meta name="viewport" content="width=device-width, initial-scale=1">会导致移动端无法正确缩放，使<nav></nav>区域超出视口，用户根本点不到 - 原生表单控件（
<input>、<select></select>）默认有tabindex="0"，但自定义组件（如用<div> 实现的下拉）必须手动加 <code>tabindex="0"才能被键盘聚焦——否则触屏设备能点，键盘/辅具用户却卡住 - 在 iOS Safari 中，
<main></main>内部若嵌套了未设role="application"的富交互区域（如 canvas 编辑器），TalkBack 可能跳过整个区块，导致操作路径中断
语义标签是骨架，但操作路径是否连通，最终取决于你是否把每个交互节点都放在可聚焦、可缩放、可被辅助技术索引的位置上。漏掉一个
tabindex或一个viewport，整条路径就断在那台设备上。 - 缺失
