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?

score 4 · Answer 1 · answered Nov 23 '20 at 07:55

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

score 1 · Accepted Answer · edited May 23 '17 at 12:09

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.

score 0 · Answer 3 · answered Dec 13 '16 at 17:35

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>

score -2 · Answer 4 · edited Feb 11 '16 at 15:19

-2

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.

edited Feb 11 '16 at 15:19

H. Pauwelyn

13,575
26
81
144

answered Feb 11 '16 at 14:38

Iñaki Quesada

9
4

that is a very bad pattern to start introducing into the field to fix this one...it's the core issue that needs attention. I can replicate. – beauXjames Jul 28 '16 at 18:16
I know, is not the solution, it's just a workaround. But I think that it's better that sit down waiting for a new NVDA version. – Iñaki Quesada Aug 05 '16 at 12:53
no...it's not...hacks don't persist. If the problem is that I'm meeting standards and the app that reads it is not, then I can push that off on the app. Users of that app are also accustomed to it. If there is a standardized way of resolving things, try to stick with that. – beauXjames Aug 05 '16 at 13:42

NVDA Reading out Text Twice in Chrome

Firefox

IE

Chrome

4 Answers4