tablist 角色的可访问性问题
Posted
技术标签:
【中文标题】tablist 角色的可访问性问题【英文标题】：accessibility issue for tablist role 【发布时间】：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
【问题讨论】：
【参考方案1】：如何添加缺少的父角色
选项 1：将子元素放置在 DOM 中的父元素中
选项 2：使用 aria-owns 将子角色与父角色关联
SOURCE
Accessibility Insights
考虑使用LIGHTHOUSE 审核 ARIA 合规性。
【讨论】：
动态如何使用，感谢您的解决方案，如果选项卡是动态创建的，您能否给我解决方案，那么如何解决可访问性问题
<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>
【讨论】：
以上是关于tablist 角色的可访问性问题的主要内容，如果未能解决你的问题，请参考以下文章
带有角色按钮的锚链接内图像的可访问性：可点击元素必须是可聚焦的并且应该具有交互式语义