2

I have a form on my website and to show what the user needs to input I use placeholders. However, screen readers wont read that text.

I do not want to add a label to each input in the form because that doesn't fit the desired visuals.

What would be the best solution to still create this functionality, without changing the styling of the page? I'm open for suggestions.

Simon
  • 41
  • 1
  • 9
hbblue
  • 194
  • 2
  • 12

2 Answers2

3

First option: Insert a hidden label that references the input field. It will not be visible on screen, but screen readers can access and read its content to the user:

<p>
  <label class="class-to-hide" for="search">Enter search term</label>
  <input type="text" id="search" name="search" />
</p>

Make sure, however, that the reference is intact (i.e. for == id), otherwise it remains unclear which element the label belongs to.

Second option: Use WAI-ARIA attributes to define labels that are only available for screen readers. This way there is no need to clutter the code with hidden elements.

<input type="text" aria-label="Enter search term" name="search" />

Additional advice: The placeholder, in general, is a bad option for visually impaired users. In most browsers the placeholder text is printed in light gray and has a low contrast, which makes it hard to read for partially sighted users.

Furthermore, the placeholder disappears once you enter text in the input field. That makes it hard, too, and may lead to misunderstandings, if you cannot actually see the site. Better use a descriptive labels for screen readers instead.

user1438038
  • 5,629
  • 6
  • 55
  • 84
-1

I'm not sure if it's exactly what you mean, so please try to make your question more direct and clear (try showing some examples of code)!

From my guess you're trying to get the values of your input's placeholders. In that case, try using getAttribute("placeholder")

getAttribute() returns the value of the named attribute on the specified element. If the named attribute does not exist, the value returned will either be null or "" (the empty string); see Notes for details.

JSFiddle

HTML

<input id="demo" placeholder="Rawr"/>

JavaScript

var placeholder = document.getElementById("demo").getAttribute("placeholder");
console.log(placeholder);

source: Retrieve the “Placeholder” value with Javascript in IE without JQuery.

Simon
  • 41
  • 1
  • 9
  • I am trying to make it possible for screen readers to be able to use my form and since they don't read placeholder text then it wont be accessible. I need an alternative that wont affect visuals but will be readable by screen readers. – hbblue Jun 09 '21 at 09:21
  • the question is clear but has nothing to do with the answer you provide. I'm not the one who downvoted you but take time to read the question more carefully and check your answer accordingly – Lelio Faieta Jun 09 '21 at 09:48
  • Understood. After seeing [user1438038](https://stackoverflow.com/users/1438038/user1438038)'s answer I had noticed that my answer was not contributing to what [hbblue](https://stackoverflow.com/users/11981185/hbblue) was looking for. – Simon Jun 09 '21 at 11:29