我正在开发一个基于网络的互动小说文本冒险系统,就像这个。
http://eblong.com/zarf/glulx/quixe/quixe/play-remote.html?story=stories/Advent.ulx.js
窗口的主要部分“成绩单”是具有这些ARIA设置的<div>
。
<div
aria-live="polite"
aria-atomic="false"
aria-relevant="additions"
>
它在iOS Voiceover中运行良好。示例交互如下:
[两根手指向上滑动,画外音读取整页] “......还有一个沟壑。” [向右滑动]大于。文本域。点按两次即可进行编辑 [双击,键入E并按返回] E.内部建筑物。你在一幢建筑物内,一个大房子的大房子。这里有一些钥匙。这里有美味的食物。附近有一盏闪亮的黄铜灯。这里有一个空瓶子。大于。
[双击,键入“get lamp”,然后返回]大于。拿灯。服用。大于。
“大于”可能有一个更好的ARIA标签(“命令提示符”),但关键是它是会话。用户输入内容,Voiceover会将其重复给您,然后大声朗读文本冒险的响应。然后你说些什么,然后游戏回应。这是游戏的核心循环。
在OS X El Capitan 10.11.5 Safari 9.1.1上,它无法正常工作。最初它只关注文本字段,而不是阅读页面上的任何文本,但至少我可以使用VO箭头翻阅它。这是我在互动时听到的内容:
[输入E并按回车] E.内部建筑物。你在一幢建筑物内,一个大房子的大房子。地上有一些钥匙。
此时,画外音停止说话,这是不正确的,因为它应该告诉我房间里所有其他东西。
[输入“get lamp”并按返回]更大,编辑文本。
应该说“采取”。继续与游戏互动,画外音拒绝阅读成绩单中的任何更多单词,除非我使用VO箭头手动导航到它们。
我试图像这样做一个简化的测试用例:
<!DOCTYPE html><html>
<body>
<div id=container aria-live="polite" aria-atomic="false" aria-relevant="additions">
<div>Here's some text.</div>
</div>
<form><input name=prompt></form></body>
<script>
container = document.getElementById("container");
// http://www.cs.virginia.edu/~robins/quotes.html
responses = [
"Moral indignation is jealousy with a halo.",
"Glory is fleeting, but obscurity is forever.",
"The whole problem with the world is that fools and fanatics are always so certain of themselves, and wiser people so full of doubts.",
"Victory goes to the player who makes the next-to-last mistake.",
"Don't be so humble - you are not that great.",
]
document.forms[0].addEventListener("submit", function(event) {
event.preventDefault();
appendDiv(event.target.prompt.value);
event.target.prompt.value = "";
var index = Math.floor(Math.random() * responses.length);
appendDiv(responses[index]);
})
function appendDiv(text) {
var div = document.createElement("div");
div.appendChild(document.createTextNode(text));
container.appendChild(div);
}
</script>
</html>
如果您在输入框中输入内容,则会在窗口中显示您的消息,以及随机选择的引用。当我尝试在iOS Voiceover中阅读它时,它很有效,读回你键入的内容然后阅读新的引文。在OS X画外音上,它会不断阅读和重读整个页面。
我的ARIA属性配置正确吗? (这是苹果方面的一个错误吗?)