如何让 JAWS 屏幕阅读器确认动态内容更新

如何解决如何让 JAWS 屏幕阅读器确认动态内容更新

最近，我一直在研究 Web Assembly (WASM)、Rust 和 Yew。为了重现我的问题，我在下面添加了我的项目代码。代码本身没有任何问题，因此如果您不想先重现设置，可以跳过它。

设置

以下是 this Yew example 的复制粘贴 - 我将所有内容保留在链接页面上。

cargo.tompl：

[package]
name = "yew-app"
version = "0.1.0"
authors = ["Yew App Developer <name@example.com>"]
edition = "2018"

[lib]
crate-type = ["cdylib","rlib"]

[dependencies]
yew = "0.17"
wasm-bindgen = "0.2.67"

src/lib.rs：

use wasm_bindgen::prelude::*;
use yew::prelude::*;

struct Model {
    link: ComponentLink<Self>,value: i64,}

enum Msg {
    AddOne,}

impl Component for Model {
    type Message = Msg;
    type Properties = ();
    fn create(_: Self::Properties,link: ComponentLink<Self>) -> Self {
        Self {
            link,value: 0,}
    }

    fn update(&mut self,msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::AddOne => self.value += 1
        }
        true
    }

    fn change(&mut self,_props: Self::Properties) -> ShouldRender {
        // Should only return "true" if new properties are different to
        // prevIoUsly received properties.
        // This component has no properties so we will always return "false".
        false
    }

    fn view(&self) -> Html {
        html! {
            <div>
                <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
                <p>{ self.value }</p>
            </div>
        }
    }
}

#[wasm_bindgen(start)]
pub fn run_app() {
    App::<Model>::new().mount_to_body();
}

static/index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <Meta charset="utf-8">
        <title>Yew Sample App</title>
        <script type="module">
            import init from "./wasm.js"
            init()
        </script>
    </head>
    <body>
    </body>
</html>

设置好并位于 yew-app 项目目录中后，您可以编译它：

wasm-pack build --target web --out-name wasm --out-dir ./static

然后使用任何服务器使其可用，例如：

miniserve ./static --index index.html

问题

之后访问 127.0.0.1:8080（或应用程序运行的任何端口）时，一切看起来都不错。我很肯定一切正常，对于视力正常的人来说应该是这样。不过，对于盲人 JAWS 用户来说就不是那么回事了。

这是我在页面上看到的：

Yew Sample App
+1 Btn

0

点击按钮时，似乎没有任何反应。使用 JAWS 光标（本质上是鼠标指针）产生以下输出：

 +1
0

即使在使用 JAWS 模拟鼠标点击时，似乎也没有任何反应。我说“出现”，因为事实上，计数器会更新。

如果我使用 ALT + TAB 离开网站，然后切换回它，然后再次使用 JAWS 光标，我可以看到更新的计数器。不过，JAWS 基于网站创建的虚拟文档中的计数器保持不变。 JAWS 确实捕获了由 init() 函数插入的动态内容，因此问题本身不在于动态 WASM 内容。相反，段落中的内容更新方式似乎有问题。

我切换到讲述人，最初遇到了完全相同的问题。然后我切换到 NVDA，一切正常——即使不使用任何特殊光标，计数器也会立即更新。

我对段落元素进行了更改：

// snip
<p role="status" aria-live="polite">{ self.value }</p>
// snip

现在讲述人也正确地处理了更新；此外，Narrator 和 NVDA 现在都会自动宣布计数器更新，因为它们应该根据 aria-live="polite"。 JAWS 没有做这些事情。

然后我尝试在 JavaScript 中实现类似的东西：

<!DOCTYPE html>
<html lang="en">
    <head>
        <Meta charset="utf-8">
        <title>Test page</title>
    </head>
    <body>
        <script>
            var counter = 0;
            document.body.innerHTML += `<div>
                    <button onclick="addOne()">+1</button>
                    <p id="counterP">${ counter }</p>
                </div>`;

            function addOne() {
                counter += 1;
                document.getElementById("counterP").innerHTML = counter;
            }
        </script>
    </body>
</html>

包括 JAWS 在内的所有屏幕阅读器都正确处理了这一点。

很难确定罪魁祸首在哪里。看起来 JAWS 正确处理了组件的（初始）呈现，但未正确处理组件（部分）的更新。讲述人有相同的问题，但有（虽然不雅）的解决方法。 NVDA 和 VoiceOver 似乎是仅有的开箱即用的屏幕阅读器。

这可能是 WASM 的一个问题——我需要使用另一个 WASM 编译器来实现这样的东西。这也可能是 wasm-pack 的问题（也许一些 JavaScript 和其他 WASM 编译器没有包含在 wasm-pack 实现中的可访问性措施？）或者它可能是 Yew 特定的渲染问题；不过，由于 WASM 已经编译好了，而 Yew 那时已经没有真正的业务了，我对此表示怀疑。有没有人在这方面有更多的专业知识，或者甚至只是建议我还可以尝试找出这些问题的原因？

由于 NVDA 工作正常，我当然可以告诉 Windows 用户使用它，但 JAWS 仍然非常流行和广泛使用（我也将它用于大多数事情）。因此，最好将此问题解决到正确的地址并加以解决。

解决方法

这可能是我见过的最奇怪的可访问性怪癖之一。

您可以通过将 div 元素转换为 header、main、footer 或其他一些 HTML 5 元素来解决上述问题。然后更新正常工作，即使对于 JAWS 也是如此。

如何让 JAWS 屏幕阅读器确认动态内容更新

如何解决如何让 JAWS 屏幕阅读器确认动态内容更新

设置

问题

解决方法

相关推荐