tablist 角色的可访问性问题答案

【问题标题】：accessibility issue for tablist roletablist 角色的可访问性问题
【发布时间】：2021-08-10 15:06:17
【问题描述】：

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

将可访问性错误作为必需的 ARIA 父角色不存在：tablist 和必需的 ARIA 子角色不存在：tab

【问题讨论】：

标签： c# html keyboard screen-readers

【解决方案1】：

如何添加缺少的父角色

选项 1：将子元素放置在 DOM 中的父元素中

选项 2：使用 aria-owns 将子角色与父角色关联

SOURCE

Accessibility Insights

考虑使用LIGHTHOUSE 审核 ARIA 合规性。

【讨论】：

动态如何使用，
{{tabItem.tabGroupName}}

【解决方案2】：

感谢您的解决方案，如果选项卡是动态创建的，您能否给我解决方案，那么如何解决可访问性问题

<body>
<uib-tabset role="tablist"  >
    <uib tab ng-repeat="tabItem in TabGroup">
        <uib-tab-heading>
            <div role="tab">
                <span>{{tabItem.tabGroupName}}</span>
            </div>
        </uib-tab-heading>
    </uib-tab-heading>
</uib-tabset>
</body>

【讨论】：