Reputation: 1405
I have a form with aria-describedby
attributes on the input alements, followed by a span
tag with a description/example of the desired input. It also has class to only display for screenreaders (sighted people can make use of the placeholder
information instead).
The issue here is that, according to Fangs at least, the screenreader reads the label, then prompts for input, then reads the aria-describedby
text.
Can I move the text above the input in the code, e.g.
<label for="givenName">Given name</label>
<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
<input class="form-control" type="text" id="givenName" placeholder="Liam" aria-describedby="givenNameHelp">
Upvotes: 1
Views: 124
Reputation: 7254
Yes, this is perfectly legitimate and will work with all screen readers
Upvotes: 1