[?mellow guitar music?] 0:00 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 0:03 Accessibility: Web Apps - Forms: Part 1 with Nick Pettit 0:07 Over the next several videos, 0:13 we're going to learn how to make web apps--versus websites--more accessible. 0:14 Most web apps feature lots of forms for users to fill out, 0:19 so we're going to spend some time focusing on forms first. 0:22 Forms are often the source of poor usability. 0:26 There's probably been many instances where you've tried to submit a form, 0:29 and you weren't able to figure it out. 0:33 So, as you can imagine, it's very easy for someone who relies on a screen reader 0:35 or a refreshable Braille display to get lost in a web form. 0:40 A form with good visual design will benefit sighted users, 0:44 but a form with good markup will benefit all users, 0:48 and that's what we're going to focus on. 0:53 So as you can see here, we just have a basic page. 0:55 There's nothing on there except a gradient background. 0:57 Switching over to my text editor, we have just some very basic markup here, 1:00 and just a little bit of CSS, but we're going to be focusing on the markup. 1:05 So first, I'm going to go ahead and create a form. 1:10 So we'll type out the <form> tag, and we don't want the action to lead anywhere, 1:14 and we'll use the "get" method and we'll go ahead and close that </form> tag. 1:20 First, we want to put in a <label> tag, 1:28 which I'll explain in just a minute here. 1:34 Then we're going to put an <input> tag with a couple of attributes here. 1:42 First is the id="first_name". 1:47 Next is type= which is "text", 1:50 then title= and we'll say "Type your first name." 1:55 And then the name of the form element, which is "first_name". 2:01 And when we switch back to our browser and refresh, 2:07 as you can see, we have some text and right next to our text is an input element. 2:11 So let's switch back to the code and go through each part. 2:18 First, I should mention that this form isn't actually submitting anywhere. 2:21 In a real web form, you'd have some server code or JavaScript code 2:26 ready to process the form after it's been submitted, 2:29 but that's not what we're interested in. 2:32 The important thing here in regards to accessibility 2:35 is the <label> tag, which you can see right here. 2:37 We added the text First Name next to our input element, 2:42 but we didn't use just any element to contain the text. 2:47 We could have used a div, a paragraph, a span, or something else, 2:50 but we used a label. 2:54 That's because a <label> tag is specific to forms, 2:56 and allows us to tell the browser or screen reader 2:59 what text is labeling which form element, 3:02 and in this case, this <label> tag is labeling this input. 3:05 Another thing to note is that this text is sequential. 3:10 A screen reader is going to read a website in the order of the markup, 3:14 not in the order that it's presented. 3:18 For text inputs, it's best practice to put your label elements 3:20 directly before your input element, like we have here. 3:25 A screen reader like JAWS will read this as "First name, edit, hypertext." 3:28 We'll talk more about sequence in a moment. 3:35 So switching back to the browser here--another nice thing you'll notice 3:38 about the <label> tag is that you can actually click on text, 3:41 and it will focus the form element, just like this. 3:46 So I'm clicking on the text and it's focusing onto the form element. 3:49 This is useful for users with milder vision impairments, 3:54 especially if you make the text and input much larger 3:57 because it makes for a much larger click area. 4:02 It's also helpful for users that might not be very familiar with computers, 4:04 as they may not know that you normally have to click the input box 4:09 in order to change the browser focus. 4:14 This way, clicking the label or the input works, 4:17 causing less confusion for everyone. 4:20 So while we're in the browser, I'd like you to also notice 4:23 that if I hover over this text input and leave my cursor there, 4:26 the title I gave the input will pop up. 4:30 If we switch back to the code, you can see that title attribute right there. 4:34 The title attribute can be used on just about any HTML element, 4:39 and in the case of forms, you should always try to include a <title> tag 4:45 on your input elements. 4:49 This is a great way to provide a small bit of instruction 4:51 for users that get stuck, and it helps make the form more usable for everyone. 4:54 Going back to the label, the way I've associated this label with the input element 4:59 is by using the "for" attribute on the <label> tag, 5:04 which you can see right here. 5:08 The id= attribute on the input is normally used 5:10 for selecting the element with CSS and JavaScript, 5:14 but it's also useful for the form itself. 5:17 By using the same value in the for= attribute and in the id= attribute, 5:20 we connect the label and the form element together. 5:26 The id= attribute shouldn't be confused with the name attribute. 5:29 The name attribute is again, used to identify this particular value 5:34 when the form is submitted to some JavaScript code or the server. 5:39 So let's try using labels with checkboxes. 5:44 So I'm just going to expand out this form here, 5:47 and I'm going to use a paragraph to label this part of the form 5:52 and I'm actually just going to put that in strong text, 5:57 and I'll say Select your favorite colors. 6:01 Right below that we're going to create an input with the id= of "red", 6:07 it's going to be of type="checkbox" 6:14 and we'll give it the title attribute "The color red" and we'll go ahead and capitalize that there-- 6:18 and we'll also give it the name= "red" and the value= checkbox. 6:27 Now, right after that, I'm going to put my <label> tag, 6:35 and I'll explain that in a second. 6:40 So we'll label that "Red" and we'll close the </label> tag. 6:44 Rather than sit here and type out 2 more checkboxes, 6:48 I'll just go ahead and copy and paste these from offscreen. 6:51 Now we have a red one, a green one, and a blue one. 6:57 So when we save that and switch back to the browser and refresh, 7:02 you can see that we now have 3 checkboxes here to select our favorite color. 7:06 In this case, we're putting the label after the input, 7:11 which you can see right here--the label comes second. 7:16 A screen reader will read this as "select your favorite colors" 7:21 red check box not checked, green check box not checked, blue check box not checked." 7:25 This is a very important difference to note 7:32 from normal text inputs. 7:34 Those are just a few of the things that we can do to make forms more accessible. 7:36 In the next video, we'll learn some additional tips. 7:40 [?mellow guitar music?] 7:43 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 7:46