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

Question

I have a plugin jQuery Terminal and I want to make it accessible to screen readers. What should I do to make the input of text accessible?

Generated html look like this:

<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>

As far as I can tell the textarea is always in focus when entering text (I had it for mobile but then turn it on for all browsers).

Answer 1

I'm testing using NVDA on the jQuery Terminal test page. There is a <div class="terminal-output"> I added a role="alert" attribute and my screen reader is reading out all the textual content that is added to the terminal-output .

However, it really depends on what you actually want to achieve with your accessibility. What do you want the screen reader to actually read? You'll need to experiment, but take a look at aria roles and ways to callout things that you want the reader to read and present to your user.

See my screen reader log and how it reads out what is contained in the "console" window: