Start a free Courses trial
to watch this video
In this video, you'll learn how to make web forms more accessible. Web forms play a central role in almost every web app, so it's important to make sure they work properly for everyone.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[?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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up