javascript - 如何使屏幕阅读器可以访问自定义输入文本框？

Question

我有一个插件jQuery Terminal，我想让屏幕阅读器可以访问它。我应该怎么做才能使文本的输入可访问？

生成的 html 如下所示：

<div class="cmd" style="width: 100%; visibility: visible;">
    <span class="prompt">
        <span>&gt;&nbsp;</span>
    </span>
    <span>Before curosr</span>
    <span class="cursor">&nbsp;</span>
    <span>after cursor</span>
    <textarea autocapitalize="off" spellcheck="false" class="clipboard">
    </textarea>
</div>

据我所知，文本区域在输入文本时始终处于焦点（我将它用于移动设备，但随后为所有浏览器打开它）。

Answer 1

我在jQuery 终端测试页面上使用NVDA进行测试。我添加了一个属性，我的屏幕阅读器正在读出添加到. <div class="terminal-output">role="alert"terminal-output

但是，这实际上取决于您实际希望通过可访问性实现的目标。您希望屏幕阅读器实际阅读什么内容？您需要进行试验，但请查看 aria 角色和标注您希望读者阅读并呈现给用户的内容的方法。

查看我的屏幕阅读器日志以及它如何读出“控制台”窗口中包含的内容：