NVDA读取只最后加载div的内容，剩下的跳过

Question

我有3个不同的div动态加载基于搜索条件。每个div我都添加了"role='alert'" tabindex='0'"one_answers"aria-live ="礼貌">． 我注意到DOM正在立即加载所有3div，但NVDA扬声器只读取最后加载的div内容。我已经在NVDA说话查看器中验证了这里显示的所有3个div内容，但在阅读它的最后一个内容时。

一旦我点击按钮。NVDA逐行显示所有内容。

我使用的是Angular 5。有关更多信息，请查看下面的代码。

HTML模板:

<input type="button" value="Click Me" tabindex="0" (click)="getWatsonDetails()"/>
<div *ngIf="isHiddenData">
<div id="main{{i}}" tabindex="-1" class="chat" *ngFor="let passage of watsonResponse;let i=index;">
<p role="alert" aria-live="polite" aria-atomic="true" tabindex="0" style="font-size: medium; margin-bottom: 4px;">
{{passage.value.input.text}}
</p>
<div role="alert" aria-live="polite" aria-atomic="true" tabindex="-1" style="margin-bottom:4px;" *ngIf="passage.who==='watson'&& passage.label==='DL codes'">
<span class="btn-group-star" *ngFor="let item of passage.value.codesWithLinks; let pwe=index">
<button class="btn btn-secondary wlDlBtn" tabindex="0" id="pdfbtn{{i}}{{pwe}}" *ngIf="item.type==='pdf'" type="button"
placement="top-left" attr.aria-label="{{'Document '+item.code}}">
<span>{{'Document - '+item.code}}</span>
</button>
<button class="btn btn-secondary wlDlBtn" tabindex="0" id="wblbtn{{i}}{{pwe}}" *ngIf="item.type==='weblink'" type="button"
placement="top-left" attr.aria-label="{{'Document '+item.code}} ">
<span role="link">{{'Web Link - '+item.code}}</span>
</button>
<button class="btn btn-secondary wlDlBtn" tabindex="0" id="excelbtn{{i}}{{pwe}}" *ngIf="item.type==='excel'" type="button"
placement="top-left" attr.aria-label="{{'Document '+item.code}} ">
<span>{{'Document - '+item.code}}</span>
</button>
<br>
</span>
</div>
<div tabindex="-1" style="font-size: medium; margin-bottom: 4px;" *ngIf="passage.who==='watson' && passage.label==='Relevance node'">
<p role="alert" aria-live="polite" aria-atomic="true" tabindex="0"> {{passage.value.input.text}} </p> <br />
<div role="alert" aria-live="polite" aria-atomic="true" style="display:flex;margin-top: 1em;">
<div id="drop_{{i}}">
<button role="checkbox" tabindex="0" id="feedbackDropBtn_{{i}}" aria-expanded="false" aria-label="select" class="drop-toggle btn flat">
<span aria-hidden="true">Select</span>
<span id="feedbackDropBtn" aria-hidden="true">Select</span>
<i class="fa fa-angle-down"></i>
</button>
<div id="feedback_{{i}}" class="drop-show" *ngIf="!passage.isDisabled" style="height: 85px;margin-left: 3%;overflow-y: scroll;">
<label id="check{{cb}}" *ngFor="let option of optionsArray;let cb=index">
<input type="checkbox" id="checkItem_{{i}}{{cb}}" attr.aria-labelledby="{{'chkbx' + cb}}" name="checkbox" tabindex="0" />
<span id="chkbx{{cb}}">{{option.code}}</span>
</label>
</div>
</div>
<span aria-live="polite" aria-atomic="true">
<button type="button" tabindex="0" aria-label="Submit" style="text-align: center;height: 2.2em;margin-left: 0.5em;" class="submitbtn" id="submit_{{i}}">
<span style="color:#4E8416">Submit</span>
</button>
</span>
</div>
</div>
</div>
</div>

打印稿代码:

