JAWS 在读取第一个元素之前读取父标签的标签

Question

我正在尝试修复工作中 Angular 项目中的可访问性缺陷。当页面加载并且我开始按 Tab 键浏览页面时，表单中可见的第一个元素将读取两次。我的代码如下所示

<form [formGroup]="form" role="form" attr.aria-label="Edit Form" novalidate>
<div class="form-row">
<div class="col-md-9 col-sm-12 col-lg-9 paddingLR0">
<!-- Hidden code not rendered due to ngIf=false -->
<div role="region" attr.aria-label="Edit button region" *ngIf="viewMode">
<!-- Hidden elements not rendered due to ngIf=false -->
<button *ngIf="isEditable" [disabled]="!canEdit" type="submit" (click)="enableEdit()">
Edit
</button>
<div class="back-header">
<a tabindex=0 (keyup.enter)="back()" (click)="back()" (mouseover)="changeBackIconOnHover('back-region-top')" (mouseout)="changeBackIcon('back-region-top')" id="back-region-top">
<img src="{{pathImg}}/back_black.png" 
<span class="margin-left10">Back</span>
</a>
</div>
</div>
</div>
</div>
<!-- More code here -->
</form>

如果您看到代码，则第一个可见的元素是Edit按钮，该按钮嵌套在div 中，角色作为区域，而div 又位于具有角色窗体的窗体中。当我按 Tab 键浏览页面而不是只读取一次按钮时Edit buttonJAWS 在第一个选项卡上读取Edit Form form region. Edit Button，然后读取Edit button region. Edit Button.父元素上没有制表符索引。删除角色属性和相应的标签不起作用。如何让下颚只读取一次编辑按钮？

Answer 1

由于具有 tabindex=0 的空div 而发生上述问题。 所以在上面的代码片段中，我有一个注释行

<!-- Hidden code not rendered due to ngIf=false -->

这指的是多个div，这些div是与我实际代码中的表单相关的警告，成功和错误消息。这些div 中的每一个都有一个用于条件呈现的ngIf和一个 tabindex=0 以使其选项卡可访问。除了其中一个div只是一个选项卡索引，但没有ngIf。所以它总是被渲染。如下所示。

<div tabindex=0>
<div ngIf="condition"> {{errormessage}}
</div>
</div>

如果 JAWS 跳到一个空元素上，它会读取以前的标签。我删除了仍然为空的外部div，问题解决了。