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

【问题标题】：JAWS reads labels of parent tags before reading first elementJAWS 在读取第一个元素之前读取父标签的标签
【发布时间】：2020-07-04 19:01:49
【问题描述】：

我正在尝试修复工作中的 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强>。父元素上没有标签索引。删除角色属性和相应的标签不起作用。如何让下巴只读取一次编辑按钮？

【问题讨论】：

您能否发布一个链接到重现该问题的示例页面？找出 Jaws 生成和看到的实际 HTML 可能也很有用。这可行吗？

标签： html angular accessibility jaws-screen-reader

【解决方案1】：

出现上述问题是因为一个空 div 的 tabindex=0。所以在上面的代码 sn-p 中我有一个注释行

<!-- 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，问题解决了。

【讨论】：