Labeling Content

Especially when you need to be very concerned about marketing. 0:00 The wording that's used for various parts of the site can become problematic for 0:04 accessibility concerns. 0:08 Having snappy catch phrases and 0:10 eye catching headings can be great at drawing your users in, but pose 0:12 the danger of obscuring the meaning of the content they're supposed to illuminate. 0:17 Think about anytime you thought an advertisement was sort of interesting but 0:23 were confused as to what the company actually did. 0:27 It caught your attention but probably didn't convince you to become a customer. 0:30 In this video we'll cover a few strategies to put an attractive and 0:36 informative face on your content. 0:40 Let's discuss links first. 0:42 Hypertext is essentially why we call it the web. 0:45 It links absolutely mind boggling amounts of information together. 0:48 Links, we can therefore deduce, are pretty important. 0:53 As a result, 0:57 link text needs to describe where the user will be taken once they activate the link. 0:59 The phrase, Click Here, 1:04 for example, is not helpful in determining whether someone should use a link. 1:06 Say the full sentence is, Click to fill out our puppy adoption form! 1:11 Rather than targeting the word click with an anchor element, 1:16 we could target puppy adoption form. 1:19 The same principle holds true for pop-ups. 1:22 In that case, 1:25 instead of describing where the user will be taken, describe what the button does. 1:26 This might be something like Download Download or Start Game. 1:31 Many people who use assistive technology use headings as a navigation tool. 1:36 They'll skip between them in order to determine which block of text to dig 1:41 deeper into. 1:45 If your headings aren't descriptive, as well as interesting, 1:46 your user might be confused or choose the wrong section and get frustrated. 1:50 Let's check out the website for Skeleton. 1:54 A simple CSS boilerplate that you might recognize. 1:57 Notice the text for all the headings is very concise and descriptive. 2:01 The first one after the navigation is, Is Skeleton right for you? 2:06 It's engaging while still effectively communicating 2:10 exactly what the following paragraph is about. 2:13 Further down the page are more headings that precisely described the content that 2:16 follows. 2:20 The grid, typography, buttons, forms, and so on, 2:21 might not sound very creative but they get the point across quickly and clearly. 2:25 We'll wrap up by labeling some form elements. 2:32 Forms can be tricky to build well, style beautifully and label correctly. 2:35 The project files for 2:41 this video are based on some sample markup on the Skeleton website. 2:42 Fell free to code along with me in Workspaces or 2:46 a text editor of your choice. 2:48 I've got two input boxes, 2:50 each with text explaining what information should be entered by the user. 2:52 Visually, they appear to be related. 2:57 But if we look at the code, there's no real connection between the text and 2:59 the context it describes. 3:03 Rather than just slapping text in there, we can wrap that text in label elements. 3:06 Now, if we want to leave the labels and inputs as siblings, we need to add the for 3:22 attribute to each label and match them up using the IDs for the inputs, like so. 3:28 Our label element is going to get the for attribute. 3:35 And the for 3:39 attribute's value will be equal to the ID of the input we're labeling. 3:40 So for my first label, 3:46 the four attribute is going to have a value of example email input. 3:47 Again, this should exactly match the ID of the input we're labeling. 4:00 We can also wrap the input itself in the label element. 4:05 This forgoes the need for the for attribute but 4:09 it will result in some visual differences on the page. 4:12 So, you'll want to remain consistent when you're choosing 4:16 which direction to go with. 4:19 Note that now when we click on the labels the relevant input element receives focus. 4:23