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

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 on the jQuery Terminal 测试页进行测试。有一个 <div class="terminal-output"> 我添加了一个 role="alert" 属性，我的屏幕 reader 正在读出添加到 terminal-output 的所有文本内容。

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

查看我的屏幕 reader 日志以及它如何读取 "console" window:

中包含的内容

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

How to make custom input text box accessible to screen readers?

html

javascript

accessibility

jquery-terminal