Especially when you need to be very concerned about marketing.

The wording that's used for various parts of the site can become problematic for

accessibility concerns.

Having snappy catch phrases and

eye catching headings can be great at drawing your users in, but pose

the danger of obscuring the meaning of the content they're supposed to illuminate.

Think about anytime you thought an advertisement was sort of interesting but

were confused as to what the company actually did.

It caught your attention but probably didn't convince you to become a customer.

In this video we'll cover a few strategies to put an attractive and

informative face on your content.

Let's discuss links first.

Hypertext is essentially why we call it the web.

It links absolutely mind boggling amounts of information together.

Links, we can therefore deduce, are pretty important.

As a result,

link text needs to describe where the user will be taken once they activate the link.

The phrase, Click Here,

for example, is not helpful in determining whether someone should use a link.

Say the full sentence is, Click to fill out our puppy adoption form!

Rather than targeting the word click with an anchor element,

we could target puppy adoption form.

The same principle holds true for pop-ups.

In that case,

instead of describing where the user will be taken, describe what the button does.

This might be something like Download Download or Start Game.

Many people who use assistive technology use headings as a navigation tool.

They'll skip between them in order to determine which block of text to dig

deeper into.

If your headings aren't descriptive, as well as interesting,

your user might be confused or choose the wrong section and get frustrated.

Let's check out the website for Skeleton.

A simple CSS boilerplate that you might recognize.

Notice the text for all the headings is very concise and descriptive.

The first one after the navigation is, Is Skeleton right for you?

It's engaging while still effectively communicating

exactly what the following paragraph is about.

Further down the page are more headings that precisely described the content that

follows.

The grid, typography, buttons, forms, and so on,

might not sound very creative but they get the point across quickly and clearly.

We'll wrap up by labeling some form elements.

Forms can be tricky to build well, style beautifully and label correctly.

The project files for

this video are based on some sample markup on the Skeleton website.

Fell free to code along with me in Workspaces or

a text editor of your choice.

I've got two input boxes,

each with text explaining what information should be entered by the user.

Visually, they appear to be related.

But if we look at the code, there's no real connection between the text and

the context it describes.

Rather than just slapping text in there, we can wrap that text in label elements.

Now, if we want to leave the labels and inputs as siblings, we need to add the for

attribute to each label and match them up using the IDs for the inputs, like so.

Our label element is going to get the for attribute.

And the for

attribute's value will be equal to the ID of the input we're labeling.

So for my first label,

the four attribute is going to have a value of example email input.

Again, this should exactly match the ID of the input we're labeling.

We can also wrap the input itself in the label element.

This forgoes the need for the for attribute but

it will result in some visual differences on the page.

So, you'll want to remain consistent when you're choosing

which direction to go with.

Note that now when we click on the labels the relevant input element receives focus.