Angular 7以上版本的AX

2024-06-02 • 问答

使用AX（可访问性）时，出现此错误：

这是我的代码：

<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>

<tbody role="rolegroup">仅在其中的行标记为<tr role="row">时有效。

然后，您还应该在每个<td role="cell">中包含<tr>，以获取有效的aria。

错误告诉您“您具有这个角色（role="rolegroup"），但是为了有效，它需要子元素（role="row"）”。

我猜测您的某些或所有商品没有作用（最好的猜测是ng-container，但如果没有看到生成的HTML，就很难确定）。

您生成的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>

检查生成的HTML，如果未定义row，columnheader或cell中的任何角色，请手动添加它们。

This article from mozilla is a good starting place to learn about rowgroup

Angular 7以上版本的AX

xuzaizhan 回答：Angular 7以上版本的AX

大家都在问