AXE on Angular 7+
AXE on Angular 7+
提问于 2020-01-04 05:23:46
在使用AXE (可访问性)时，我收到以下错误：
下面是我的代码：
<div class="table-style">
<table mat-table class="mat-elevation-z8 table-format">
<ng-container matColumnDef="item">
<th class="info--header" mat-header-cell *matHeaderCellDef>Something</th>
<td class="info-header2" mat-footer-cell *matFooterCellDef>
<p>Hello</p>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>
</div>回答 1
Stack Overflow用户
发布于 2020-01-04 07:36:19
仅当其中的行标为<tr role="row">时，<tbody role="rolegroup">才有效。
然后，您还应该在每个<tr>中为有效的aria设置<td role="cell">。
这就是错误告诉你的“你有这个角色(role="rolegroup")，但是为了有效，它需要子元素(role="row")”。
我猜你的一些或所有项目都没有角色(最好的猜测是ng-container，但如果看不到生成的超文本标记语言，就很难确定)。
生成的HTML应遵循以下模式：
<table role="table">
<thead role="rowgroup">
<tr role="row">
<th role="columnheader">Head 1</th>
<th role="columnheader">Head 2</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row">
<td role="cell">1a</td>
<td role="cell">2a</td>
</tr>
<tr role="row">
<td role="cell">1b</td>
<td role="cell">2b</td>
</tr>
</tbody>
</table> 检查生成的超文本标记语言，如果没有定义row、columnheader或cell角色，请手动添加它们。
This article from mozilla is a good starting place to learn about rowgroup
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59585528
复制相关文章
相似问题
腾讯云开发者