watsonResponse: any = [{ "label": "text", "value": { "input": { "text": "Here are the documents or links that I found that match most closely to your search criteria. Click on a link to view the document in the Document Viewer. If the link is for a webpage, the link will be opened in a new tab in your browser." } }, "who": "watson", "time": "2021-9-3|9:39:29" }, { "label": "DL codes", "value": { "input": { "text": "AB0003,AB0037" }, "codesWithLinks": [{ "code": "AB0003", "link": "", "summary": "Cultural Competency Training 2021", "type": "pdf", "DLWL_links_int": "", "checked": false }, { "code": "AB0037", "link": "", "summary": "Cultural Competency Training 2020", "type": "pdf", "DLWL_links_int": "", "checked": false }, { "code": "None", "checked": false }] }, "who": "watson", "time": "2021-9-3|9:39:29" }, { "label": "Relevance node", "value": { "input": { "text": "Were you able to find what you were looking for?  Please help us continue to improve your experience by selecting the document in the drop-down menu that best helped you and clicking submit for a thumbs-up.  If you did not find what you were looking for, please select “None” from the drop-down and click submit for a thumbs-down to continue." } }, "who": "watson", "time": "2021-9-3|9:39:29" }]
optionsArray: any = [{ "code": "Dot net" }, { "code": "Java" }, { "code": "Python" }];
isHiddenData: boolean = false;
getWatsonDetails() {
this.isHiddenData = true;
}

注:在通过service实时渲染数据时，也忽略CSS。点击这里查看，NVDA讲话查看器显示

Answer 1

这很可能是因为您在这些div上使用了role=“alert”。使用该角色相当于使用aria-live=“assertive”，这可能会覆盖为屏幕阅读器排队的消息。

根据@slugolicious的评论，aria-live (w3.org/TR/wai-aria/#aria-live)的定义说"用户代理或辅助技术可以选择在发生断言更改时清除队列更改"。即多个角色="alert"或aria-live ="assertive"元素可能会清除来自其他元素的消息，因此这可能是问题的原因。

根据评论，在每个警报的<p>标签和<div>标签上设置aria-live和aria-atomic可能会导致一些内容被解析并读取两次，一旦初始排队问题得到解决。如https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#additional_live_region_attributes: "所述;aria-atomic=BOOLEAN用于设置屏幕阅读器是否应始终将活动区域作为一个整体呈现。"在每个警报的内容周围设置两次这些属性可能会导致一些内容被排队等待屏幕阅读器读取两次。

我建议将<p>和<div>标签包装在一个外部元素中，该元素仅在每个警报的整个内容周围声明一次aria-live="polite"和aria-atomic="true"。

类似:

<div id="alertWrapper1" aria-live="polite" aria-atomic="true"
<p tabindex="-1" style="font-size: medium; margin-bottom: 4px;">
{{passage.value.input.text}}
</p>
<div tabindex="-1" style="margin-bottom:4px;" *ngIf="passage.who==='watson'&& passage.label==='DL codes'">
<span class="btn-group-star" *ngFor="let item of passage.value.codesWithLinks; let pwe=index">
<button class="btn btn-secondary wlDlBtn" tabindex="0" id="pdfbtn{{i}}{{pwe}}" *ngIf="item.type==='pdf'" type="button"
placement="top-left" attr.aria-label="{{'Document '+item.code}}">
<span>{{'Document - '+item.code}}</span>
</button>
<button class="btn btn-secondary wlDlBtn" tabindex="0" id="wblbtn{{i}}{{pwe}}" *ngIf="item.type==='weblink'" type="button"
placement="top-left" attr.aria-label="{{'Document '+item.code}} ">
<span role="link">{{'Web Link - '+item.code}}</span>
</button>
<button class="btn btn-secondary wlDlBtn" tabindex="0" id="excelbtn{{i}}{{pwe}}" *ngIf="item.type==='excel'" type="button"
placement="top-left" attr.aria-label="{{'Document '+item.code}} ">
<span>{{'Document - '+item.code}}</span>
</button>
<br>
</span>
</div>
</div>

另外，我注意到:你有tabindex="0"设置在本地<p>标签。根据https://www.a11yproject.com/posts/2021-01-28-how-to-use-the-tabindex-attribute/: "有一个神话，应用tabindex="0"对于非交互式元素(段落、标题、列表等)，通过为使用屏幕阅读器的人提供一种方式来关注网页或web应用程序中呈现的所有内容，有助于"提高"可访问性。不幸的是，这个善意的想法实际上并没有创造出良好的辅助技术体验。

作为最佳实践，我建议您避免在非交互式内容上使用tabindex="0"。我使用过的每个屏幕阅读器都允许用户浏览和访问网页上的非交互式文本内容，而不需要使用tabindex属性。