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

Question

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

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

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

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

我对其他解决方案持开放态度。在线游戏的可访问性最佳做法是什么？

Answer 1

您可以使用<div>属性aria-live='polite'（或某种容器）。每次更新<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或任何适合设置要显示的文本的属性。）

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

如果您通过将颜色更改为绿色来指示正确答案，请记住，某些缺色用户无法区分绿色与其他颜色。除了将正确的答案更改为绿色之外，您还应该将其设为粗体或斜体，或者使用＆＃34;（正确答案）＆＃34;除了颜色之外，在它前面标记，或者其他一些指示。