NVDA无法读取Chrome for Angular Material中的内容

Question

我有一个按钮，在Mozilla中看起来不错，但在Chrome中无法正常工作。

 <div *ngFor="let product of products; let pIndex=index">
    <mat-card [ngClass]="{'disablesidebar':showOverlay}">
      <img mat-card-image (click)="onClickAddOn(product)" src="{{IMAGE_PATH}}/products/{{product.imageURL}}" alt="seat selection">
      <mat-card-content>
        <p>
          {{ product.productName }}
        </p>
      </mat-card-content>
      <button id="addSeatButton" mat-mini-fab color role="presentation" aria-label="'Seat Selection'" (click)="onClickAddOn(product)"
        tabindex="6" class="rbtn-floating">
        <i class="material-icons">add</i>
      </button>
    </mat-card>
  </div>

按钮addSeatButton id应该读取但不起作用，有人可以建议我在这里缺少什么吗。

Answer 1

我怀疑最大的问题是您在按钮上的role="presentation"。这告诉屏幕阅读器该按钮不再是按钮。它删除了语义，实际上变成了<span>。尝试删除role。