只读取最后一次加载div的内容并跳过剩余的

Question

我有一个基于搜索标准的3种不同的div动态加载。我添加的每个div都添加了“角色=‘警报’”、"tabindex='0'“和”aria=‘礼貌’“。我注意到DOM立即加载所有3 div，但NVDA扬声器只读取最后加载的div内容。我已经在NVDA语音查看器中验证了所有显示在这里的3 div内容，但是在阅读时，它是说最后的内容。

一旦我点击按钮。NVDA逐行通话所有内容。

我使用的是角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>

TypeScript代码：

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;
  }

注意:在实时数据渲染服务中，也忽略CSS.单击此处查看NVDA语音查看器的显示

Answer 1

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

根据@slugolicious的评论，assistive的定义(w3.org/TR/wai-aria/# aria-live )表示，“用户代理或辅助技术可能会在发生断言更改时选择清除排队的更改。”也就是说，多个role=“警报”或aria=“断言”元素可能清除来自其他元素的消息，因此这可能是问题的原因。

根据注释，在每个警报的aria-live标记和<div>标记上同时设置<p>和aria-atomic可能会导致一些内容在初始队列问题解决后被解析和读取两次。正如属性中所指出的那样：“aria-原子=whole用于设置屏幕阅读器是否应该始终将活动区域作为一个整体来显示。”在每个警报的内容周围设置两次这些属性可能会导致某些内容排队等待屏幕阅读器两次读取。

我建议将<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>。Per https://www.a11yproject.com/posts/2021-01-28-how-to-use-the-tabindex-attribute/：“有一个神话认为，将tabindex="0”应用于非交互元素(段落、标题、列表等)有助于“改善”可访问性，为使用屏幕阅读器的人提供了一种方法，让他们专注于网页或web应用程序中的所有内容。不幸的是，这种善意的想法实际上并没有创造出一种良好的辅助技术体验。“

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