html - 辅助功能:在页面加载时强制阅读跨度文本的方法是什么

Question

我很好奇插入屏幕阅读阅读的正确方法是什么<span>read me on load</span>首先(它在 html 页面的中间)加载页面时？甚至

role="rude"

出于某种原因没有帮助。

谢谢。

Answer 1

您使用的不是 ARIA live regions 的一部分.你想要 role=alert或 aria-live=assertive (虽然在早期草案中“自信”最初是“粗鲁”)。

话虽如此，实时区域旨在用于已加载的页面。如果您正在制作对话框，那么您的 HTML 可能如下所示:

<div role="alert" aria-live="assertive">
Anything in here will be announced as soon as it changes.
</div>

如果您希望在页面加载时宣布对话框，请考虑隐藏其内容，然后在页面加载完成后使用脚本显示其内容。

如果您需要在页面加载后立即通知它并且它不是对话框，请考虑使用脚本在页面加载时将焦点移动到该元素。通过放置焦点，浏览器将宣布它是什么。

但是，要使其起作用，您不能只将焦点放在 <span> 上因为它不是 interactive content .您可以通过添加 tabindex 使其具有交互性属性。如果你这样做，then you will need to add a role 描述元素的作用(如果卡住，可以使用 role=region)以便屏幕阅读器可以宣布它是什么，而不是让用户认为她已经登陆了控件或以其他方式期望能够采取行动。

如果您将焦点转移到没有屏幕阅读器的用户的元素上，或者如果页面在页面加载时显示的第一件事是某种警告，那么这应该没问题。

但是，由于您没有提供上下文和示例，并且给出了比什么都不做更糟糕的所有方法，请问问自己:

你要宣布的是……

1. ……警报或对话框？
2. …已经可以接收键盘焦点的控件？
3. ...将关注所有用户，而不仅仅是那些使用屏幕阅读器的用户？

如果你最终说了两次不，那么你不应该这样做。

如果您可以提供一个示例 URL 来显示您想要执行的操作，那么我很乐意帮助您实现它。否则，我担心您编写的代码可能最终会为屏幕阅读器用户制造陷阱或障碍。