Accessibility 屏幕阅读器处理动态搜索表单结果

我试图提高网站的可访问性，但我似乎无法解决NVDA屏幕阅读器和加载搜索页面结果的问题

我创建了一个使用Angular和AG栅格的示例

结果网格最初不可见。当我第一次加载结果时，它只读取屏幕阅读器上的文本，然后开始读取整个表格。我更喜欢不大声朗读表格，但这不是问题所在

问题是，当我再次加载结果，模拟另一次搜索时，读者的行为非常怪异。它读一些随机的东西，上面写着像13这样的数字。。。我认为这是分页的一部分。有时它会重新阅读表格，有时它不会

在搜索表单上，我使用了

aria controls=“queryResultRegion”

，目标有

role=“region”

和

aria live=“little”

，让读者意识到有动态内容

<form action="." aria-controls="queryResultRegion">
  <button (click)="loadResults()">Load result</button>
  <button (click)="noResult()">Load no result</button>
</form>

<div role="region" aria-live="polite" id="queryResultRegion">
  <my-grid [rowData]="rowData"></my-grid>
</div>

---

您确定活动区域适合结果表吗

我可以理解使用活动区域来告诉你“X结果”或“无结果”，但不是结果本身，这（我希望）是一个可浏览的列表，包含每个条目的简短摘要和超链接

如果您（具有行标题和列标题），NVDA和其他ATs将能够使用特殊的键盘快捷键浏览。周围不需要一个活动区域。这本身就可以解决（尽管不能解释）你在“怪异”公告上的问题

还有几点：

aria控件

is。规范没有给出它实际应该如何运行的概念，尽管语义已经足够清楚了。目前对它的支持很差。另一方面，它没有实际的危害，并且使语义关系明确化。所以虽然我建议你保留它，但也不要指望它能发挥多大作用。我希望社区能为

aria控件

制定出一个合适的交互模式，因为它在这种情况下非常方便，如果您已经添加了它，它将“正常工作”

区域角色需要一个可访问的名称。一个显而易见的方法是使用

aria标签通过

指向区域标题的id，或者如果不希望其可见，请使用

aria标签

<> LI>如果你想让用户从搜索字段跳到结果（这就是<代码> ARI控件应该是便利的），考虑将<>代码> TabeCurdio= -1 添加到结果元素中，这样当结果到达时，你就可以在该元素上调用<代码>焦点（）/<代码>。将宣布可访问的名称（如果添加），然后AT用户可以使用表导航键盘快捷键浏览结果

---

我不明白的是，为什么阅读更新如此不确定？有时它读我想要的文本，有时它只读数字，有时它读重复的数字。我可以接受Angular由于其内部的原因没有对组件进行完整的重新渲染，但它看起来仍然是随机的。你读过这篇文章吗？显然ag grid中有一些优化，不能很好地与屏幕阅读器配合使用。他们建议关掉它们。

<ng-container *ngIf="rowData">
  <h2 class="sr-only" #resultHeader>Search Result</h2>
  <div *ngIf="rowData.length < 1; else elseBlock" class="sr-only">
    No results
  </div>
  <ng-template #elseBlock>
    <div class="sr-only">
      Number of results: {{ rowData.length }}
    </div>
  </ng-template>

  <ag-grid-angular style="width: 100%; height: 200px;" class="ag-theme-alpine" [rowData]="rowData"
    [columnDefs]="columnDefs" [gridOptions]="gridOptions">
  </ag-grid-angular>
</ng-container>