Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Fall 2019

## Accessibility: Label Element

Labels are important for accessible forms.

label element lets us use markup to associate text with an input element.

Using `label` you can make the association between the text label and the form input explicit, and not just rely on the visual proximity.

### Labels - Why?

- Makes text labels associated wtih input elements explicit
- Helps with screen readers!
- Helps with "clicks" and touch screens!

### Labels - How

- id attribute for form input
- label element for input label
- for attribute in label to link label element with input via the value of id

Example 3.10 - Form Labels - Example 3.10 |
<form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><p>Do you like to watch NCAA basketball?</p><input type="radio" name="basketball" id="basketball_y" value="Y"/><label for="basketball_y">Yes</label><br/><input type="radio" name="basketball" id="basketball_n" value="N"/><label for="basketball_n">No</label><br/><input type="submit"/></form>

- Markup
- Display

    <form method="get" action="https://cscie12.dce.harvard.edu/echo">
    <p>Do you like to watch NCAA basketball?</p>

    <input type="radio" name="basketball" id="basketball_y" value="Y"/><label for="basketball_y">Yes</label><br/>
    <input type="radio" name="basketball" id="basketball_n" value="N"/><label for="basketball_n">No</label><br/>
    <input type="submit"/>
    </form>

Do you like to watch NCAA basketball?

Yes
No

Copyright © David Heitmeyer