个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 11:46:30 24 4
gpt4 key购买 nike

最近，我一直在研究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() -function插入的动态内容，因此问题本质上不是动态的WASM内容。而是，段落中内容的更新方式似乎有问题。
我切换到讲述人，最初遇到了完全相同的问题。然后，我切换到NVDA，一切正常进行-即使没有使用任何特殊的光标，计数器也会立即更新。
我对段落元素进行了更改: 
// snip
<p role="status" aria-live="polite">{ self.value }</p>
// snip
现在，讲述人以正确的方式正确处理了此更新；此外，讲述人和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也可能是一个问题(可能在wasm-pack实现中未包含JavaScript和其他WASM编译器的一些可访问性措施？)或者可能是特定于Yew的渲染问题；它可能是特定于Yew的呈现问题。但是，由于WASM已被编译，而Yew在那时不再有任何实际业务，因此我对此表示怀疑。有没有人在这方面有更多的专业知识，甚至只是建议我还可以尝试找出这些问题的原因？
由于NVDA可以正常工作，因此我当然可以告诉Windows用户使用它，但是JAWS仍然非常流行和广泛(我在大多数情况下也使用它)。因此，最好将问题解决到正确的位置并加以解决。

最佳答案

这可能是我见过的最奇怪的可访问性怪癖之一。
您可以通过将div元素转换为header，main，footer或其他一些HTML 5元素来解决上述问题。然后更新就可以了，即使对于JAWS也是如此。

关于rust - 如何使JAWS屏幕阅读器确认动态内容更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66389801/

24 4 0
文章推荐： rust - 如何从 secp256k1 中提取未压缩的公钥？
文章推荐： javascript - 从数组中删除项目或为剩余项目创建新数组是否有效(Javascript)
文章推荐： javascript - Javascript 中的参数和对象文字
文章推荐： sqlite - SQLite用户定义函数可以接受行参数吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com