Can I remove screen reader hint and retain placeholder text-CodePudding

I'm making a survey alongside the google chrome screen reader. I've noticed that placeholder values are rendered "hint, enter-your-name".

So the screen reader says. "Enter your name with hint enter your name"

The screen reader is already reading the label and so my question is, this placeholder hint seems redundant. Can I remove the screen reader hint whilst keeping the placeholder text?

<fieldset class="about">
          <legend>About you</legend>
          <label id="name-label" for="name">Enter your name</label>
          <input id="name" name="name" type="text" placeholder="enter your name">
          <label id="email-label" for="email">Email</label>
          <input id="email" name="email" type="email" placeholder="Enter your email">
          <label id="age-label" for="number">Age</label>
          <input id="number" name="number" type="number min="10" max="100" placeholder="Age">
</fieldset>

I tried to use a display: none on the screen reader option, but then the input wasn't focusable. Is there another option?

<form id="survey-form">
    <fieldset class="Enter your name">
      <legend>Enter Your name</legend>
      <label id="name-vis" for="name-vis"></label>
      <input id="name-vis" name="name" type="text" placeholder="enter your name" aria-hidden="true">
      <label id="name-read" for="name-read">Enter your name</label>
      <input id="name-read" name="name" type="text">
    </fieldset>
</form>

Thanks for your help

CodePudding user response：

The word "hint" is being added by that particular screen reader (chromevox). Neither JAWS nor NVDA nor VoiceOver say "hint".

Make sure you understand the difference between an "accessible name" and an "accessible description". I talked about these two concepts in these two answers:

The placeholder attribute is being used in the "Accessible Name Computation" to calculate the "accessible description". And as noted in my previous two answers, a screen reader will announce the "accessible name" of an element and then the "accessible description". With chromevox, it sounds like "with hint" is being added even though it's not part of your element. I would not try to fiddle with how a screen reader announces things.

But going back to your original code, I find it a little odd for a placeholder to be the same text as the label. How does having the text repeated help the user? The spec for placeholder says:

"The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry"

It's interesting that the spec says the placeholder is a "hint" and chromevox injects "with hint" when it announces it.

CodePudding user response：

There can be multiple approaches, using aria-label and aria-labelledby and aria describedby

Try this using aria-label should work

<form id="survey-form">
        <fieldset class="Enter your name">
          <legend>Enter Your name</legend>
          <label id="name-vis-label" for="name-vis"></label>
// added aria-label for input element
          <input id="name-vis" aria-label="Enter your name" name="name" type="text" placeholder="enter your name">
        </fieldset>
    </form>