CODEWITHSUNDEEP
javascripthtmlaccessibilityjquery-terminal
jcubic
jcubic

Reputation: 66490

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

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

Upvotes: 1

Views: 1210

Answers (1)

zero298
zero298

Reputation: 26878

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:

Screen Reader Log

Upvotes: 2

Related Questions