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

Question

我正在尝试改善网站的可访问性，但我似乎无法解决 NVDA 屏幕阅读器和加载搜索页面结果的问题。

我创建了一个使用 Angular 和 AG-Grid 的 StackBlitz 示例。

结果网格最初是不可见的。当我第一次加载结果时，它会读出仅限屏幕阅读器的文本，然后开始阅读整个表格。如果表格不被大声读出，我会更喜欢，但这不是问题。

问题是当我再次加载结果，模拟另一个搜索时，阅读器的行为很奇怪。它读取一些随机的东西，并说像 1 1 3... 这样的数字，我认为这是分页的一部分。有时它会再次读取表格，有时则不会。

在我使用aria-controls="queryResultRegion" 的搜索表单上，目标有role="region" 和aria-live="polite" 以使读者知道有动态内容

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

在结果组件 I 上，class="sr-only" 元素有条件地表示结果的数量或只是“无结果”。

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

Answer 1

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

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

如果您mark up your results table correctly（带有行标题和列标题）NVDA 和其他 AT 将能够使用特殊的键盘快捷键浏览它。不需要围绕它的活动区域。这本身可能会解决（尽管不能解释）您对“奇怪”公告的问题。

还有几点：

1. aria-controls 是 not that useful。该规范不知道它应该如何实际表现，尽管语义足够清楚。 AT 对它的支持目前很差。另一方面，它没有实际伤害，并且使语义关系明确。所以......虽然我建议你保留它，但也不要指望它会做太多（还）。我希望社区能够为aria-controls 制定一个合适的交互模式，因为在这种情况下它会很方便，如果你已经添加了它，它会“正常工作”。
2. 区域角色需要一个可访问的名称。一种明显的方法是使用 aria-labeledby 指向区域标题的 id，或者如果您不希望它可见，请使用 aria-label。
3. 如果您想为用户提供某种从搜索字段“跳转”到结果的方式（这是aria-controls 应该促进的），请考虑将tabindex=-1 添加到结果元素中，因为这将允许当结果到达时，您可以在该元素上调用 focus()。将公布可访问的名称（如果您添加它），然后 AT 用户可以使用表格导航键盘快捷键浏览结果。