为盲人和视障者提供在线问答游戏

Question

我正在开发一款游戏，我还需要为屏幕阅读器和所有其他可访问性需求添加极好的支持。

在游戏中，用户选择一个答案，网站会以绿色显示正确答案，并且分数会在顶部更新。

但是对于盲人来说，当他们选择一个答案时，他们将无法知道答案是否正确，他们的最终分数是多少（在页面顶部更新），或者他们有多少错误答案到目前为止。因为比赛以 3 次罢工结束。

我可以添加成功声音或错误答案声音，但这不会告知他们正确答案是什么（变成绿色）或回答该问题后他们的分数是多少。有什么方法可以发送屏幕阅读器命令来阅读“你的答案 X 是正确的，你的分数是 50”或“你的答案 X 是错误的，正确的答案是 Y，到目前为止你有 2 次罢工”？

我愿意接受其他解决方案。在线游戏可访问性的最佳做法是什么？

Answer 1

您可以拥有一个带有aria-live='polite' 属性的<div>（或某种容器）。每当您更新该 <div> 中的文本时，屏幕阅读器都会读取新文本。见https://www.w3.org/TR/wai-aria/#aria-live。

你的 html 应该是这样的：

<div id='answer' aria-live='polite'></div>

你的 javascript 会是这样的：

<script>
  document.getElementById('answer').innerHTML = 'Sorry, answer B is wrong.  The correct answer is C.'
</script>

(注意，使用 innerHTML 或 innerText 或任何适合设置要显示的文本的属性。)

您可以按照相同的模式添加另一条关于到目前为止有多少答案错误的消息（或将其包含在上面的同一条消息中）。

如果您通过将颜色更改为绿色来表示正确答案，请记住，一些颜色不足的用户无法将绿色与其他颜色区分开来。除了把正确答案改成绿色外，还应该加粗或斜体，或者前面有“（正确答案）”标签，或者除了颜色之外还有一些其他的指示。