NVDA Reading out Text Twice in Chrome

Question

For the following markup:

<div class="form-group">
   <label class="control-label" for="email">Email Address</label>
   <input type="text" name="email" id="email" placeholder="Email Address" class="form-control">
</div>

this is what is being readout by NVDA:

Firefox

Email Address Edit Blank

IE

Email Address Edit Blank

Chrome

Email Address Edit Email Address Blank

It seems that chrome is also reading out the placeholder text but Firefox and IE aren't. Removing placeholder text isn't an option since it is a requirement.

In this case, is there a way I can make Chrome not read the placeholder text?

Answer 1

Ok, so rather than manipulating your prefectly standards compliant HTML, I would simply understand the tools you're working with better. I've tried so many js hacks, but that's just what they are (hacks). Chrome tends to simply read the placeholder text. That's just it. Here are a couple references to check out. They are incredibly helpful.

browser/screenreader combos

aria support breakdown

However, if you REALLY wanted to fix this issue in Chrome, you would detect Chrome/webit (via How to detect chrome and safari browser (webkit))

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

Then you could do one of these options:

1. REMOVE the placeholder text
2. REPLACE it with regular text, which would be appended/prepended directly after/before the input, you would format this in css to overlay on the input, use js to set aria-hidden="true" and then hide the text on input focus

Here's a plnkr to show how to do it: plnkr

****NOTE**** That plnkr is sloppy code. I would write a module to accept parameters so it can be used on any input.