0

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

设置

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

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 确实捕获了 -function 插入的动态内容，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 仍然非常流行和广泛（我也将它用于大多数事情）。因此，最好将此问题发送到正确的地址并修复它。

4

1 回答 1

0

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

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

于 2021-02-27T18:59:05.390 回答