CODEWITHSUNDEEP
htmlgoogle-chromescreen-readersnvda
asprin
asprin

Reputation: 9823

NVDA Reading out Text Twice in Chrome

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?

Upvotes: 3

Views: 16290

Answers (4)

Damian Kacprzak
Damian Kacprzak

Reputation: 71

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

Upvotes: 4

Tamb
Tamb

Reputation: 748

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.

Upvotes: 1

Jason Corradino
Jason Corradino

Reputation: 1

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>

Upvotes: 0

I&#241;aki Quesada
I&#241;aki Quesada

Reputation: 9

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.

Upvotes: -2

Related Questions