对话框应如何向屏幕 reader 用户宣布动态内容？

Question

我有一个 <dialog> 元素，当它打开时，使用 AJAX 从服务器请求一些内容。当内容 returns（当然可以是任何时间长度，具体取决于连接速度和内容量）时，新内容将动态附加到对话框中。

如何让屏幕 reader 用户知道此内容现在存在并且他们可以移动到它？插入内容后是否应将焦点移至内容？

我正在使用 a11y-dialog library 打开对话框。

我用 aria-live="polite" 设置了 dialog 的容器，并在我启动 AJAX 请求后添加 aria-busy="true"。

一旦 AJAX 请求 returns 并将内容添加到容器中，

aria-busy 就会设置为 false。

这可以在内容到达时立即宣布内容，但是，它会读取所有输入的文本，在某些情况下可能是几个段落。我对屏幕 reader 控件的体验有限，所以我不确定是否有办法中断这个自动阅读过程。

这是 dialog 的 HTML 代码。 AJAX 容器的 ID 为 #dialog-ajax-wrapper.

<div class="dialog js-dialog" id="dialog" hidden>

    <div class="dialog__overlay" tabindex="-1" data-a11y-dialog-hide></div>

    <dialog class="dialog__native" aria-labelledby="dialog-title">
        <div class="dialog__inner">

            <button class="dialog__close" type="button" data-a11y-dialog-hide aria-label="Close dialog window">
                X
            </button>

            <div class="dialog__ajax" id="dialog-ajax-wrapper" aria-live="polite"></div>

            <div class="dialog__loader" aria-hidden="true"><div class="loader"></div></div>

        </div> <!-- /.dialog__inner -->
    </dialog>
</div>

我希望以某种方式宣布内容正在加载这一事实，但目前还没有。然后一旦插入内容，它就会被宣布但不会被完整阅读。

这更加复杂，因为焦点转移到了关闭按钮。由于在加载内容之前没有其他可聚焦的元素，因此使用 Tab 键或尝试导航不会产生任何结果，这可能会导致用户认为没有任何内容可用并离开页面。

这是正确的方法还是有更好的方法？

Answer 1

How can I make screen reader users aware that this content now exists and that they can move to it? Should focus be moved to the content once it is inserted?

聚焦静态文本或使其可聚焦不是一个好主意。用户可能认为他可以与文本交互，但事实并非如此。基本反应是 "it doesn't work".

一般来说，在对话框中放置焦点的规则如下：

当对话框向用户请求信息（输入文本、回答问题等）时，焦点应放在第一个交互控件或最可能的答案上。它不应该放在按钮上，除非没有其他类型的控件。尤其是关闭按钮。
如果不需要交互，则焦点的正确位置是在用户最有可能点击的按钮上。通常是 OK 或 Yes，但不可取消的操作除外，例如删除，默认情况下最好关注 No 或 Cancel。

所以在你的情况下你是正确的，焦点必须停留在确定或关闭按钮上，而不应该移开。

This works to announce the content as soon as it arrives, however, it reads all text entered, which in some cases can be several paragraphs. My experience with the screen reader controls is limited, so I'm unsure if there is a way to interrupt this automatic reading process.

不用担心文本长度。当然也有读完就停，重复，一段一段，一句话，一个字的读法。

windows 下的 Jaws 或 NVDA：
- 方向键阅读
- Ctrl 闭嘴
在 iOS 下使用 VoiceOver
- 扫一扫left/right和转子阅读
- 两根手指点击闭嘴
等等

我鼓励您阅读文档或关注有关多个屏幕 reader 的教程。最受欢迎的是 windows 下的 Jaws 和 NVDA，Mac 和 iOS 下的 VoiceOver，Android...

下的 Talkback

I would expect the fact that content is loading to be announced in someway, which it currently isn't.

如果加载速度足够快，根本没有理由通知加载。我希望这是你的情况。从根本上说，一旦出现对话框，我就不想等太久了。

如果加载需要一段时间，如果只在加载所有内容时才出现对话框可能会更好。这将消除您对在加载对话框内容时可能发生的事情以及用户可能会怎么想的担忧。

您可以显示一个单独的负载指示器而不是空对话框。如果这样做，请不要忘记使用 aria-live 以便宣布加载。

Then once the content is inserted, it is announced but not read in its entirety.

当内容变得太长时，普通屏幕 reader 用户无论如何都会开始使用导航快捷方式，例如箭头键或 left/right 扫动，而不是等待所有内容都被一次读取. 所以别担心，如果您的文本可以通过这种导航方式访问就足够了。

Answer 2

模式总是难以访问，直到元素被完全采用。

我会在号召性用语之后插入动态内容，这样用户就会知道他需要填写的内容。

对话框应如何向屏幕 reader 用户宣布动态内容？

How should a dialog announce dynamic content to screen reader users?

javascript

ajax

accessibility

dialog

aria-live