0

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

Lauro235
  • 121
  • 1
  • 8
  • Labels don't usually contain instructions. I'd remove "Enter your" from all your labels. That's what placeholders are fo. – isherwood Oct 21 '21 at 14:22
  • I know that, but I dislike the way the screen reader says "with hint edit your name". It would be great if it could just say "Enter your name". I originally had the label as Name. This is just me attempting to work around a verbose screen reader. I want it to be accessible, but I'd like it to also not use redundant words – Lauro235 Oct 21 '21 at 14:38
  • I'm not sure you'll entirely eliminate redundancy, but screen reader users are accustomed to that pattern. It's everywhere. – isherwood Oct 21 '21 at 14:44
  • Ok, that's alright, it's always nice to do things properly, and if this is the proper way, then I'll leave it at that. Thanks for your help. – Lauro235 Oct 21 '21 at 14:59

2 Answers2

0

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>
lost_in_magento
  • 703
  • 8
  • 22
  • Hmm now the screen reader says. "Enter your name with hint enter your name with hint enter your name". I just want it to say "Enter your name" – Lauro235 Oct 21 '21 at 14:16
  • Check the property aria-label which I have added it the input tag! Screenreader will read whatever inside that – lost_in_magento Oct 21 '21 at 14:18
  • Thank you. You've changed the code now, but it's still not quite right. Now the screen reader says "Enter your name with hint enter your name. Edit text" – Lauro235 Oct 21 '21 at 14:36
  • https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute Check this link - It read whatever which is inside aria-label="I'll be read" – lost_in_magento Oct 21 '21 at 16:02
0

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Thanks for the information. Very much appreciated. I know the code is a bit odd, I just disliked the way the screen reader said "with hint edit your name". I originally had the label as Name. This was just me attempting to work around a verbose screen reader. I want it to be accessible, but I'd like it to also not use redundant words. I've just had a look at Windows 10 Narrator and that has different quirks and issues. I've just come to realise every screen reader is different and you can't build the perfect user experience unfortunately. So long as it's accessible in a functional way! – Lauro235 Oct 21 '21 at 15:17
  • There might be an option in chromevox to *not* announce the "accessible description". I think I've seen this option in other screen readers. But that would be under user control so whether they hear "with hint [text]" would be up to the user. But you get it that you should just focus on creating an accessible app and don't worry about how the screen reader announces it. – slugolicious Oct 21 '21 at 20:43