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

【问题标题】：How to make custom input text box accessible to screen readers?如何使屏幕阅读器可以访问自定义输入文本框？
【发布时间】：2017-04-19 19:09:01
【问题描述】：

我有一个插件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>

据我所知，textarea 在输入文本时始终处于焦点位置（我在移动设备上设置了它，但后来为所有浏览器打开了它）。

【问题讨论】：

基本上你不能。屏幕阅读器，我上次检查时，不解析也不执行 javascript。因此，就他们而言，您动态添加的“终端”甚至都不存在。
@gforce301 所以我唯一能做的就是在 div 中添加描述，这将是终端并在 javascript 中将其删除，对吗？
@gforce301 错了。屏幕阅读器不会执行 JS，但浏览器会执行，屏幕阅读器会根据标记读取浏览器呈现的内容。
您希望如何使其可访问？您希望它在您键入命令时读出命令吗？
@zero298 我希望它像普通输入一样。我不知道屏幕阅读器如何与 input type="text" 元素交互。

标签： javascript html accessibility jquery-terminal

【解决方案1】：

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

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

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

【讨论】：

谢谢，需要做一些测试，可惜 NVDA 只适用于 windows。