javascript - 对话框应如何向屏幕阅读器用户宣布动态内容？

Question

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

如何让屏幕阅读器用户意识到此内容现已存在并且他们可以移至该内容？插入内容后是否应将焦点移至内容？

<小时/>

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

我有 dialog 的容器设置为 aria-live="polite"并添加aria-busy="true"一旦我启动 AJAX 请求。

aria-busy然后设置为 false一旦 AJAX 请求返回并且内容被添加到容器中。

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

这是 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?

聚焦静态文本或使其可聚焦并不是一个好主意。用户可能认为他可以与文本进行交互，但事实并非如此。基本的 react 是“它不起作用”。

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

• 当对话框请求用户提供信息(输入文本、回答问题等)时，焦点应放在第一个交互式控件或最可能的答案上。除非没有其他类型的控件，否则不应将其放置在按钮上。特别是不要在关闭按钮上。
• 如果不需要交互，则正确的焦点位置是用户最有可能点击的按钮。通常“确定”或"is"，但不可取消的操作(例如删除)除外，最好默认选择“否”或“取消”。

因此，在您的情况下，您是正确的，焦点必须保持在“确定”或“关闭”按钮上，并且不应移开。

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
  • 左右滑动和转子即可读取
  • 两根手指点击即可闭嘴
• 等等

我鼓励您阅读有关多个屏幕阅读器的文档或教程。最受欢迎的是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.

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