你以为 tab 无障碍只能靠 WAI-ARIA 一个个配？今天 scroll-marker-group 两个模式把这件事彻底原生化了

配过轮播图或者 Tab 组件的人，大概都知道这个坑——Tab 放在滚动容器里时，每个 Tab 触发器都要配 role=”tablist” 和 role=”tab”，内容区要配 role=”tabpanel”，非当前面板要加 aria-hidden=”true” 或 inert，按方向键要自己写 roving tabindex，光这些就要几十行 JS。

Chrome 154 和 Edge 154 给 scroll-marker-group 新增了两个 mode，直接把这个流程彻底原生化了。

tabs 模式：浏览器替你生成 WAI-ARIA 结构

scroll-marker-group: tabs 模式下，浏览器会自动给滚动容器内的标记点赋予正确的 ARIA 语义：::scroll-marker-group 隐式获得 tablist 角色，每个 ::scroll-marker 获得 tab 角色，对应的原始元素自动获得 tabpanel 角色。不需要写任何 role 属性，浏览器自己推断。

键盘交互也由浏览器接管：只有当前激活的 marker 是 Tab 停驻位，方向键在 marker 之间流转，Tab 键从当前 marker 直接跳入面板内容——这就是标准 Tabbed Interface 的键盘行为，不用自己写 roving tabindex。

非活动面板的内容对 Accessibility Tree 隐藏，不需要手动加 inert 或 aria-hidden，相当于浏览器帮你把这件事也原生做了。

links 模式：做导航式轮播

scroll-marker-group: links 模式下，::scroll-marker-group 获得 navigation 角色，::scroll-marker 获得 link 角色。每个 marker 都是顺序 Tab 停驻位，行为和普通锚链接一致，适合做目录导航或分页指示器。点击 marker 后焦点移到目标元素，不再停留在 marker 上，和标准链接的焦点行为一致。

怎么用

只需要几行 CSS：

.carousel {
  scroll-marker-group: after tabs; /* 或 links */
}
.carousel-item {
  scroll-target-group: auto;
}
.carousel-item::scroll-marker {
  content: "";
  /* 样式 */
}
.carousel-item::scroll-marker:target-current {
  background: var(--brand);
}

scroll-marker-group 声明位置（before/after）控制标记点出现在 Tab 顺序的开头还是结尾；tabs/links 声明模式控制语义和键盘行为，两者用空格组合。

Chrome/Edge 154+ 约 45% 全球覆盖，Firefox/Safari 暂不支持，需要 @supports 渐进增强。

为什么这值得重视

过去实现带键盘导航的无障碍轮播，需要至少三样东西配合：role 属性声明、WAI-ARIA 状态管理、roving tabindex 的 JS 逻辑。现在 scroll-marker-group: tabs 用几行 CSS 把这三件事全部交给浏览器。以往用 JS 模拟的 Tab 陷阱（tab trap）彻底消失——Tab 键从当前面板直接跳入内容，而不是被锁在 20 个圆点之间反复跳。

下一步：找一个现有的轮播组件，把 role 属性和 roving tabindex JS 删掉，换成 scroll-marker-group: after tabs，看看无障碍测试还过不过。