无障碍选项卡与手风琴组件

选项卡一次显示一个内容面板，手风琴组件的标题则让你展开或收起各个区块。两者都需要清晰的按钮、键盘操作支持，以及能告诉辅助软件哪些内容已选中或展开的信息。试着用键盘操作一个示例，看看会显示哪些内容。

选项卡和手风琴组件组织内容的方式不同。选项卡一次显示一个与之关联的面板；手风琴组件的标题控制可展开的区块，具体实现可以允许多个区块同时保持展开。举个假设的例子：账户页面可以用选项卡展示“概览”和“交易记录”，表单则可以用手风琴组件来展开或收起地址区块。在构建控件之前，先决定哪种交互方式适合这些内容。[1][2]

ARIA 是 Accessible Rich Internet Applications（无障碍富互联网应用）的缩写。它通过角色、状态和关联关系，向屏幕阅读器等辅助技术描述界面元素。对于选项卡，容器需要使用 tablist 角色，每个控件使用 tab 角色，每个内容区块使用 tabpanel 角色。你需要为选项卡列表提供标签。每个选项卡通过 aria-controls 指明自己控制的面板，每个面板则通过 aria-labelledby 指明对应的选项卡。仅靠 HTML 按钮还无法实现这套完整的选项卡模式。[1]

键盘焦点指当前接收键盘输入的元素；选中状态则表明哪个选项卡的面板正在显示。按 Tab 键会从当前活动的选项卡进入选项卡列表，再按 Tab 键则会离开列表，移到页面键盘顺序中的下一个元素。左、右方向键用于在水平排列的选项卡之间移动焦点，到达任一端后可以循环到另一端。垂直排列的选项卡改用上、下方向键；水平排列的选项卡会将这两个键留给浏览器滚动页面。如果面板内没有可获得焦点的内容，或者第一项有实际意义的内容无法获得焦点，就为面板设置 tabindex="0"，让 Tab 键能够移到面板上。[1]

采用手动激活时，在选项卡之间移动焦点不会改变显示的面板，直到用户按下空格键或 Enter 键。采用自动激活时，选项卡一获得焦点就会被选中，并显示对应面板。当前选中的选项卡设置为 aria-selected="true"，其他选项卡设置为 aria-selected="false"。APG（ARIA 创作实践指南）建议，仅在面板显示没有明显延迟时使用自动激活，这通常需要预先加载内容。否则，逐个加载面板可能会拖慢用户在选项卡列表中的移动速度。[1]

对于手风琴组件，要将每个标题按钮放在层级恰当的标题元素内，并让按钮成为该标题内唯一的元素。用 aria-controls 指明按钮控制的面板，用 aria-expanded 表明面板是否可见。按 Enter 键或空格键会展开已收起的面板；如果支持收起，也会收起已展开的面板。如果已展开的面板不能收起，就为对应按钮设置 aria-disabled="true"。Tab 键和 Shift+Tab 组合键按页面顺序在手风琴组件中可获得焦点的元素之间移动；它们不能替代选项卡列表内部的方向键导航。[2]

你可以选择为手风琴组件的面板添加 region 角色，并通过引用标题按钮为它提供标签。region 是一种地标，也就是屏幕阅读器用户可以直接导航到的具名区块。要避免创建过多这样的地标，尤其是在可以同时展开的面板超过大约六个时。假设一个价格信息手风琴组件中有八个已展开、带标签的 region，在会提供这些地标的屏幕阅读器配置下，每个面板都可以成为单独的导航目标。这个例子说明的是结构上的取舍，并非实际测得的易用性结果。[2]

• 官方指南，而非实证研究：《选项卡模式》区分了移动键盘焦点和激活选项卡。方向键用于在选项卡之间移动；如果选项卡不会在获得焦点时自动激活，就用空格键或 Enter 键激活。Tab 键用于进入或离开选项卡列表，而不是逐个经过每个选项卡。[1]
• 官方指南：当面板显示没有明显延迟时，建议使用选项卡自动激活，这通常需要预先加载内容。文档解释说，否则自动激活会拖慢焦点移动，妨碍用户高效地浏览选项卡列表。文档没有提供研究得出的数值结果。[1]
• 官方指南：手风琴组件的标题按钮通过 aria-expanded 传达面板是否可见，通过 aria-controls 指明对应面板。Enter 键或空格键用于操作当前获得焦点的标题按钮，Tab 键和 Shift+Tab 组合键则遵循页面中可获得焦点元素的顺序。所提供的《手风琴模式》没有规定用方向键在标题之间导航。[2]
• 官方指南：是否为手风琴面板添加带标签的 region 角色是可选的。APG 建议避免过多地标，并以超过大约六个面板可同时展开的情况为例。它还指出，当面板内包含标题或嵌套的手风琴组件时，region 可以帮助传达结构。[2]

这两个来源提供的是实现指南，而不是实证比较、易用性的数值结果，也不保证符合无障碍要求。相关表述应保持在这个范围内。

手动激活和自动激活的选项卡需要检查不同的行为：手动激活时，焦点可以移动，而选中状态保持不变；自动激活时，焦点移动也会改变选中状态。选择自动激活前，要检查实际延迟。仅凭内容复杂，不能判断面板显示一定会慢。[1]

手风琴组件的行为取决于是否允许多个面板同时保持展开，以及已展开的面板是否可以收起。控件及其报告的状态应与这些选择保持一致。关于地标过多的提醒针对的是可以同时展开的面板；大约六个只是指导建议，不是通用的合格判定门槛。[2]