如何让包含嵌套表格的表格符合WCAG AA无障碍合规要求？

首先要明确：WCAG AA规范没有禁止表格嵌套，只是要求表格语义不能被滥用、数据层级能被辅助工具清晰识别。你说的直接在父单元格嵌表格的方案只要做好语义标注，完全可以符合合规要求，比用div模拟表格的开发成本低还更易维护。

具体需要做的适配要点如下：

• 给主表格和每一个嵌套表格都加独立的语义标识：用<caption>标签或者aria-label属性说明表格用途，比如主表标注aria-label="2024年客户订单列表"，展开后的子表标注aria-label="客户ID 123的历史续费记录"，让屏幕阅读器用户可以快速区分两个表格的所属关系。
• 展开/收起交互做无障碍适配：触发展开的按钮必须加动态切换的aria-expanded属性，同时用aria-controls指向展开内容容器的唯一ID，按钮不能只有箭头图标，要加不可见但可被屏幕阅读器读取的文字说明，比如“展开客户ID 123的关联记录”。
• 承载嵌套表格的父单元格要加colspan属性，值等于主表格的总列数，让这个单元格占满整行，避免屏幕阅读器把嵌套区域和主表的列做错误关联，导致读取内容混乱。
• 嵌套表格本身遵循原生表格的语义规范：表头用<th>标签，搭配scope属性标注对应是行表头还是列表头，不要用div拼接表格结构，原生<table>系列标签的默认语义已经能被绝大多数辅助工具正确识别。
• 嵌套区域内的交互控件要符合规范：每个控件都有明确的可访问名称，焦点顺序符合用户浏览逻辑，展开状态下按Tab可以按顺序访问嵌套区域内的所有控件，收起状态下这些控件不会被焦点命中。
• 全交互支持键盘操作：回车键、空格键可以触发展开/收起按钮，Esc键可以快速关闭当前已展开的嵌套区域，不要只支持鼠标点击触发。

内容的提问来源于stack exchange，提问作者nonoandy