CODEWITHSUNDEEP
formsaccessibilitywcag
James
James

Reputation:

Can my aria-describedby be placed before the input element?

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: 2

Views: 579

Answers (1)

maia
maia

Reputation: 111

if you are already adding an HTML label to the input, you don't need to use ARIA attributes at all. You can safely remove the aria-describedby, and nest the span content. Example:

<label for="givenName">Given name
        <span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
</label>
<input class="form-control" type="text" id="givenName" placeholder="Liam">

Hope it helps! As a general rule..First try to make accessible content with standard HTML. Then, use ARIA to describe website sections, widgets and interactive behavior (like menues, tabs, pop ups, messages, dropdowns, calendars, etc), and also to describe what you could not do with HTML.

Upvotes: 1

Related Questions