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

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

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

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