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

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上，CCD_；没有结果"；。

<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结果"；或"；没有结果"；，但不是结果本身，它(我希望(将是一个可浏览的列表，其中包含每个条目的简短摘要和超链接。

如果您正确标记结果表(使用行标题和列标题(，NVDA和其他AT将能够使用特殊的键盘快捷键浏览它。不需要在它周围设置一个活动区域。这本身可能会解决(尽管不能解释(你发布"奇怪"公告的问题。

还有几点：

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