Disable placeholder text to be read by all accessibility API(screen reader)

Question

Some screen readers read placeholder value and some do not. Is there a way in which reading placeholder value can be disabled for All screen reader(in context with HTML input). Especially the IOS screen reader reads placeholder value, in that case, the same information repeated twice.

What I want is to show placeholders for screen users and hidden labels for screen reader users.

Edit: When I asked the question it was the first time working on accessibility, to just fix an issue. On further exploration, I find out that we can just use a hidden label and associate it with the input element using for the attribute. Here the w3 documentation link .

Answer 1

According to Understanding Success Criterion 2.5.3: Label in Name

As such, in the absence of any other nearby text string (as described in the preceding list), if an input contains placeholder text, such text may be a candidate for Label in Name. This is supported both through the accessible name calculation (discussed later) and from the practical sense that where a visible label is not otherwise provided, it is likely that a speech-input user may attempt to use the placeholder text value as a means of interacting with the input .

As long as you do not provide a visual label, the placeholder text is used by assistive technologies (speech-input for instance). Disabling input-assistance to provide more user experience to output-assistance is counter-productive.

You perfectly can use a visual label which emulates the placeholder behaviour when the field is empty (with appropriate precautions to make the fields usable with input assistance once the field is filled).

Answer 2

For my requirement as I mentioned in the question

What I want is to show placeholders for screen users and hidden labels for screen reader users.

The best way is to add a hidden label and associate input element with attribute to the respective label.

<label for="search" class="visuallyhidden">Search: </label>
<input type="text" name="search" id="search" placeholder>
<button type="submit">Search</button>
.visuallyhidden {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

Also, you can simply hide the label applying style as display: none .

<label style={{display: 'none'}} for="search"> Search: </label> 

You can follow w3.org document . It's really worth looking at the documentation.

Answer 3

If you really want to get creative, you could in theory use JS to manage the placeholder attribute(s). It would slow down the loading of the page somewhat, but you could then remove the placeholder attribute whenever the input receives focus and re-add it when the input loses focus. That would have the effect of disabling the placeholder attribute for assistive technology (at least in interactive forms mode). Sighted visitors probably wouldn't notice the difference. Here's an example in a fiddle . I tested in NVDA/Chrome and it worked, but I can't speak for any other screen-reader/browser combinations.

// on document load, add the placeholder text
document.addEventListener("DOMContentLoaded", function(){
   myInput.setAttribute("placeholder", myPlaceholder)
});

// when receiving focus, remove the placeholder text
myInput.addEventListener('focus', (event) => {
    myInput.removeAttribute("placeholder");
});

// when losing focus, re-add the placeholder text
myInput.addEventListener('blur', (event) => {
   myInput.setAttribute("placeholder", myPlaceholder)
});

As others have stated, using placeholders is not a suitable replacement for using labels. If you really don't like the look of labels, you can position them off-screen or use the clip technique and continue using placeholders. The downside is that some screen readers may read both the label and the placeholder, which isn't ideal, but being overly descriptive is better than being under-descriptive. I would personally be okay with some things being read twice if it only occurs on some browser/screen-reader combinations, and my code is otherwise valid and meets WCAG requirements.