tablist role可访问性问题：ARIA父/子角色缺失报错怎么解决

报错原因 #

• ARIA规范明确要求，role="tab"的元素必须是role="tablist"元素的直接子元素。你当前的DOM结构中，role="tablist"绑定在<uib-tabset>上，它的直接子元素是<uib-tab>节点，你添加了role="tab"的div嵌套在<uib-tab>、<uib-tab-heading>两层节点内部，辅助技术无法识别到隔层的父子角色关系，就会同时触发两个报错：一是tab节点找不到父级tablist角色，二是tablist节点找不到直接子级tab角色。
• 部分旧版本的uib-tab组件本身会自动生成ARIA相关属性，手动叠加的角色和组件默认生成的属性冲突，也会导致识别异常。

修复方案 #

方案1：使用uib-tab原生无障碍支持（优先选择） #

uib-tabset组件本身已经内置了符合规范的无障碍能力，不需要手动添加role属性，直接使用组件原生配置即可，示例代码：

<uib-tabset>
    <uib-tab heading="One">Tab 1 内容</uib-tab>
    <uib-tab heading="Two">Tab 2 内容</uib-tab>
    <uib-tab heading="Three">Tab 3 内容</uib-tab>
</uib-tabset>

组件会自动给外层容器加上role="tablist"，给每个tab标题加上role="tab"，同时自动生成aria-selected、aria-controls、id、aria-labelledby等关联属性，完全符合无障碍规范。

方案2：手动调整角色绑定层级 #

如果需要自定义tab标题的结构，可以直接将role="tab"绑定在<uib-tab>节点上，保证它是role="tablist"的直接子元素，示例代码：

<uib-tabset role="tablist">
    <uib-tab role="tab">
        <uib-tab-heading>
            <div>One</div>
        </uib-tab-heading>
    </uib-tab>
    <uib-tab role="tab">
        <uib-tab-heading>
            <div>Two</div>
        </uib-tab-heading>
    </uib-tab>
    <uib-tab role="tab">
        <uib-tab-heading>
            <div>Three</div>
        </uib-tab-heading>
    </uib-tab>
</uib-tabset>

调整后需要手动补充每个tab节点的id、aria-selected、aria-controls属性，以及对应tab内容面板的role="tabpanel"、aria-labelledby属性，保证两者的关联关系正确。

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