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.
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.
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.
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.