Javascript 咏叹调角色='；日志'；在一个可访问的HTML游戏中使用一个讲述鬼魂的div是否相关？_Javascript_Html_Terminal_Wai Aria

Javascript 咏叹调角色='；日志'；在一个可访问的HTML游戏中使用一个讲述鬼魂的div是否相关？

javascript html terminal

Javascript 咏叹调角色='；日志'；在一个可访问的HTML游戏中使用一个讲述鬼魂的div是否相关？,javascript,html,terminal,wai-aria,Javascript,Html,Terminal,Wai Aria,我正在开发一个带有文本界面的HTML游戏，我想让它可以访问为了产生rpg对话框效果，文本以打字机的方式显示-在空格上添加延迟我使用递归Javascript函数来实现这一点：如果是空格，则设置超时（f，单词之间的时间）如果是标准字符，则播放声音并设置超时（f，字符的时间）问题是，在屏幕阅读器上焦点不能顺利跟随当奥卡阅读课文时，它会将句子[课文长度]重复几次：“我”、“它”、“它我”、“它是”、“它是一个”、“它是一个” 也许我可以用CSS（作为文本块）让世界显示出来，但是用CSS很

我正在开发一个带有文本界面的HTML游戏，我想让它可以访问

为了产生rpg对话框效果，文本以打字机的方式显示-在空格上添加延迟

我使用递归Javascript函数来实现这一点：

如果是空格，则

设置超时（f，单词之间的时间）

如果是标准字符，则播放声音并
```
设置超时（f，字符的时间）
```

问题是，在屏幕阅读器上焦点不能顺利跟随

当奥卡阅读课文时，它会将句子[课文长度]重复几次：“我”、“它”、“它我”、“它是”、“它是一个”、“它是一个”

也许我可以用CSS（作为文本块）让世界显示出来，但是用CSS很难描述节奏（就像对声音计时一样——有许多延迟的关键帧）

我找到的解决方案是放置一个“ghost”div，其中包含一个由屏幕阅读器读取的文本。


很久很久以前[屏幕阅读器读到的]
[文本逐块添加，并
添加到结束行]

显示消息的（简化）功能如下：

var mon=document.getElementById（“重影监视器”）；
函数显示消息（txt，el）{
/*
*一个字一个字地生动地显示消息
*/
var msg=document.createElement（'p'）；
el.appendChild（msg）；
txttab=txt.split（“”）；
//使用setTimeout递归地逐个显示字符
t、 _show_chars（t.msg_idx，msg，txttab）；
/*
*屏幕阅读器发出的信息
*/
var ghostmsg=document.createElement（'p'）；
mon.appendChild（ghostmsg）；
ghostmsg.innerHTML=txt.replace（'\n'，“
”）.replace（/«»/，“”）；
}

因此，在这种情况下，解决方案是复制实时内容，以便为无法用眼睛阅读的人提供特定部分

这个解决方案看起来很难看，你知道另一种处理方法吗

<body>
  <div id="ghost-monitor" role="log" aria-live="polite">
    A long long time ago [what the screen reader read]
    [text added block by block, with <br> to end line]
  </div>
</body>

var mon=document.getElementById("ghost-monitor");
function show_msg (txt,el){
    /*
     * Message lively shown character by character
     */
    var msg=document.createElement('p');
    el.appendChild(msg);
    txttab=txt.split('');
    //recursively display characters one by one with setTimeout 
    t._show_chars(t.msg_idx,msg,txttab);

    /*
     * Message spoken by screen reader
     */
    var ghostmsg=document.createElement('p');
    mon.appendChild(ghostmsg);
    ghostmsg.innerHTML=txt.replace('\n',"<br>").replace(/«»/,'"');
}