CODEWITHSUNDEEP
htmlcss
hbblue
hbblue

Reputation: 305

Make placeholder text accesible without layout changes

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.

Upvotes: 3

Views: 383

Answers (1)

user1438038
user1438038

Reputation: 6059

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.

Upvotes: 3

Related Questions