Naming and describing form controls

Naming a form control

The basics

<label>Your question</label>
<textarea name="question"></textarea>

<label for="id-textarea">Your question</label>
<textarea id="id-textarea" name="question"></textarea>

A placeholder is not a label

 <textarea placeholder="Your question"></textarea>
 

aria-label on the textarea

 <textarea aria-label="Your question" name="question"></textarea>
 

Disadvantage: you don't have a visible label. But it does give the form control an accessible name.

A placeholder and aria-label

 <textarea aria-label="Your question" placeholder="Describe your question" name="question"></textarea>
 

Aria-labelledby

 <div id="id-aria-labelledby">Your question</div>
 <textarea aria-labelledby="id-aria-labelledby" name="question"></textarea>

Describing form controls

Aria-describedby

Is additional to the label text, and is useful to add extra information.

<label for="id-password">Your new password</label>
<input type="password" id="id-password" aria-describedby="id-aria-describedby" name="new-password">
<p id="id-aria-describedby">Please use a password of minimal 8 characters.</p>

Icons

	<label for="s">Search</label>
	<input type="text" id="s" name="s">
	<button class="fa fa-search"></button>

    <label for="s">Search</label>
    <input type="text" id="s" name="s">
    <button class="fa fa-search" aria-label="Submit search"></button>

    <label for="s">Search</label>
    <input type="text" id="s" name="s">
    <button aria-label="Submit search"><span class="fa fa-search"></span></button>