NVDA Reading out Text Twice in Chrome - html

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

<input aria-hidden="true" role="alert" class="range from hasDatepicker" type="text" value="" data-type="range" id="range-from" data-uniq-id="11/19/2020" name="range-from" aria-label="11/19/2020">
The solution to double-reading in the example above for me was to add aria-hidden = "true" great idea and it works.

Answer 2

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:
REMOVE the placeholder text
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.

Answer 3

This is kind of a late response to this question, but the better solution to prevent the text from being read out loud multiple times would likely be to not use the placeholder at all, but maybe dynamically position the label within the textbox like a placeholder.
$('#form').find('input').on('keyup blur focus', function(e) {
var $this = $(this),
label = $this.prev('label'),
val = $this.val();
if (e.type === 'keyup') {
if (val === '') {
label.removeClass('active highlight');
label.addClass('focused');
} else {
label.addClass('active highlight');
label.removeClass('focused');
}
} else if (e.type === 'blur') {
if (val === '') {
label.removeClass('active highlight focused');
} else {
label.removeClass('highlight focused');
}
} else if (e.type === 'focus') {
if (val === '') {
label.removeClass('highlight');
label.addClass('focused');
} else if (val !== '') {
label.addClass('highlight');
label.removeClass('focused');
}
}
});
#form {
padding: 40px;
width: 300px;
height: 75px;
margin: 40px 40px;
float: left;
}
#form .field-wrap {
position: relative;
margin-bottom: 40px;
}
#form .field-wrap label {
position: absolute;
transform: translateY(6px);
left: 13px;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 22px;
}
#form .field-wrap label.active {
transform: translateY(-20px);
left: 2px;
font-size: 14px;
}
#form .field-wrap input {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: none;
background-image: none;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
#form .field-wrap input:focus {
outline: 0;
}
#form .field-wrap p.context {
font-size: 1em;
margin: .5rem 0rem 0rem 0rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form">
<div class="field-wrap">
<label for="textField">Label Placeholder Text</label>
<input type="text" name="textField" id="textField" autocomplete="off" aria-describedby="textFieldDescription" />
<p id="textFieldDescription" class="context">Type in some text.</p>
</div>
</div>

Answer 4

Have you tried to delete placeholder on input focus? Something like:
<input type="text" name="email" id="email" placeholder="Email Address"
onfocus="this.placeholder=''"/>
It's not the best solution, but it can work for you.