Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The wording that’s used for various parts of a site can become problematic for accessibility concerns, especially when you need to be very concerned about marketing. Having snappy catchphrases and eye catching headings can be great at drawing your readers in, but pose the danger of obscuring the meaning of the content they’re meant to illuminate.
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
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
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