Accessibility Presentation! and Walking the Talk

I made a presentation on Basics of Web Accessibility to give to the 70-some people currently studying at Hack Reactor Remote with me! You can look at the slides here: http://slides.com/madelinebernard/webaccessibility/#/

The presentation went well, and I hope I left people with some good thoughts about the wealth of different people out there who could use our things on the web, and how to build for those people.

The next day, coding away on a bit.ly clone, my pair and I came to the point where we had to build a login form, and I realized that since I had literally just given the talk, I would have to walk the walk... I say on the slides, "Labels: if you do them right, clicking the word will tick the box (or whatever)". There are two ways to do this right, and over last week and next I've used both of them. Here they are:

<label for="login">Type your handle here!</login>
<input id="login" type="text"></input>

<label>Type your handle here!<input type="text"></input></label>

In the first, you have an "id" attribute on the labelled element, and the label's "for" attribute points to it. In the second, the <label> and </label> tags wrap the input element. I like the first better, since I can then lay out my code however I like; but the second is still there, for cases where everything's all in one place and it won't be messy to nest the tags but it would be messy to have a bunch of attributes.

The result, though, where you wave your hand, vaguely clicking in the area, and you get the cursor focused in the box... That's what the web oughtta be!