问题描述
最近,我一直在研究 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 也是如此。