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

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

Basically you can't. Screen readers, the last time I checked, do not parse nor execute javascript. So your dynamically added "Terminal" doesn't even exist as far as they are concerned. — gforce301, Apr 19 '17 at 19:19
@gforce301 so the only thing I can do is to add description inside div that will be terminal and remove it in javascript, am I right? — jcubic, Apr 19 '17 at 19:23
@gforce301 That's wrong. The screen reader won't execute the JS, but the browser will and the screen reader reads what the browser renders based on the markup. — zero298, Apr 19 '17 at 19:25
How exactly do you want to make it accessible? Do you want it to read out commands as you type them? — zero298, Apr 19 '17 at 19:27
@zero298 I want it to be like normal input. I don't know how screen readers interact with input type="text" elements. — jcubic, Apr 19 '17 at 19:31
@zero298 I apologize for my error. Now I'm confused. If the browser renders it and the reader sees everything the browser renders ... then why would this question exist at all? — gforce301, Apr 19 '17 at 19:32
I don't want to have weird errors like screen readers reads what's in spans before inside and after cursor and the same is in textarea. I tthough that maybe there is something that can be done to prevent this. I search but didn't find anything about non input inputs. — jcubic, Apr 19 '17 at 19:40
@gforce301 The reader is selective about what it tries to read to the user. You can do a lot of magic with correct timing of `aria`, roles, and correct semantic markup. Take a look at [OpenAjax Accessibility](http://oaa-accessibility.org/) for examples on a lot of JS stuff you can do with screen readers. — zero298, Apr 19 '17 at 19:43
@zero298 thanks for the link, I found the suitable role for my case which is `log` so it'll read only what's new and I've hidden commands that got echoed with `role="presentation"` and `aria-hidden="true"` role didn't make NVDA skip it. You can add that link to the answer so others will easier found it. — jcubic, Apr 20 '17 at 18:45

score 2 · Accepted Answer · answered Apr 19 '17 at 19:40

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:

Thanks, need to do some testing, too bad NVDA is only for windows. — jcubic, Apr 19 '17 at 19:54

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

1 Answers1