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

Question

我正在尝试修复工作中 Angular 项目中的辅助功能缺陷。当页面加载并且我开始在页面中切换时，表单中可见的第一个元素被读取两次。我的代码如下所示

<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 中，其角色作为区域，而该区域又位于具有角色表单的表单中。当我浏览页面而不是只阅读一次按钮时 Edit button JAWS 在第一个选项卡上读取 Edit Form form region. Edit Button，然后读取 Edit button region. Edit Button。父元素上没有 tabindex。删除角色属性和相应的标签不起作用。如何让 jaws 只读一次编辑按钮？

Answer 1

上述问题的发生是因为空 div 的 tabindex=0。所以在上面的代码片段中我有一个注释行

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

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

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

如果 JAWS 在空元素上切换，它会读取之前的标签。我删除了外面的 div，它仍然是空的，问题就解决了。

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

JAWS reads labels of parent tags before reading first element

html

accessibility

jaws-screen-reader

angular