描述你遇到的问题
新的 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>
1条答案
按热度按时间y3bcpkx11#
注意:我在macOS上使用Voice Over测试了它。