咨询：可切换两个子内容区域可见性的卡片组件应采用何种ARIA模式

我完全懂你找这种定制化组件模式的苦恼！常规的Disclosure组件都是用单独控件切换一个非后代元素，而你要的是点击父容器就能切换内部两个子元素A、B的显隐，还得兼顾无障碍，同时父容器里还有始终可见的内容、不能设为button（因为包含交互内容），确实没那么多现成的例子可以直接抄。

其实你可以基于Disclosure模式的核心逻辑做扩展，搭配ARIA的状态属性来实现符合无障碍标准的组件，具体做法如下：

• 触发容器的无障碍处理：
  既然父容器不能用button标签（内部有交互式内容），那我们可以用语义化容器（比如div或者section），给它加上tabindex="0"让它能被键盘聚焦，同时监听click和keydown事件——键盘上的Enter和Space键要能触发切换操作，这是无障碍交互的基本要求，和按钮的键盘行为保持一致。

• ARIA状态的精准设置：

  • 给父容器添加aria-controls="contentA contentB"，明确它控制的是A、B两个内容区域的ID；
  • 给A、B分别设置aria-hidden属性：当A可见时，A的aria-hidden="false"，B的aria-hidden="true"，反之亦然，确保屏幕阅读器能准确感知当前哪个内容是可见的；
  • 可以给父容器加aria-label="切换内容视图"（或者在内部加可见的提示文字），让屏幕阅读器用户清楚这个容器的交互目的。

• 显隐逻辑的细节处理：

  • 控制A、B显隐时，建议用CSS的display: none（或visibility: hidden）结合aria-hidden属性，双重保障屏幕阅读器能正确识别不可见元素；
  • 如果父容器内部有独立的交互式元素（比如按钮、链接），要给这些元素添加事件阻止冒泡，避免点击内部交互元素时误触发A、B的显隐切换。

• 为什么不用现成的标准模式？
  你提到的Disclosure模式是单控件单目标的典型场景，但你的需求是单控件双目标的变种，核心还是围绕“触发控件切换目标元素显隐”的无障碍原则，只要把状态同步做好，完全可以满足需求，不需要硬套某个固定模式。

内容来源于stack exchange