angular 推迟:添加用户体验和无障碍考虑

erhoui1w  于 5个月前  发布在  Angular
关注(0)|答案(1)|浏览(42)

描述你遇到的问题

新的 defer 块是一个很棒的功能,可以帮助创建更好的用户体验。
然而,使用 defer,在可访问性方面可能会产生负面影响,因为聚焦在延迟部分的 UI 上的屏幕阅读器会首先读取占位符或加载块,而不会注意到延迟组件加载和渲染后的变化。
这不是 Angular 已经解决的问题,但在使用时应该牢记这一点。

输入出现问题的主题的 URL

https://angular.dev/guide/defer/ AND https://angular.dev/best-practices/a11y

描述你在文档中寻找的内容

我正在寻找关于 defer 如何影响可访问性的提示。

描述导致你遇到问题的操作

使用屏幕阅读器并让它读出聚焦的延迟部分。如果没有 Package 在 aria-live 区域内,它将不会注意到任何变化。

描述希望通过什么方式解决问题以修复问题

我建议在文档中添加一个提示或最佳实践部分来解决这个问题(使用 aria-live="polite" )

如果有截图可以更好地说明问题,请粘贴在这里

  • 无响应*

如果这个问题导致了异常或错误,请在这里粘贴

  • 无响应*

如果问题是特定于浏览器的,请指定设备、操作系统、浏览器和版本

  • 无响应*

在这里提供尽可能详细的其他信息

示例没有 aria-live :

<p>
@defer (on timer(10000)) {
  <ngx-lipsum [config]="config"></ngx-lipsum>
} @placeholder() {
  <!—- only this part is announced to the screenreader as shown first -—>
  Placeholder...
} @loading(minimum 1000) {
  Loading...
} @error {
  Error...
}
</p>

示例有 aria-live :

<p aria-atomic="true" aria-live="polite">
@defer (on timer(10000)) {
  <!—- announced third -—>
  <ngx-lipsum [config]="config"></ngx-lipsum>
} @placeholder() {
  <!—- announced first -—>
  Placeholder...
} @loading(minimum 1000) {
  <!—- announced second -—>
  Loading...
} @error {
  <!—- announced on error -—>
  Error...
}
</p>
y3bcpkx1

y3bcpkx11#

注意:我在macOS上使用Voice Over测试了它。

相关问题