scroll-marker-group 属性已增强,以支持多种模式:
- 'links' - 生成的 ::scroll-marker-group 以“links”模式运行,功能类似于导航列表。如果省略此参数,则默认使用此模式。
- 'tabs' - 生成的 ::scroll-marker-group 以“tabs”模式运行,功能类似于标签列表。
每种模式都会改变 ::scroll-marker-group 和 ::scroll-markers 的焦点顺序和辅助功能行为,遵循 WAI-ARIA 模式。
更多详情:
链接模式(默认)
此模式旨在模拟标准导航地标与碎片锚点的组合。
语义角色
::scroll-marker-group 承担导航功能,而 ::scroll-marker 元素则承担链接功能。这与 <nav> + <a> 的结构模式完美契合。
键盘导航
所有 ::scroll-marker 元素都是顺序制表符,其原生功能类似于标准锚链接列表。
未受影响的目标
原始元素不会被强制分配任何角色,从而保持文档的自然语义结构完整无损。
激活焦点管理
当链接标记被激活时,它会将顺序焦点导航的起始点设置为目标元素(即原始元素),并且焦点会从标记处消失。这模拟了点击标准内部 <a href="#target"> 链接的原生行为。
标签页模式
此模式旨在原生复制选项卡模式,并作为选项卡式轮播模式的交互基础。
语义角色
::scroll-marker-group 隐式地被赋予了 tablist 角色,::scroll-marker 元素充当 tab 角色,而它们的源元素则获得 tabpanel 角色。这与所需的 WAI-ARIA Tabs 结构相符。
键盘导航(漫游标签索引)
它遵循标准实践中概述的复杂键盘交互方式。只有激活的滚动标记才能作为制表符。用户使用方向键在焦点组中导航(在标记之间切换),从而避免了需要在 20 个轮播点之间来回切换的“制表符陷阱”。
重点范围管理
该标记充当焦点导航范围的所有者。从活动标记处按下 Tab 键,焦点将直接移动到活动选项卡面板的内容中,符合选项卡式界面的规范。
树木修剪
非活动标签页的内容会从辅助功能树中显式隐藏。这模拟了非活动标签页面板上 aria-hidden="true" 或 inert 属性的预期行为,从而避免了开发人员手动编写状态更改脚本。
激活焦点
当标记被激活时,焦点会保持在标记上,这与标准标签的工作方式完全相同。