IntroductionWelcome| 00:04 | Hello! My name is Morten Rand-Hendriksen
and welcome to Improving SEO Using
| | 00:08 | Accessibility Techniques.
| | 00:10 | Traditionally, accessibility meant
building websites that were accessible by
| | 00:14 | everyone, including people with
visual or other impairments, but with the
| | 00:19 | introduction of a whole new range
of devices, accessibility is now more
| | 00:22 | important than ever.
| | 00:24 | Building a website with accessibility
in mind improves the findability and
| | 00:28 | shareability of your website on search
engines and social networks, and in this
| | 00:33 | course, that's exactly what we'll do.
| | 00:35 | We'll start by working on the page
header to provide accurate and descriptive
| | 00:39 | information to browsers,
search engines, and social networks.
| | 00:43 | We'll look at proper markup when it
comes to links, images and, lists, and we'll
| | 00:49 | build accessible menus--
| | 00:50 | both single level menus and drop-down menus.
| | 00:54 | Accessibility and SEO can be a powerful duo.
| | 00:57 | It's time to harness that power.
| | 00:59 | So let's get started with Improving
SEO Using Accessibility Techniques.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a premium member of the lynda.com
Online Training Library or if you're
| | 00:05 | watching this tutorial on a DVD-ROM,
you have access to the Exercise Files used
| | 00:09 | throughout this title.
| | 00:11 | The Exercise Files for this
course consist of four main folders--
| | 00:15 | an Assets folder that contains
examples and core files and then folders
| | 00:19 | for Chapter 5, 6 and 7.
| | 00:24 | Inside the Assets folder, you'll
find a folder named Accessible.
| | 00:28 | Inside the Accessible folder, you'll
find a fully accessible version of the
| | 00:32 | example website along with the styles.
| | 00:35 | In the Inaccessible folder, you'll
find the starting point, the inaccessible
| | 00:40 | website along with styles, and if you go
to the Drop-down folder, you'll find an
| | 00:45 | example page with an accessible drop-down menu.
| | 00:48 | If you want this drop-down to work,
you need to add the Superfish JavaScript
| | 00:52 | libraries to this folder.
| | 00:54 | Instructions on how to do that can
be found commented out inside the
| | 00:58 | accessibleDropDown HTML file and I'll
also cover it in the movie in this course
| | 01:03 | on creating an accessible drop-down menu.
| | 01:07 | Finally, in the Assets folder,
we have the Starting Point folder.
| | 01:11 | These are the starting point files
we're going to work with from Chapter 5
| | 01:14 | onwards in this course.
| | 01:16 | You simply grab the folder, pull it onto
your Desktop, and then work from those files.
| | 01:21 | That brings us back to the Chapter files.
| | 01:24 | In the Chapter folders, you will
find further folders that relate to each
| | 01:28 | movie in that chapter and in those
folders, you'll find whatever files we
| | 01:33 | changed in the previous movie.
| | 01:35 | To get to the same point I am at any
time during the course, you simply grab
| | 01:39 | the files that are inside the movie
folder and pull them into your project
| | 01:44 | folder on your Desktop.
| | 01:46 | That way you will always be up-to-date.
| | 01:48 | If you're a monthly subscriber or an
annual subscriber to lynda.com, you
| | 01:52 | don't have access to the Exercise
Files, but you can follow along from
| | 01:55 | scratch with your own assets.
| | 01:57 | Let's get started.
| | Collapse this transcript |
|
|
1. Web Accessibility and SEO: Two Sides of the Same CoinAccessibility and SEO: A primer| 00:01 | If you have spent any amount of time
on the Internet or talking about the
| | 00:04 | Internet, you have run across the terms
Accessibility and SEO or search engine
| | 00:09 | optimization, and you probably have a
fairly good idea of what they are and why
| | 00:13 | they matter so much.
| | 00:14 | What I want to do in this course is
to kind of reframe your thinking and
| | 00:18 | perception around these topics and show
you that not only are Accessibility and
| | 00:23 | SEO not rocket science, but by
employing Accessibility and SEO techniques in
| | 00:29 | your normal work process, you will
create sites that are not only more
| | 00:32 | accessible and more user-friendly and
more findable, but sites that are easier
| | 00:38 | to manage for you as a web developer.
| | 00:41 | Before we get down to the nitty-gritty
code, let's take a brief look at what
| | 00:45 | Accessibility and SEO is all about and
why they matter, and more importantly,
| | 00:50 | why we put them together in this course.
| | 00:53 | If you think about it,
publishing content on the web is all about
| | 00:56 | communication, and accessibility and
search engine optimization are also all
| | 01:01 | about communication.
| | 01:03 | When you publish content to the web,
you want as many people as possible to be
| | 01:06 | able to find the content, access the
content, and understand the content.
| | 01:11 | That means not only do you need good
findability through search engines, but you
| | 01:17 | also need good accessibility, because
people can access your content through
| | 01:21 | many different devices.
| | 01:22 | If you think about it, when you
build a website, you generally think that
| | 01:26 | people are going to access your site
through a regular web browser, but the
| | 01:30 | reality is we now have a whole range
of different devices that people use to
| | 01:35 | access their website.
| | 01:36 | They can use a computer, they can use a
very small computer, they can use one of
| | 01:40 | the new tablets, a phone, a special
browser, a browser that reads the content
| | 01:45 | back to them, a phone that reads the
content back to them, or they may even use a
| | 01:49 | TV or gaming device.
| | 01:51 | I've seen my cousin surf the
Internet on a Nintendo gaming system.
| | 01:57 | The Internet was never designed to be
surfed with a Nintendo gaming system, but
| | 02:02 | because this is now an option,
you have to accommodate for it.
| | 02:06 | On that note, the notion that text only
or text-to-speech browsers are only for
| | 02:11 | the visually impaired is no longer accurate.
| | 02:14 | With the introduction of new
technologies and also with the way that Internet is
| | 02:18 | evolving, we no longer access
information on the Internet the way we used to,
| | 02:23 | which means when you build a website,
you now have to accommodate for people
| | 02:26 | accessing it in odd ways.
| | 02:28 | They can use a RssReader
to pull the contents out.
| | 02:31 | They can share your content on a
social site like Facebook or Google Plus. They
| | 02:36 | might be using a browser in a phone
that doesn't actually display the content
| | 02:40 | the normal way, or they might even
access your website through an E-reader or a
| | 02:44 | voice-controlled computer in their car.
| | 02:46 | Regardless of how your visitors access
your site, you need to accommodate them
| | 02:51 | by designing and developing your
content in such a way that regardless of the
| | 02:54 | device, they will be able to access
the content, navigate the content, and
| | 02:59 | understand the content.
| | 03:00 | So how does SEO fit into all this?
| | 03:02 | Well, the interesting thing is if
you develop your content to fit with
| | 03:07 | accessibility standards,
| | 03:09 | that content becomes easy
to read for search engines.
| | 03:13 | If you think about it, on the Internet,
regardless of the size of your site,
| | 03:17 | your biggest fans are search engines,
and search engines are essentially blind.
| | 03:23 | They can only see text
content that you put up on the web.
| | 03:25 | They don't understand images unless
you provide proper information about
| | 03:29 | them and they can only follow
links if they're properly marked up and
| | 03:33 | properly explained.
| | 03:35 | Therefore, by marking up your site
for accessibility, you're also accommodating
| | 03:40 | search engines in the process.
| | 03:42 | Another important point--when you mark
up your content, web standards matter
| | 03:46 | more now than they ever did before,
precisely because we are now dealing with so
| | 03:50 | many different devices that handle
content in so many different ways, and by
| | 03:55 | adding web standards into the equation,
you also make content that's easier to
| | 03:59 | digest for search engines and social networks.
| | 04:03 | Now, if you've ever dealt with
accessibility or SEO or both before, you are
| | 04:08 | probably left wondering, this stuff is
complicated or tedious, or it's kind of like alchemy.
| | 04:14 | You don't really know what you're
doing, and then sometimes it works and
| | 04:17 | sometimes it doesn't.
| | 04:18 | Well, the reality is neither
accessibility nor search engine optimization is
| | 04:22 | alchemy; it's more like common sense.
| | 04:25 | If you just mark up things properly
and you always think about what you are
| | 04:29 | communicating when you put it in, you
will end up with markup that makes sense
| | 04:33 | both for you, the person who is
visiting the site, and the search engines that
| | 04:37 | try to index that content.
| | 04:40 | Though it sounds cheesy, it's no less true.
| | 04:42 | Accessibility and SEO is not rocket
science, it's common sense and with a
| | 04:47 | commonsense approach to both, you
will end up with sites that are more
| | 04:50 | accessible, more findable, more
shareable, and easier to manage.
| | 04:54 | It's a win-win-win situation for everyone.
| | Collapse this transcript |
| Understanding the benefits of accessibility and SEO| 00:00 | When I bring up accessibility with web
developers, I often hear comments like,
| | 00:04 | "why bother?" or "that sounds tedious," and
when the conversation goes to SEO, the
| | 00:09 | consensus is generally that it's a
specialized science for the initiated few.
| | 00:14 | In both cases, the topics seem to be
less regarded as important additions than
| | 00:19 | annoying options or stuff other people can do.
| | 00:22 | What I say and what I want to
convince you of is that accessibility and SEO
| | 00:27 | should be at the top of your list
when you build websites, and here's why.
| | 00:31 | Accessible content means people
can access your info in new ways.
| | 00:35 | Think of having your phone read a
website back to you while you're jogging or
| | 00:39 | navigating a website while
driving your car, and you get the idea.
| | 00:42 | Voice commands and non-visual browsers
are becoming more mainstream, not just
| | 00:47 | the realm of the visually impaired.
| | 00:49 | We are also entering a brave new world of
devices that open for new possibilities.
| | 00:54 | Yes, the devices we currently have
interact with the web in much the same way
| | 00:58 | that our old desktops did, only the
interaction is different, because we are now
| | 01:02 | may be using our fingers to point at
things or we're talking to the devices.
| | 01:06 | But this is just a tip of the iceberg.
| | 01:08 | As we move forward in time, you'll see
more and more devices get introduced with
| | 01:13 | more interesting user interfaces, and
that means you need to build your sites to
| | 01:17 | prepare for this kind of interaction.
| | 01:19 | An interesting side benefit to building
sites with accessibility and SEO in mind
| | 01:25 | is that your content becomes
easier to read and understand.
| | 01:28 | When you write code with accessibility
in mind, you write markup that's easier
| | 01:32 | to parse for computers and when you
write content with SEO in mind, you write
| | 01:37 | content that's easier to parse for people.
| | 01:39 | As a result, you get pages that are
easier to understand for everyone.
| | 01:44 | Another benefit is that
accessibility forces you to follow web standards.
| | 01:48 | As a result, you get cleaner and more
semantic markup, which means, again, your
| | 01:53 | sites will validate, they will be
easier to understand for computers, and they
| | 01:57 | will be easier to push out on the Internet.
| | 02:00 | The whole point of search engine
optimization or SEO is to increase the
| | 02:05 | findability of your sites in search engines.
| | 02:07 | But what a lot of people don't know
is that if you write your content with
| | 02:12 | accessibility in mind, you also write
content with SEO in mind; they go hand in
| | 02:17 | hand because the more accessible your
content is, the easier time the search
| | 02:21 | engine has in understanding that content.
| | 02:24 | You also increase the
shareability on social networks.
| | 02:27 | By coding for accessibility, you make the
sites easier to parse for social networks.
| | 02:32 | So when people share links to your
sites on Facebook or Google Plus, or other
| | 02:37 | social networks, these sites can then
go in, pick up the information they need,
| | 02:41 | and display it in the preview windows,
so that when people see the links to your
| | 02:45 | site, they don't you see the link, but
they see a little piece of preview text
| | 02:49 | with a title and a
description and maybe even an image.
| | 02:52 | This is all thanks to the code you
put into the site and the more standards-
| | 02:56 | oriented and accessible your content is,
the easier it is for social networks to
| | 03:01 | share that content out, and you get new visitors.
| | 03:04 | More than making your sites accessible
to the visually impaired, accessibility
| | 03:08 | standards makes your sites accessible
in new ways for everyone and combined
| | 03:12 | with basic SEO techniques, your sites
will be easier to process, understand, and
| | 03:16 | share with the world.
| | Collapse this transcript |
|
|
2. Why Web Accessibility MattersExperiencing an inaccessible web site| 00:00 | To better understand why
accessibility exists in the first place,
| | 00:03 | let's take a look at a website that
was set up without accessibility in mind.
| | 00:07 | What you see in the browser is the
project we're going to be working with
| | 00:10 | throughout this course.
| | 00:11 | It's a standard website built without
accessibility in mind, but in a regular
| | 00:16 | visual browser it works just fine.
| | 00:18 | As you can see, when I navigate it,
the header is clickable, it's a link, the
| | 00:23 | links on the main menu highlight when I
hover over them, and I can scroll up and
| | 00:28 | down and see all the content.
| | 00:30 | That's all fine because I am using
a mouse and a regular visual browser.
| | 00:34 | But not everyone can do this.
| | 00:36 | For example, a lot of people can't
use a mouse to access the website.
| | 00:40 | There might be many reasons for this.
Either there is no mouse available or
| | 00:43 | there might not be a mouse or mouse type
input device connected to the computer.
| | 00:48 | They might be unable to use a mouse
because of a handicap, or there may be other
| | 00:52 | reasons why they can't use a mouse.
| | 00:54 | For those people the keyboard is
the natural way to access the site.
| | 00:59 | The problem is if you use the
keyboard to access this site, it's very hard
| | 01:03 | understand where you are and what
you're doing. I'll show you what I mean.
| | 01:06 | If I hit the Tab key, I should be
navigating from link to link to link, and I
| | 01:11 | can visit those links by hitting the enter key.
| | 01:13 | But when I hit the Tab key, although
I'm hitting separate links, I can't actually
| | 01:21 | see what links I am on.
| | 01:23 | Clearly, I am navigating through the site,
because you can see it moving, but at
| | 01:27 | any one time I don't know what link
I'm currently pointing at, and if I hit
| | 01:31 | Enter I don't know where I am going to end up.
| | 01:34 | This is a major problem, but it's
nothing compared to what this website is like
| | 01:39 | if you're blind and using
a text-to-speech browser.
| | 01:42 | So let's experience this website,
the inaccessible website, using
| | 01:46 | text-to-speech browser.
| | 01:48 | I've booted up my screen reader, and now I
am going to use it to simply read the screen.
| | 01:53 | I am going to cover screen readers later on
in this course; for now this is just a demo.
| | 01:58 | (Screen reader reading)
| | 02:19 | Getting the site read back to
you brings up a lot of issues.
| | 02:23 | First of all, you may have noticed that
this site doesn't seem to have a title.
| | 02:27 | In fact, the first thing that was read
out was Untitled 1, and you notice that
| | 02:32 | at no point did it say "hansel & petal" or
the subtitle "from our garden to your home."
| | 02:39 | In addition, you may have noticed that
there was no mention of a heading and the
| | 02:44 | image of this yellow plant
was never mentioned at all.
| | 02:47 | Now let's see what happens if I try to
navigate this page using the Tab keys.
| | 02:52 | I should be able to access each
individual link and get more information about
| | 02:55 | that link, so I know where I'm going.
| | 02:57 | (Screen reader: Untitled 1 document
link graphic inaccessible.)
| | 03:00 | So, I'm assuming that graphic
inaccessible must be the Home link at the top of
| | 03:05 | the page, because it's a huge graphic.
| | 03:07 | But clearly, that's not enough
information for me to know where I am supposed to
| | 03:11 | be going with this link,
but let's continue anyway.
| | 03:14 | (Screen reader: Navigation unmarked
list with eleven items. Home link.)
| | 03:17 | Home link.
| | 03:18 | (Screen reader: Flowers link.)
Flowers.
| | 03:20 | (Screen reader: Tips and Tricks link.)
| | 03:21 | Okay, so it's just reading
through the menu, that's fine.
| | 03:24 | (Screen reader: Garden Talk link.
About Us link. Contact link.)
| | 03:27 | Alright, so let's see the content itself.
| | 03:30 | (Screen reader: Out of list, complementary
unmarked Garden Talk, In the Coppice.)
(Complementary unmarked published on October
12, 2011 at 5:32 p.m. by Arthur O'Cooke.)
[00:03:40:48]
Okay, it's not clear to me where the
heading is here, but just listening to it--
| | 03:44 | (Screen reader: In the Coppice)
I would assume--
| | 03:46 | (Screen reader: Complementary unmarked Garden Talk)
It's either Garden Talk or--
| | 03:50 | (Screen reader: In the Coppice. Complementary unmarked
published on October 12, 2011 at 5:32 by Arthur O'Cooke.)
| | 03:58 | Okay, so let's continue
and see the actual content.
| | 04:01 | (Screen reader: Outside the front door of link
Willow Farm, complementary unmarked)
| | 04:04 | Whoa! Wait a second. The reader is reading back to me the
text, but the article starts with an
| | 04:09 | image. Where is the image?
| | 04:11 | (Screen reader: In the Coppice. Complementary published
on October 12, 2011 at 5:32 by Arthur O'Cooke.)
| | 04:18 | (Outside the front door of link Willow Farm is a broad
curving gravel drive, at the far end--)
| | 04:23 | So, clearly something went wrong here and the
reader can't see that there's an image at all.
| | 04:28 | That's unfortunate, but at least
we can read the content itself.
| | 04:32 | However, if we scroll down on the page, you'll
see that we have another set of links here.
| | 04:37 | You see these three images;
| | 04:39 | there is a pink flower, a
white flower, and a cactus.
| | 04:42 | Each of these three images points to
the Wikipedia article for that flower.
| | 04:47 | So let's see what happens when I get to
these images and if they tell me where I
| | 04:51 | land if I follow the link.
| | 04:53 | (Screen reader: List with three items: bougainvillea link,
chrysanthemum link, Golden Barrel Cactus link.)
| | 05:01 | So as you can see, the reader is
telling me there's a graphic, it has a link
| | 05:06 | around it, but it's not saying
anything about where that link is going.
| | 05:09 | For all I know, when I click on the
chrysanthemum link, I end up on a picture of chrysanthemum.
| | 05:15 | I never get told that this is
actually pointing to Wikipedia.
| | 05:18 | And that's kind of the
point of this whole exercise.
| | 05:21 | As you can tell, this page, although
it looks fine for the person who can see
| | 05:25 | all the content, is in fact
extremely inaccessible.
| | 05:28 | It's very hard to understand what's
going on, it's hard to follow the links and
| | 05:32 | it's hard to read the content itself.
| | 05:34 | This is a perfect example
of an inaccessible site.
| | 05:38 | This experience illustrates two things--
how the website is experienced for
| | 05:42 | someone using a text-to-speak browser,
and how the website is experienced by a
| | 05:46 | computer or other entity looking at only
the text content and not the styles of images.
| | 05:51 | That other entity might very well be Google.
| | 05:54 | And as you can see, if you ignore
accessibility, the experience can be quite
| | 05:58 | painful, but it doesn't have to be,
and that's what we are going to fix in
| | 06:02 | this course.
| | Collapse this transcript |
| Experiencing an accessible web site| 00:00 | In the previous movie, I showed you
what the inaccessible version of this
| | 00:03 | website was like for someone
with accessibility problems.
| | 00:07 | Now let's take a look at the end
result, where we've converted this page into
| | 00:11 | an accessible page.
| | 00:13 | As you can see, when we look
at the page, it looks the same.
| | 00:18 | There's no real visual difference.
| | 00:20 | However, when we start using
accessibility tools, you'll see a major difference.
| | 00:24 | First, I'll try navigating
this page with the keyboard.
| | 00:28 | So I'll hit the Tab key
to get to the first link.
| | 00:31 | You can see the whole header of this page
has now been highlighted, because it's a link.
| | 00:36 | I can now navigate to the next link, and
you see that each of the menu items is
| | 00:41 | highlighted, and as I continue down the
page, you will see that each item that's
| | 00:47 | linked is being highlighted by the browser.
| | 00:50 | So it's very clear to me where I am on
the page and what link I am going to be
| | 00:54 | following if I hit Enter.
| | 00:57 | That's the visual experience of the site.
| | 00:59 | What happens when we run this
site using the screen reader?
| | 01:03 | I've booted up my screen reader software
one more time and now I'll run the page
| | 01:07 | again using that screen reader software.
| | 01:10 | (Screen reader dialogue)
| | 01:44 | I think that's all we need to hear.
| | 01:46 | If you watched the previous movie, you
know there are some major differences
| | 01:49 | between this page and the inaccessible one.
| | 01:52 | To start off, this page actually has a
title, Hansel & Petal Flower Company, and
| | 01:57 | when we got to the header, not only did
it read out Hansel & Petal, it also read
| | 02:01 | out "from our garden to your home."
| | 02:03 | And then it came to something we can't see.
| | 02:05 | It gave us a menu title
and said skip to content.
| | 02:10 | This is a hidden link that's put there
only for people who use screen readers,
| | 02:14 | because they might not want to
listen to a menu being read out to them.
| | 02:18 | Let me start again from the very top, using
the Tab key and navigate my way down the page.
| | 02:23 | (Screen reader: Hansel and Petal Flower Company document.
Heading level 1 visited link Hansel and Petal Flower Company.)
| | 02:29 | Okay, so that's the header
pointing to the Home page.
| | 02:33 | (Screen reader: Navigation unmarked.
Skip to content visited link.)
| | 02:37 | Skip to content, okay, I'll get back
to that in a second, but let me continue
| | 02:41 | down my navigation path.
| | 02:42 | (Screen reader: List with eleven items. Home
visited link Hansel and Petal Flower Company homepage.)
| | 02:48 | You notice that each of these menu
items now has further description of where
| | 02:52 | you go you when you visit the menu item.
| | 02:54 | (Screen reader: Flowers visited link, flowers carried
by Hansel and Petal Flower Company.)
| | 02:58 | (Tips and Tricks visited link, tips and
tricks from the Hansel and Petal Flower Company.)
| | 03:04 | What I have done here is added some
extra information to each of the menu items
| | 03:08 | so you know where you are
going when you follow those links.
| | 03:11 | But let me navigate back to that Skip Link
button and see what happens when we get to it.
| | 03:17 | (Screen reader: Flowers, home visited,
out of list, skip to content visited link.)
| | 03:21 | Skip to content visited link. Let's see what
happens when I hit that link, so I'll hit Return.
| | 03:26 | (Screen reader: Heading level 1 main article, Garden Talk,
heading level 1, In the Coppice, published on
| | 03:30 | (October 12, 2011 at 5:32 by Arthur O'Cooke. Graphic, yellow
pansy in a pot. Outside the front door of the--.)
| | 03:37 | As you can see, the skip to content
link literally skips me down to the content
| | 03:42 | of the page, meaning that the person
visiting this site using a text-to-speech
| | 03:46 | browser doesn't have to read the menu.
| | 03:49 | You also notice that the browser now
read out information about the image that
| | 03:53 | was ignored in the previous one. That's
really important because I've now added
| | 03:57 | information about the image
for people who can't see it.
| | 04:00 | Now let's look at what happened to
those three images further down on the page.
| | 04:04 | You will remember, on the bottom of
the page here, we have three images that
| | 04:08 | each points to a Wikipedia
article about the flower in the image.
| | 04:12 | In the inaccessible version of this page,
you were told that each of the images
| | 04:16 | was linking somewhere, but you were
not told where they were linking to.
| | 04:20 | I used the Tab key to
navigate to these three images.
| | 04:23 | So let's see what they read out.
| | 04:24 | (Screen reader: List with three items: Bougainvillea Pink,
graphic link Bougainvillea Pink at wikipedia.org.)
| | 04:30 | (Chrysanthemum graphic link, chrysanthemum at wikipedia.org.)
| | 04:34 | So now it's telling me
chrysanthemum link chrysanthemum at wikipedia.org.
| | 04:39 | Now it's very clear where
these links are pointing.
| | 04:42 | This is very much the point
of making accessible websites.
| | 04:46 | You provide extra information that
can't be seen but that can be heard or
| | 04:50 | it can be read by search engines
and other people who access this site
| | 04:54 | without seeing the images.
| | 04:55 | That way you are providing extra
information and make it easier for the person
| | 04:59 | visiting the site to understand the
content there, being able to make an
| | 05:03 | educated decision about whether or not
they should be following a link or just
| | 05:06 | continuing down the page and reading on.
| | 05:08 | It may seem subtle, but by applying
simple accessibility standards to your
| | 05:12 | code, you make the web experience for
a person with visual impairments and
| | 05:16 | people or entities visiting your
site through nonvisual means much more
| | 05:20 | pleasant and understandable.
| | Collapse this transcript |
|
|
3. Accessibility Tools for Web DevelopersEvaluating screen readers for Windows and Mac| 00:00 | If you want to experience the websites
you build as a blind person using a
| | 00:04 | screen reader would experience them,
| | 00:06 | it's a good idea to get a screen reader
and install it on your computer so that
| | 00:10 | you can run your website through the
screen reader and see, or rather hear, what
| | 00:15 | the experience is like.
| | 00:16 | You don't have to install a screen
reader and there is a way you can pretend to
| | 00:20 | be a screen reader yourself and kind
of bypass that whole process, but if you
| | 00:25 | want to get a screen reader for
your computer, here are some options.
| | 00:28 | If you're on a Windows computer, you
have two main options. You can either get
| | 00:33 | the NVDA Screen Reader Software--that's
free and open source, and you can install
| | 00:38 | it on your computer--or you can get the
professional grade JAWS Screen Reading
| | 00:43 | Software from Freedom Scientific.
| | 00:45 | Both of these are used heavily by
both blind and hard of seeing people and
| | 00:49 | they have support for both text-to-
speech and also Braille displays, so they
| | 00:53 | can display the content in an active Braille
display so it can be read with your fingers.
| | 00:59 | To give you an idea of what it's like
to use one of those screen reading tools
| | 01:03 | on your computer, I'll start up NVDA on this PC.
| | 01:07 | Now keep in mind, using a screen reader
is tricky, especially for sighted users,
| | 01:11 | because they operate very
differently from what we're used to.
| | 01:18 | When I boot up NVDA on my computer, my
computer will start reading back to me
| | 01:22 | all the content on my computer, and
you'll see what I mean when I say it's quite
| | 01:26 | a jarring experience.
| | 01:28 | (beep)
(Screen reader dialogue)
| | 01:39 | That was NVDA just booting up and as
you can tell, when it started, it first
| | 01:44 | opened a regular dialogue that I closed,
and then it just started reading what
| | 01:48 | was on the first page I visited.
| | 01:50 | If you think about it, that
actually makes a lot of sense, because as a
| | 01:54 | sighted person, when you close the dialog, you
immediately see where you're at on the computer.
| | 01:58 | So a person who can't see needs
to get that read back to them.
| | 02:03 | The way I stopped it was to simply
click somewhere inside the page, but now I
| | 02:07 | want the page to be read back to me. And
I want it to start from the very top, so
| | 02:11 | I'll just reload the page and
it'll start from the very top.
| | 02:14 | (NVDA screen reader dialogue)
And from here I can now tab through the page, follow links, and do
| | 02:21 | everything else I want to.
| | 02:29 | (NVDA screen reader dialogue)
| | 02:35 | I stop that again with my mouse.
| | 02:38 | Using a screen reader is an acquired
skill, and to learn it you need to
| | 02:42 | read the documentation.
| | 02:43 | Like I said, this is something you'll want
to use if you really want to know what
| | 02:47 | the website experience is like
for a person who can't see it.
| | 02:51 | Otherwise, there are other ways of
doing it by simply reading the content back.
| | 02:55 | If you're using a screen reader for
testing purposes, you have to remember that
| | 02:59 | a screen reader will
read everything back to you.
| | 03:01 | So, if you're used to using your mouse,
you should really leave the mouse alone
| | 03:05 | while you're using the screen reader,
because when you move the mouse around,
| | 03:08 | it'll start to read back
everything you're pointing at.
| | 03:11 | (NVDA screen reader dialogue)
| | 03:17 | So when I move my mouse around,
you'll notice that it keeps reading back
| | 03:21 | everything I point at, and it can be
kind of confusing and it very quickly
| | 03:25 | becomes annoying if you're not used to it.
So I'll show you how to turn it off as well.
| | 03:29 | First I'll just make it talk,
so I'll touch something.
| | 03:32 | (NVDA screen reader dialogue)
| | 03:37 | And now I want to turn it off,
so I'll go down to my taskbar.
| | 03:40 | (NVDA screen reader dialogue)
| | 03:51 | And now as you can see, I used the
active applications, right-clicked on the
| | 03:56 | NVDA logo, selected Exit, and
then just closed the application.
| | 04:02 | If you're on a Mac, you'll find a
screen reader application built into
| | 04:05 | the operating system. To activate it,
go to the Apple icon, select System
| | 04:11 | Preferences > Universal Access, and here
under the Seeing tab you'll find VoiceOver.
| | 04:19 | This is an application that will read
back everything on the screen to you just
| | 04:22 | like NVDA and the other
applications for windows.
| | 04:27 | So I'll turn VoiceOver On.
| | 04:30 | (VoiceOver: Welcome to VoiceOver. VoiceOver speaks
descriptions of items on the screen and can be used to control)
| | 04:35 | (the computer using only your keyboard.)
| | 04:38 | (If you already know how to use
VoiceOver, press the V key now.)
| | 04:43 | (If you want to learn how to use
VoiceOver, press the Spacebar now.)
| | 04:48 | If this is the first time you are using
VoiceOver or you've never used VoiceOver
| | 04:52 | with a web browser before, I suggest
you click on the Learn VoiceOver button,
| | 04:56 | and go through the tutorial to
learn how this application works.
| | 05:00 | Once activated, it'll read
back everything on your page.
| | 05:04 | (VoiceOver: VoiceOver on System
Preferences Universal Access window toolbar.)
| | 05:08 | And to turn it off again, you
have to go back to Universal Access--
| | 05:12 | (VoiceOver: You're currently on a toolbar.)
| | 05:14 | (To interact with the items on this
toolbar, press Ctrl+Option+Shift+Down Arrow.)
| | 05:18 | --and click VoiceOver Off.
| | 05:20 | You can also use a keyboard combination
to turn VoiceOver On and Off. You see it
| | 05:24 | right here; it's Command+F5. It'll
turn VoiceOver On and Off at all times
| | 05:29 | wherever you are at.
| | 05:30 | So if you're in the web application
and you want to go somewhere else and you
| | 05:34 | don't want to hear VoiceOver read it
back to you, you hit Command+F5 and it'll
| | 05:38 | close the application down for you.
| | 05:40 | Using a screen reader can be a bit of a
confusing experience the first time, but
| | 05:44 | once to get used to it you'll discover
a whole new way of accessing content on
| | 05:48 | the web and on your computer.
| | 05:50 | More importantly, you get a very clear
idea of why it is so important to make
| | 05:54 | your content accessible.
| | Collapse this transcript |
| Installing browser development tools| 00:00 | When building websites, it's
important to have the right tools handy and
| | 00:04 | know how to use them.
| | 00:05 | For the grunt work of the building
process, the standard developer tools found
| | 00:09 | in all modern web browsers will do just
fine, but when it comes to accessibility
| | 00:13 | and SEO, it could be good
to have some extra help.
| | 00:16 | There are some great developer tools
available for some web browsers that can
| | 00:20 | be used to assist in accessibility testing, so
before we go any further, let's install them.
| | 00:25 | In this course I'll be using Firefox
as my main browser, because I've found that
| | 00:29 | this browser and its available tools
work the best for this particular process.
| | 00:33 | Several of the modern browsers, in
particular Firefox and Chrome, have the
| | 00:37 | ability to add on Add-ons or plug-ins.
| | 00:40 | For Firefox, you find Add-ons by going to
addons.mozilla.org, and this is where we'll start.
| | 00:47 | For accessibility testing, I want to
install two tools, one that's called the
| | 00:51 | Developer Toolbar, and one that's called Firebug.
| | 00:54 | To install them I open Firefox, I go to
addons.mozilla.org, and from here, I can
| | 01:01 | search for the tools I want.
| | 01:03 | First, I'm going to install the Web
Developer toolbar, so I'll simply search for
| | 01:07 | Web Developer, and it'll appear here at the top.
| | 01:12 | To install it, I simply have to click this
big green button that says Add to Firefox.
| | 01:16 | Now, just a note, if you like this tool,
I suggest that you give some money to
| | 01:21 | the guy that built it, because this is
done for free, it's an open-source tool.
| | 01:25 | So if you want to contribute to the
developer, you simply click the Contribute
| | 01:28 | button down here and you can give him a
donation for his work, but in this case
| | 01:33 | we want to just install it,
so I'll click Add to Firefox.
| | 01:37 | The tool is downloaded, and then I get
the question if I want to install it into
| | 01:41 | Firefox, so I'll simply click Install
Now, and then the tool gets installed.
| | 01:46 | Now because this is a tool that plugs
into Firefox as a program, I need to
| | 01:51 | restart the browser to see it take
effect. So I'll click Restart Now. The
| | 01:57 | browser shuts down and opens up again,
and now I have a new toolbar inside
| | 02:02 | Firefox. This is what I just
installed, the Web Developer toolbar.
| | 02:06 | The reason why I installed this
toolbar is because now I have the ability to
| | 02:10 | turn things on and off.
| | 02:11 | For instance, I can go in here under
CSS and say Disable All Styles, and I see
| | 02:17 | the page without any styles.
| | 02:21 | I'll turn it back on again, and
then I can do the same for images.
| | 02:24 | I can disable all images and then I see
what the page would look like with no images.
| | 02:31 | This becomes important as we start
working with the accessibility tools because
| | 02:36 | we want to see what the page looks
like without images, without styles, and
| | 02:40 | without other content.
| | 02:41 | The next tool I want to
install is called Firebug.
| | 02:44 | So I'll go back to addons.mozilla.org
and search for Firebug.
| | 02:55 | Just like with the Web Developer tools,
I'll simply click the Add to Firefox
| | 02:59 | button, and once it's
downloaded, I can install it.
| | 03:08 | Again, I have to restart my browser to
make it take effect. And with Firebug
| | 03:18 | installed, you see I now have a new
button up here in the right corner with
| | 03:21 | a little bug on it.
| | 03:22 | If I click on that button, I
launch Firebug down at the bottom here.
| | 03:27 | Now if you're familiar with the Chrome
Developer tools, you'll notice that the
| | 03:31 | Firebug tools are pretty much the same
thing. You see the HTML output on the
| | 03:35 | left and you see the CSS that
affects that output on the right.
| | 03:40 | With the Web Developer toolbar and
Firebug installed, we now have the ability
| | 03:44 | to do deep down testing of our code
and view the page in different formats as
| | 03:49 | we move forward with our pages, to make
sure that all our code content makes
| | 03:54 | sense, even if people see it without CSS
activated, without images activated, and so on.
| | 04:01 | As a bonus, these two tools make
Firefox a very powerful code development
| | 04:06 | and debugging tool.
| | Collapse this transcript |
| Pretending to be a screen reader| 00:00 | After playing around with a screen
reader, you may find it to be too cumbersome
| | 00:03 | or confusing to use, or you may just not
like listening to a computerized voice.
| | 00:09 | If that's the case, you can get a
custom screen reader experience with a voice
| | 00:12 | you're very familiar with, your own.
| | 00:14 | I find that pretending to be a screen
reader can be very useful when building a site.
| | 00:19 | It's quicker and easier than using an
actual screen reader and it makes me
| | 00:23 | aware of what I'm doing.
| | 00:24 | It may sound silly, but it works. Let
me show you how I do it and why you might
| | 00:29 | think me crazy if you ever
saw me working on a site.
| | 00:32 | Let's pretend to be a screen reader
and look at both the fully accessible and
| | 00:36 | the inaccessible version of our site.
| | 00:38 | I'll open the inaccessible one first.
| | 00:40 | I'll go to my Exercise files and
under the Assets folder, I'll open the
| | 00:45 | Inaccessible page in Firefox.
| | 00:47 | Now that we've installed the Web
Developer toolbar and also Firebug, we can now
| | 00:53 | see this site as a screen reader would
see it. That means a page with only text,
| | 00:58 | no image, and no styles.
| | 01:00 | The first thing I'm going to do is turn
off the styles, so I'll go to CSS on my
| | 01:05 | Toolbar, and go Disable All Styles.
| | 01:09 | This gives me the page with no
styles, but I can still see the images.
| | 01:13 | So now I want to turn the
images off, and here's the catch.
| | 01:16 | If you're working on the site that's
live on the web, you can simply go to
| | 01:20 | images and select Disable Images and
All Images, but for whatever reason, this
| | 01:25 | doesn't work if you're using a
site that's local on your computer.
| | 01:29 | In fact, if I click on All Images,
everything jumps back to where it was
| | 01:33 | before, and I have to go and Deactivate,
Deactivate All Images again, to get back to normal.
| | 01:39 | So what I'm going to do is first
disable the CSS, Disables All Styles, and
| | 01:45 | then I'll go and change the code on the
fly, using Firebug, so that I can turn
| | 01:49 | off images as well.
| | 01:50 | So I'll go activate Firebug
up here in the right corner.
| | 01:53 | So I'll right-click on the image I
want to disappear and select Inspect
| | 01:58 | Element at the very bottom of the
contextual menu, and this brings me to the
| | 02:02 | HTML that calls that image.
| | 02:04 | From here I can simply go in and
delete the URL to the image, and you see the
| | 02:09 | images disappear. I'll do the same for
the next four images. I'll scroll down,
| | 02:14 | right-click the image, Inspect Element,
find the source link, just delete it,
| | 02:21 | scroll down again, do the same
process for all three images.
| | 02:29 | This seems cumbersome, and to be honest,
it is. But this is the easiest way of
| | 02:34 | doing it, and you'll see why
I'm doing this in a second.
| | 02:39 | So now I've made live changes to this
page, which means I didn't change my file;
| | 02:45 | I just changed the file as the
browser sees it. And now I see the page as a
| | 02:50 | screen reader would see it.
| | 02:51 | That means I'm only seeing the
text of the page and nothing else.
| | 02:54 | Now you notice something very important.
| | 02:56 | At the top here, we no longer have a
title for our site. And if you look at the
| | 03:00 | very top on the tab, you'll see that
this page is actually called Untitled 1.
| | 03:05 | So if a screen reader were to see the
site, as we saw previously, it has no
| | 03:09 | title to read. That's because
the header was just an image.
| | 03:12 | If we scroll down, you see that all the
information about the images are also gone.
| | 03:17 | So we have no image here anymore; we
just have text. And when you get to the
| | 03:22 | list of three images, you'll see we
only have list items that are empty.
| | 03:25 | So if I were to pretend to be a screen reader now,
I would just start at the top and read down.
| | 03:31 | So I would go, Home. I hover my mouse over it, and
I see there's no title. Okay, so it's just Home.
| | 03:37 | So I'll read Home, Flowers, Tips &
Tricks, Garden Talk, About Us, Contact.
| | 03:45 | Garden Talk, In the Coppice, and then so on.
And I just read the content all the way down.
| | 03:50 | Now let's take a look at the accessible
site and see what's different. So I'll
| | 03:55 | go back to my folder. Under Assets,
find Accessible, and open that in Firefox.
| | 04:01 | And here I'll do the exact same
process as with the other page.
| | 04:05 | I'll go to CSS > Disable All Styles, and
then I'll go down, find the images, Inspect
| | 04:12 | Element, and delete the links.
| | 04:15 | Now you see there is a dramatic
difference between the two pages.
| | 04:39 | Whereas the Inaccessible one, when we
read it, we started with Home and we just
| | 04:45 | read it straight down.
| | 04:47 | With the Accessible one, we have the
title, and we have more information. So
| | 04:50 | when we pretend to be a screen reader
again, we'll go, link, Hansel & Petal
| | 04:55 | Flower Company. Hover over it and it says,
Hansel & Petal Flower Company home page.
| | 05:00 | It will read, From our garden to your
home, Main Menu, link Skip to content,
| | 05:07 | link Home, Hansel & Petal Flower
Company home page, link Flowers, Flowers
| | 05:13 | carried by Hansel & Petal Flower
Company, link Tips & Tricks, Tips and Tricks
| | 05:18 | from the hands of Hansel &
Petal Flower Company and so on.
| | 05:21 | More importantly, when we scroll down
you'll see that where previously we had an image,
| | 05:26 | we now have the
description of an image right here.
| | 05:29 | So here it would say, Published on
October 12, 2011 at 5:32pm by Arthur O'Cooke,
| | 05:35 | image Yellow Pansy in a pot.
| | 05:38 | You could go further and literally
read down the entire page. You see there are
| | 05:41 | headings that are outlined. They are
also outlined differently, so that the
| | 05:45 | Heading 2 is bigger than Heading 3 and so
on, and you literally read everything out.
| | 05:50 | So you read out a paragraph and then
you say, Heading 2, and then you read the
| | 05:54 | Heading, which in this case is just
Heading 2. And you go on like that all the
| | 05:58 | way down to the end of the page, and as
you hit a link you hover your mouse over
| | 06:01 | it to see the title of that
link, and you also read that out.
| | 06:05 | That way you get the full screen
reader experience without actually running a
| | 06:09 | screen reader in the process.
| | 06:11 | Now you know how to pretend to be a
screen reader, and as you saw, it's literally
| | 06:15 | a matter of just reading everything
out loud. And through that you get a good
| | 06:19 | idea of what your markup
should look like if it's done right.
| | Collapse this transcript |
|
|
4. Understanding How a Search Engine Sees a Web SiteInstalling SEO tools| 00:00 | Search engines and most social networks
don't read web pages the way you and I do.
| | 00:05 | Instead, they index your pages based
on only small portions of the page, and
| | 00:11 | those portions are invisible to you
unless you use a tool to see them.
| | 00:14 | So because we want to improve our SEO
through accessibility techniques, we need
| | 00:19 | to install one more Add-on, this one
to reveal the hidden SEO info on a page.
| | 00:24 | If you're using Firefox, you can
actually kind of reveal some of this
| | 00:28 | information without installing anything.
| | 00:30 | If you go to any page, for instance,
my blog Design is Philosophy and you
| | 00:35 | right-click anywhere on that page,
you find this option View Page Info in
| | 00:39 | the contextual menu.
| | 00:41 | When you click that, Firefox tells you
information about what it sees of this page.
| | 00:47 | As you can see, it gives me the title of
the page, it gives me the web address,
| | 00:51 | what kind of text it is, what kind of
encoding it is to size and so on, but down
| | 00:55 | here, it also shows you the meta-tags.
| | 00:58 | You see I have a description for the
page: WordPress tutorials, web design,
| | 01:01 | HTML, CSS and other stuff. And I have keywords.
| | 01:05 | This is what the search engine sees, but it also sees
other content that we don't really see,
| | 01:10 | and we need to add a tool that will
display all that information for us.
| | 01:16 | Let's go back to the addons.mozilla.org
page and add a new Add-on, this one is
| | 01:22 | called SenSEO, so S-e-n-S-E-O.
| | 01:30 | Before I install it, if you have not
installed Firebug yet, if you do this
| | 01:35 | installation, it will automatically
bring you to the page to install Firebug
| | 01:39 | because SenSEO plugs into Firebug.
| | 01:42 | But, as you can see in my browser up
here, I've installed Firebug already, so
| | 01:47 | I'll just install SenSEO.
| | 01:53 | The Add-on is downloaded, and once
it's downloaded, I'm asked if I want to
| | 01:56 | install it. I'll say, Install Now,
and I get asked if I want to restart my
| | 02:01 | browser. This happens every time
you install an Add-on in Firefox.
| | 02:04 | So I will restart the browser. Now we
have SenSEO installed and I can go back
| | 02:10 | to my blog, activate Firebug, and
here you see I have a new panel called
| | 02:16 | SenSEO, where I can show
components. And here you see all that
| | 02:21 | meta-information, plus more information.
| | 02:24 | So now, using SenSEO, I can
unveil what the search engine sees.
| | Collapse this transcript |
| Understanding how search engines search a page| 00:00 | Search Engine Optimization, or SEO for
short, can be a bit of a head-scratcher,
| | 00:05 | especially if you're just starting out.
| | 00:07 | It's often difficult to figure out
exactly how these search engines work and how
| | 00:11 | they get their information, so let me
give you a very short primer to give you
| | 00:15 | at least an idea of where this
index information comes from.
| | 00:18 | I have Google open in my browser and
if I go and search for lynda.com, the
| | 00:24 | search engine gives me a response.
| | 00:26 | In this case, it says here, "lynda.com
Software training and tutorial video library."
| | 00:32 | "Our online courses help
you learn critical skills."
| | 00:34 | "Free access & previews
on hundreds of tutorials."
| | 00:37 | If we go to lynda.com though, you'll
see that that text doesn't appear on the
| | 00:42 | page, so where is it coming from?
| | 00:44 | Well, the text is hidden
in meta-content of the page.
| | 00:48 | So if we activate Firebug and go down
to SenSEO, and click Show Components,
| | 00:55 | you'll see that the title is Software
training online tutorials for Adobe,
| | 01:00 | Microsoft, and Apple & more.
| | 01:01 | And then Meta-Description here, the
second line, says, Software training &
| | 01:05 | tutorial video library.
| | 01:07 | Our online courses, etcetera, etcetera.
| | 01:09 | So you see the Meta-Description matches
what Google is displaying here as the description,
| | 01:18 | but the Meta-Description
does not display in the page itself.
| | 01:21 | That means search engines grab content
that's put into the page and display it
| | 01:26 | in their index. But it goes a step
further than that, because now everyone is
| | 01:30 | using these social networks
like Facebook, Google+, and so on.
| | 01:34 | And these social networks have become
very advanced in how they share information.
| | 01:38 | So let's take a look at Facebook,
so you see what I'm talking about.
| | 01:41 | Let's say I want to share the
link to lynda.com in Facebook.
| | 01:45 | I go to my Update status function and punch
in the URL, www.lynda.com, and hit space.
| | 01:53 | Now Facebook goes to lynda.com and
picks up information like a thumbnail, a
| | 01:59 | title, and description and
displays it in a preview for me.
| | 02:03 | This is what's I'm going to
be shared with all my friends.
| | 02:05 | And as you can see, this information
matches what Google was displaying, so when
| | 02:10 | you're thinking about SEO, you're no
longer just thinking about search engines,
| | 02:14 | you're also thinking about social networks.
| | 02:17 | And the reality is more people find
your content on social networks now than
| | 02:21 | they do on search engines.
| | 02:23 | And more importantly, when people
share your pages on social networks, you
| | 02:27 | control what they see in
the preview of your page.
| | 02:31 | So Search Engine Optimization is no
longer just Search Engine Optimization. It's
| | 02:36 | become Search Engine and
Social Network Optimization.
| | 02:40 | And as you can see, with the right
code you can control your message.
| | Collapse this transcript |
| Comparing sites that are SEO-friendly with ones that are SEO-unfriendly| 00:00 | When I started developing this course,
I put Search Engine Optimization and
| | 00:04 | accessibility techniques together, and
this might seem like an odd mix until
| | 00:09 | you realize what's going on behind the scenes.
| | 00:12 | Because if you apply accessibility
techniques to your website, you automatically
| | 00:17 | also get better Search Engine Optimization.
| | 00:20 | Now that we have tools that can help us
see the search engine optimized content
| | 00:24 | in our pages, let's take a look at the
inaccessible site and the accessible site
| | 00:29 | in Firefox and see how they appear
differently for the search engine.
| | 00:33 | So I'll go to my Exercise Files, and
under Assets I'll open the Inaccessible
| | 00:39 | site first, and then I'll
open the accessible site.
| | 00:46 | And I'll pull the accessible site out,
so I get two browser windows, because
| | 00:50 | then I can put them side-by-side.
| | 00:52 | So now I'll activate Firebug on each of
them, go to SenSEO, and click Show Components.
| | 01:02 | I only want to see the components
here, so I'll pull it all the way up,
| | 01:05 | SenSEO > Show Components. And when you
look at these side-by-side, you notice
| | 01:11 | there are some very substantial
differences between the inaccessible site and
| | 01:17 | the accessible site.
| | 01:18 | You see that while the inaccessible
site has no Title, no Meta-Description, no
| | 01:23 | Keywords, and the rest of
the information is very sparse,
| | 01:27 | the accessible site has both a Title, a full
Description, Keywords, and way more information.
| | 01:34 | You see here, for instance, there
is a long list of the headlines.
| | 01:36 | These are all the headlines in the page itself.
| | 01:39 | If we scroll down, you see there is a
list of the images with the alternate
| | 01:43 | description for the images and there's
also other information about the content,
| | 01:47 | whereas, in the inaccessible
site we have no such information.
| | 01:51 | All the search engine sees is that the
page is called Untitled 1 and that there
| | 01:57 | is some text content in it.
| | 01:58 | It's important to note that the only
difference between the inaccessible site
| | 02:03 | and the accessible site is that the
accessible site has the same content with
| | 02:08 | all the accessibility
techniques from this course applied.
| | 02:11 | And as you can see, by applying these
accessibility techniques you automatically
| | 02:16 | improve the SEO of the same page.
That's why they go together, and that's why
| | 02:21 | you should apply these
techniques when you build your web pages.
| | Collapse this transcript |
|
|
5. Making Accessible and SEO-Friendly TextDefining a language for a page| 00:00 | When humans communicate, they use language,
like right now I'm speaking to you in English.
| | 00:05 | I could speak to you in the Norwegian.
(Norwegian dialogue)
| | 00:12 | Things are no different
when it comes to the Web.
| | 00:13 | When we publish content to the web and
people read it, they quickly recognize
| | 00:18 | the language it was written in.
| | 00:20 | But computers aren't always that smart.
| | 00:22 | To help them, we can add a piece of
code in the header of our pages that tells
| | 00:27 | the browsers and search engines what
language the content is written in. This
| | 00:32 | has some surprising benefits.
| | 00:34 | What we want to do is tell the browser
and the search engines what language the
| | 00:38 | content is written in.
| | 00:40 | Now when I say language, I mean the language
the content is written in, not the code language.
| | 00:45 | The accessibility benefit of this is twofold.
| | 00:48 | First of all browsers can detect the
language and offer to translate the
| | 00:52 | content on that page.
| | 00:54 | You may have noticed that Google
Chrome, in particular, wants to translate
| | 00:57 | content you visit in another language.
| | 01:00 | Now, Google Chrome is actually
tracking the language on the page itself and
| | 01:03 | making a guess, but other browsers
and future browsers will be tracking the
| | 01:08 | language code that's embedded into your content.
| | 01:11 | In addition, text-to-speech browsers can
read back the text in the correct language.
| | 01:16 | So if you wrote something in English
it'll read it back in English. If you wrote
| | 01:20 | it in German or in Norwegian, it'll
read it back in German or Norwegian.
| | 01:24 | This is really important because you can
actually embed multiple language codes in one page.
| | 01:29 | So, for instance, if you had a page
that was mostly written in English but had a
| | 01:32 | quote in French, you could define
that quote as French text, and the
| | 01:38 | Text-to-Speech browser would then
notice that and switch over the languages.
| | 01:43 | The SEO benefit is quite interesting.
Search engines index pages based on the
| | 01:47 | language the content is written in.
| | 01:49 | That means when you make a search on
Google for instance, you can say, I only
| | 01:53 | want to see results
written in a specific language.
| | 01:56 | By default, it will default to the
language you search in, but you can go and
| | 01:59 | search for a different language.
| | 02:01 | That also means if you define the
wrong language for your page or you don't
| | 02:06 | define a language for your page, your
page may not appear in searches that are
| | 02:10 | targeting a specific language.
| | 02:12 | So how do we declare a language for a page?
| | 02:15 | It's really simple.
| | 02:16 | At the very top of your page you have
an HTML tag. What you want to do is add
| | 02:21 | to the html tag the variable lang= and
then whatever language code you want to use.
| | 02:28 | You notice here I've also added
the direction attribute, because some
| | 02:31 | languages are written right to left, and you
can define that specifically in the HTML as well.
| | 02:37 | The world is populated with people who
speak many different languages and when
| | 02:41 | we use the language tag, we need
to target those specific languages.
| | 02:45 | There is an ISO language code that
targets different languages, and if you want
| | 02:49 | to find a specific language, you can go
to the w3schools.com site and find the
| | 02:55 | HTML language code reference, where
you have a complete list of all the
| | 02:58 | standard languages.
| | 03:00 | You can see here it goes
all the way from A to Z.
| | 03:03 | Now it's worth noting that in addition to
the standard languages, you also have variables.
| | 03:07 | For instance, you noticed in my slide,
it said en-US, because this is US
| | 03:13 | English. You can also say en-CA,
for Canadian English, and so on.
| | 03:18 | Now we're going to implement this
into our example project and add a
| | 03:23 | language code to it.
| | 03:24 | But before we do that I have
to build my example project.
| | 03:27 | So I'll go to the Exercise Files and
under Assets you find a folder called
| | 03:33 | Starting Point. So I'll simply drag
this one out to my desktop, copy it to my
| | 03:37 | desktop, and this is where
we'll doing all of work from now on.
| | 03:41 | So I'll change the name of this
folder to something else. I'll call it
| | 03:44 | My Accessible Site.
| | 03:48 | I can open it, and here you see we
have the index HTML file. This is the one
| | 03:53 | page in my project.
| | 03:55 | We also have the general CSS styles,
and a style reset that makes sure that
| | 04:00 | this looks the same across all browsers.
| | 04:02 | And finally, there is a folder for images.
| | 04:05 | So I want to open index.html in Notepad++
so that I can start working with it.
| | 04:12 | This is HTML5, which means the Doc Type
definition is just DocType html, and then
| | 04:18 | right underneath, we have the html tag.
| | 04:20 | So here, all I need to do is say,
dir="LTR", because it's left to
| | 04:31 | right, and then lang="en-US".
| | 04:38 | When I save this, I tell the browser and
the search engine that the text on this
| | 04:43 | page is written from left to right
and that the language is US English.
| | 04:48 | Adding a language tag to your page is
easy and has a huge advantage, both for
| | 04:52 | accessibility and for SEO.
| | 04:55 | In addition, you add current and
future features to the sites by providing
| | 04:58 | language info, so applications can
identify and use this info on the site.
| | Collapse this transcript |
| Defining meta headers for a page| 00:00 | META tags are pieces of information
hidden in the header of every web page that
| | 00:04 | provide added information to the browser.
| | 00:07 | The META tags are hidden from the
regular browser window but are used both
| | 00:10 | by browsers and search engines to
understand and display additional
| | 00:14 | information about your page.
| | 00:16 | For Accessibility and SEO, there are
two very important Meta tags you should
| | 00:19 | always focus on, Title and Description.
| | 00:23 | The Title tag provides the title for the page.
| | 00:25 | When I say Title, I don't mean the
heading or the first heading of the page;
| | 00:30 | I literally mean the title of the page.
| | 00:32 | Each page has a name or a title.
| | 00:35 | This title can be different from
the title of the article itself.
| | 00:39 | For instance, you could make an article
called About me, whereas the title would
| | 00:43 | be About Morten Rand-
Hendriksen, so it's more specific.
| | 00:47 | The accessibility of a Title tag is
that it sets the page title before any
| | 00:51 | other content, so the first thing that's
read by a text-to-speech browser is the title.
| | 00:55 | It also adds the title to the browser
window or tab, so you will notice at
| | 00:59 | the very top of your window you always see
a name that displays the name of the page.
| | 01:04 | So you see at the top of your window
or on your tab, you will always see text
| | 01:08 | describing that page. This is the Title tag.
| | 01:11 | The SEO benefit is similar.
| | 01:13 | The title tag defines the index
title for the page in search engines.
| | 01:17 | That means, like my example before, if I
have a title tag that says About Me, it
| | 01:23 | doesn't really tell the search engine
anything about this page, whereas, if it
| | 01:27 | says, About Morten Rand-Hendriksen,
anyone searching for information about
| | 01:32 | Morten Rand-Hendriksen
will see that result appear.
| | 01:35 | That means if you customize your
title tag right, you can target specific
| | 01:39 | keywords or queries in
search engines with your title.
| | 01:43 | Adding a title tag to your
page is pretty straightforward.
| | 01:46 | The title tag is literally a tag, so it
starts with tag title and ends with /title.
| | 01:52 | Also, if you are using a web developer
application like Dreamweaver or Expression
| | 01:56 | Web, the title tag is
automatically added to every page.
| | 02:00 | Unless you define it though, the
title that's added by the application will
| | 02:03 | usually be something like
Untitled Page or Untitled 1.
| | 02:08 | In addition to the title tag, we
have a meta tag for description.
| | 02:11 | The description meta tag provides a
short description of the content on the page.
| | 02:16 | When I say short, I truly mean it.
| | 02:18 | This is because search engines use this
to index the page and if you put in a
| | 02:22 | description that's longer than 160
characters, then the rest of that description
| | 02:27 | will not be indexed, so
try to keep it really short.
| | 02:30 | The accessibility benefit of the
description tag only kicks in if someone is
| | 02:34 | using a text-to-speech browser or a
phone browser or something else that
| | 02:38 | actually picks up the description.
| | 02:40 | The main benefit of the description tag
is in search engines and social networks.
| | 02:44 | When you add a description tag, it shows
up in the index of the search engine and
| | 02:49 | also shows up when people
share that page on social media.
| | 02:53 | The meta tag itself can
contain many different variables.
| | 02:56 | In this case you want to
use a description variable.
| | 02:58 | So to add it, you first add the meta
tag itself. You then add the name of the
| | 03:03 | meta tag, in this case description,
and then you add the content of the
| | 03:07 | description before closing the meta tag.
| | 03:09 | We can now add a title and a
description tag to our page.
| | 03:13 | First, let's open our
example project in our browser.
| | 03:17 | You will see at the very top here on
my Tab, it says Untitled 1, and if I go in
| | 03:22 | and activate Firebug and look at the
head component, I'll find title down here
| | 03:28 | and title says, Untitled 1. So
this is what I need to change.
| | 03:32 | So I will open index in Notepad, and
here at the very top on line 8, I find the
| | 03:38 | title tag that currently says Untitled 1.
| | 03:40 | So I will change this to Hansel, and
because this is machine code, I can't
| | 03:46 | simply use the ampersand sign, I have to
put in the code for the ampersand sign,
| | 03:51 | which is & for ampersand, and
semicolon(;), Petal Flower Company.
| | 04:00 | Now if I want to target specific
keywords or something in my Title tag, I can
| | 04:04 | now add extra information.
| | 04:06 | You shouldn't really cluster this
with keywords, but you can write a very
| | 04:10 | specific description.
| | 04:11 | In this case, I'll say, Selling
flowers and plants in Ventura, CA.
| | 04:17 | So now if someone searches for flowers
and plants in Ventura, California, they
| | 04:24 | are likely to find this page.
| | 04:26 | That's the title tag.
| | 04:27 | I also want to add the description tag.
| | 04:29 | So I will go over here and create a new
line and then I will say meta and give
| | 04:33 | the meta the name description,
and then I can put in content.
| | 04:40 | So here I can write a longer
description of what Hansel & Petal Flower
| | 04:43 | Company is all about.
| | 04:44 | I will say, Hansel... to themselves.
| | 04:49 | I just have to end my meta tag, and
now I can save the page, reload it in my
| | 04:55 | browser, and we will see two things happen.
| | 04:57 | First off, you see the title in my tab
here has changed to Hansel & Petal Flower
| | 05:02 | Company and if I right-click and go
View Page info, you will see we now have a
| | 05:07 | description: Hansel & Petal Flower
Company is a premier flower company, blah,
| | 05:11 | blah, blah, blah, blah.
| | 05:12 | More importantly, if I go to SenSEO now,
and go Show Components, you will see we
| | 05:18 | now have both a Title and a Meta-Description.
| | 05:20 | You can take this further by adding
Meta-Keywords. That would be done the
| | 05:24 | same way. You go in and then you say,
meta name keywords, and then content, and
| | 05:30 | then you can add keywords, and
then you can add keywords as well.
| | 05:33 | The reason why I haven't added
keywords in this case is because keywords are
| | 05:37 | becoming less and less important.
| | 05:39 | Search engines have discovered that
people use keywords to target specific
| | 05:43 | searches and often cluster their pages
with extra keywords that have nothing to
| | 05:47 | do with what's on the page.
| | 05:48 | So therefore, they are not indexing.
| | 05:50 | That means what's important to you is
the title and the meta name description.
| | 05:55 | Adding title and description tags to
your site puts you in control of what
| | 05:59 | the search engines and social
networks see when they only want the gist of
| | 06:03 | what's on your page.
| | 06:04 | Doing it right means you share
important information about your page in a
| | 06:07 | simple and concise way.
| | Collapse this transcript |
| Creating better semantic markup with HTML5| 00:01 | As the web evolves, so does the
code that runs behind the scenes.
| | 00:04 | The core code language we use to
develop pages on the web has evolved and it's
| | 00:08 | now in its fifth iteration, thus the name HTML5.
| | 00:12 | With HTML5, we've gotten a series of
new tags that are more semantic or
| | 00:16 | meaningful that can hook into current
and future functionality in web browsers.
| | 00:21 | Adopting HTML5 semantic markup also
makes your site code easier to understand.
| | 00:26 | In the example project for this course,
I've marked everything up in HTML5.
| | 00:31 | That has a couple of caveats;
| | 00:32 | it means that this code will not
run properly in older browsers.
| | 00:36 | It also means that some of the code
in this page may not work the way it's
| | 00:41 | supposed to in old browsers.
| | 00:42 | That's not because there's anything
wrong with the code or the browsers. It's
| | 00:46 | because HTML 5 is still in a Draft format.
| | 00:49 | Now this is not a course about HTML5,
but I want to show you what I have done
| | 00:53 | in this page, so you get an idea of what this
markup is all about and why HTML5 is so important.
| | 00:59 | If we look at the page itself, you
will notice that at the top it just
| | 01:02 | says, DocType html.
| | 01:04 | This is actually the new
code definition for HTML5.
| | 01:07 | Whereas, before we would specify
exactly what version of HTML we were using, we
| | 01:12 | are now just saying we are using HTML.
| | 01:14 | When you scroll down, you will see that
in addition to the regular tax, such as
| | 01:17 | div and ul, we now have a series
of new tags, such as header and nav.
| | 01:23 | These are highly descriptive and that's
what I meant when I said they are semantic.
| | 01:27 | Header clearly means a header,
whereas nav obviously is navigation element.
| | 01:33 | If we scroll down, you will see we go further.
| | 01:35 | There's a section and inside the section
we have an article that again has a header.
| | 01:40 | The header even has an aside, which is
kind of a side note to the header itself,
| | 01:45 | and when we go further down,
we will even see a figure.
| | 01:48 | If we scroll all the way to the bottom
of this page, we have two more elements.
| | 01:53 | We have the aside, which operates as the
actual side bar for the page, and at the
| | 01:58 | bottom we have the footer.
| | 02:00 | These new tags operate the same
way that the old divs and spans did.
| | 02:04 | The main difference is that
they are semantic, meaningful;
| | 02:08 | they actually tell you something
about the content that's inside.
| | 02:11 | So instead of having just a long series
of divs that open and close throughout
| | 02:15 | your page, you now have different elements
that kind of say something about the content.
| | 02:19 | This is becoming more and more
important because we are getting new devices
| | 02:23 | being rolled out that handle the web
differently than what we are used to.
| | 02:26 | People no longer just visit a website
using their computer; they may also use a
| | 02:31 | phone or tablet or another device. And
in the future people will be even more
| | 02:35 | advanced about how they access this information.
| | 02:38 | Just imagine people visiting your
website through their TV or even like they
| | 02:43 | always talk about, through their fridge.
| | 02:45 | When this is the case, adding these
semantic tags will make it easier for these
| | 02:49 | devices to parse the information, understand
it, and display only what the user wants to see.
| | 02:54 | So implementing HTML5 tags now, even
though it's early in the game, will give
| | 02:59 | you huge leg-up in the future, when
these things become extremely important.
| | 03:04 | By using the new HTML5 semantic tags,
you make your code easier to understand
| | 03:08 | and you prepare your page for
future added functionality in browsers.
| | Collapse this transcript |
| Using and hiding section headings| 00:00 | When you visit a site using a normal
browser, it's usually easy to understand
| | 00:04 | where and what the different sections are
because of the layout and design of the site.
| | 00:08 | Menus, content, sidebars, footers, and so
on are all clearly separated and defined.
| | 00:14 | When you visit the same site using a
text-to-speech or a text-only browser, the
| | 00:18 | experience is completely different.
| | 00:20 | You no longer have visual cues as to
where the section begins and ends, and you
| | 00:24 | don't necessarily know what they are for.
| | 00:26 | To fix this, we can add section
headings and descriptions that are only visible
| | 00:30 | or hearable when you're
using a non-visual browser.
| | 00:33 | These headings and descriptions can
then provide more information about
| | 00:36 | the different sections.
| | 00:38 | The reason why you want to add
section headings is to provide information
| | 00:41 | about each section for the non-visual
browsers, so text-only or text-to-speech browsers.
| | 00:46 | The accessibility benefit is obvious.
| | 00:48 | These section headings define and explain
separate sections, providing additional
| | 00:52 | information to the person visiting the site.
| | 00:54 | The SEO benefit is more hidden.
| | 00:57 | By adding this information in, the
search engines can see what content is on the
| | 01:01 | page and also what sections are defined
so that it understands the content more
| | 01:06 | easily, because though the primary
focus of the search engines and social
| | 01:10 | networks is to index just the title and
description tags, they also read the rest
| | 01:15 | of the page, and adding these section
headings will give the search engine
| | 01:18 | further information about what's on the page.
| | 01:21 | Adding and hiding section
headings is a two-step process.
| | 01:24 | First, we go into the HTML page
itself and add a section heading.
| | 01:30 | So I will scroll down here to
header navigation and then I'll add a
| | 01:33 | section heading here.
| | 01:34 | So I'll say h1, because this is a
heading, and then I'll end my h1, just so it
| | 01:38 | looks nice and clean, and then
in here I will say, Main Menu.
| | 01:44 | So now I have a heading that says Main Menu,
so you can see that this is the main menu.
| | 01:49 | I will also add a class to
this so that I can style it.
| | 01:51 | So I will say class, and I
will call that section heading.
| | 01:57 | If I save this now and open the page
in my browser, you'll see we now have a
| | 02:01 | section heading here for Main Menu.
| | 02:03 | The problem is, as I did that, I broke
the layout of my site because now the
| | 02:06 | menu shifted down, and everything looks weird.
| | 02:09 | The next step is to hide this heading,
so it only appears if we turn the CSS off.
| | 02:13 | There are several ways you can hide
content from a browser using CSS, but in
| | 02:17 | this case I don't really want to hide
it from the browser; I just want to hide
| | 02:21 | it from the person looking
at the content in the browser.
| | 02:24 | So instead of setting the display
value to none, which means the text simply
| | 02:28 | disappears and the browser can't see it,
| | 02:31 | I want to take the text out of the context and
shift it away from my screen, so I can't see it.
| | 02:36 | So we will use absolute positioning to
lift the text out of the stream of the
| | 02:40 | rest of the content and then use a
text indent to shift it all the way off to
| | 02:44 | the left of the screen.
| | 02:45 | To do this, I will open the styles.css
file in Notepad and I will go down until
| | 02:51 | I find my Global styles, and here at
the very top I will add a new style for
| | 02:57 | that class I just created.
| | 02:57 | So I will say class section-heading,
and then first I will set the position to
| | 03:04 | absolute, and I will just close this.
| | 03:08 | If I save this and reload the page,
you will see that now Main Menu has been
| | 03:13 | taken out of the general stream of the
content and just put all the way to the left.
| | 03:18 | Now what I want to do is take the text
and shift it so far to the left that you
| | 03:22 | will never see it, no
matter how big your screen is.
| | 03:24 | So I'll go back, I will add another line,
and then I will say text-indent, and
| | 03:29 | then I will indent:
| | 03:30 | -9999 pixels. That means the text will
be indented 9999 pixels to the left of
| | 03:41 | where it normally is, which means
only if you have a screen that had 10,000
| | 03:45 | pixels of extra space to the
left would you ever see the text.
| | 03:49 | When I save this and reload the page,
you will see Main Menu is gone, but if I
| | 03:55 | go into CSS and disable
styles Main Menu is right there.
| | 03:59 | That means if someone is visiting
a site using a text-only browser or
| | 04:03 | text-to-speech browser they will see
the section heading for the Main Menu, but
| | 04:07 | if they're using a regular browser
that shows CSS, they don't see it.
| | 04:11 | That was a section heading.
| | 04:12 | We can also go further by adding
another section like a description, and simply
| | 04:17 | add that same style to it
and that'll be shifted off too.
| | 04:20 | So we could go in to our HTML file,
create a new div with the same class, we
| | 04:27 | call it section-heading,
and then write some text.
| | 04:34 | Now when I save that, go back and reload,
you'll see nothing changed when I am
| | 04:38 | viewing it with CSS. When I disable
the styles, we now also have description.
| | 04:44 | By adding and hiding section headings
and descriptions, you make it easier for
| | 04:47 | people and search engines to navigate
and understand your site without adding
| | 04:51 | extra unnecessary content for those
who have standard visual browsers.
| | Collapse this transcript |
| Creating content hierarchies with heading tags| 00:00 | Back in the days of text-on-paper
publishing, using different headings to create
| | 00:04 | content hierarchies was fairly common.
| | 00:07 | But when we started moving to the
web, people seemed to forget about it.
| | 00:10 | As a result, you'll find a lot of
websites only use two levels of content, h1
| | 00:15 | headings, and a lot of paragraphs.
| | 00:17 | And if they need a subheading, they just use
a paragraph with bold text or a large size.
| | 00:22 | For multilevel content, this is not the
correct way to display the hierarchy, and
| | 00:26 | it's also really confusing
for people who visit the site.
| | 00:28 | HTML comes stocked with six levels of
headings and by using them properly, you
| | 00:33 | give readers as well as search engines
a better understanding of your content,
| | 00:37 | and how it stacks up.
| | 00:38 | The general principle of using
headings in your site is to create
| | 00:41 | content hierarchies.
| | 00:43 | The idea is if you have a main
heading and then subheadings underneath, you
| | 00:47 | use the heading levels h1 through h6
to indicate which headings belong under
| | 00:52 | which other headings.
| | 00:54 | This is standard stuff if you ever
did text editing, but it's surprisingly
| | 00:58 | uncommon when you go on the web.
| | 01:00 | The Accessibility benefit of using the
heading hierarchies is that it makes it
| | 01:04 | easier to understand the content of
the page, not only for people who use
| | 01:08 | text-to-speech browsers, but also
for people who just visit the site.
| | 01:11 | By using headings properly, you make
the page easier to navigate and digest,
| | 01:15 | especially if people do
things like print out your page.
| | 01:19 | In addition, people who use text-to-
speech browsers tend to activate a function
| | 01:23 | that only reads out the headings of the page.
| | 01:25 | That means if you're not using
headings on your page or if you're only
| | 01:29 | using, for instance, the h1 heading,
you are not actually communicating the
| | 01:33 | content hierarchies on the page to anyone
except the ones that can see the visual output.
| | 01:38 | The SEO benefit of using
headings is a bit surprising.
| | 01:41 | Those search engines mainly index the
title and description tags of pages.
| | 01:46 | They also read the rest of the page
and index all that content, so that when
| | 01:49 | people search for something specific, they
can find something specific in a specific page.
| | 01:54 | When they index this, they use the
headings to create the hierarchies in the
| | 01:58 | index, so they understand that something
under heading 3 is subsidiary to what's
| | 02:03 | under heading 2, which again, is
subsidiary to what's under heading 1.
| | 02:07 | Meaning if you create these
hierarchies properly, the search engines will
| | 02:11 | have an easier time parsing and
understanding the content of your page and an
| | 02:14 | easier time serving it up to the people
looking for the information you have written about.
| | 02:19 | So what does this look like in real life?
| | 02:21 | In the sample project I've given you,
I've done something wrong on purpose
| | 02:25 | so you can see what happens when you do it
the wrong way, and we are going to fix that.
| | 02:28 | But let's first take a look
at it when it's done wrong.
| | 02:31 | If you open the index page in your
browser, you see everything looks normal.
| | 02:35 | It looks like we have a heading at
the top here, we scroll down, we have a
| | 02:38 | Heading 2 a Heading 3.
| | 02:40 | But, if we turn Styles off,
something weird happens.
| | 02:44 | You see, without Styles activated on
this page, it now looks like the only
| | 02:48 | heading on the page is the
section heading for the Main Menu.
| | 02:51 | There is no other heading here.
| | 02:53 | The rest of it is all paragraphs.
| | 02:55 | You'll find the heading down here--
it's this In the Coppice down here.
| | 02:59 | And further down we will find Heading 2 and
Heading 3, but these appear as paragraphs.
| | 03:05 | That is because if we turn Styles back
on again and select any one of them--so I
| | 03:09 | will right-click on it
and select Inspect Element--
| | 03:13 | You will see that what appears as my
Heading 1 is in fact just a paragraph with
| | 03:17 | some extra styling on it.
| | 03:19 | Same goes for Heading 2 and Heading 3.
| | 03:21 | If I select Heading 2, you will see it's
just a paragraph with some extra font styling.
| | 03:27 | What I want to do is go into this
file and change these so that they are
| | 03:31 | actually using the proper content hierarchy.
| | 03:33 | So I will open index.html in my
Notepad and scroll down until I find the
| | 03:40 | sections and change them.
| | 03:41 | First, I will find what's going to be
Heading 1. It's here, In the Coppice, so
| | 03:45 | I will take p class article-title out and
I'll change it to h1 class article-title.
| | 03:51 | I will scroll down and then find
Heading 2, which is down here, and I will change
| | 03:58 | this to Heading 2, h2, and I'll
find Heading 3 and change that.
| | 04:06 | Just looking at my markup now, this is
already easier to read, because now I can
| | 04:10 | see that h1, the main heading, is on
line 42, whereas h2, the subheading, is on
| | 04:17 | line 65, without having to
read any of the style code.
| | 04:21 | When I save it and I reload my page,
you will see that although nothing really
| | 04:25 | changed visually because I'm
hooking into the same styles,
| | 04:29 | if I activate SenSEO, you see we now
have a hierarchy of headings, Level 1
| | 04:35 | Headline, In the Coppice, 2nd Level
Headline, Heading 2, and 3rd Level Headline,
| | 04:41 | Heading 3, and if I turn Styles off,
you see that In the Coppice is displayed
| | 04:48 | as a Headline 1, Heading 2 is
displayed as Heading 2 and Heading 3 is
| | 04:52 | displayed as Heading 3.
| | 04:53 | This may very well seem like obvious
information to a lot of you, but in my
| | 04:57 | meanderings through the web, I've
discovered that even people who do this all
| | 05:01 | the time like me, and I have to admit,
I do forget this all the time, tend to
| | 05:05 | forget to use content
hierarchies when they write articles.
| | 05:09 | So if you just keep it in mind, if
you're writing a subsection of a main section
| | 05:13 | you always use Heading 2 or Heading 3
all the way down to a Heading 6, you will
| | 05:17 | create a better content hierarchy
and things will make more sense.
| | 05:20 | By using the heading tags the way
they were intended, you can create an
| | 05:24 | easy-to-understand content hierarchy,
both for people and for search engines.
| | Collapse this transcript |
| Emphasizing content in paragraphs| 00:00 | In print publishing, we use bold
and italicized fonts to emphasize text
| | 00:04 | content in different ways.
| | 00:06 | On the web, you can add tags to text
content to achieve the same effect, but the
| | 00:10 | weight on the web is put on what
action you are performing rather than the
| | 00:14 | stylistic approach you are using when doing so.
| | 00:16 | In other words, whereas in print, you
talk about italicized or bold text, on the
| | 00:21 | web, you talk about emphasized and
strongly emphasized text. Whether these are
| | 00:25 | actually italicized or bold
is a decision for the designer.
| | 00:29 | The general principle of
emphasizing text is pretty recursive.
| | 00:32 | Emphasizing text is done to emphasize text.
| | 00:35 | What's important here is the word emphasize.
| | 00:38 | You're not adding stylistic elements to
the text; you are actually emphasizing
| | 00:43 | it. And that's what we want to do.
| | 00:45 | The emphasis is something that happens
internally in the reader, not something
| | 00:48 | that it happens on the page itself.
| | 00:50 | The accessibility benefit of
emphasizing your text properly is two-fold.
| | 00:54 | First of all you are telling the
browser that this is emphasized text and
| | 00:58 | allowing it to emphasize it in
whatever way the style sheet or the
| | 01:01 | browser itself wants.
| | 01:03 | Secondly, if you're using a text-to-
speech browser, the text-to-speech browser
| | 01:07 | will actually emphasize the text so that
if it's emphasized it will be emphasized,
| | 01:11 | if it's strongly emphasized
it will be strongly emphasized.
| | 01:14 | This makes it easier for the person who
is listening to your text to understand it.
| | 01:18 | At present, there is no real
SEO benefit to emphasizing text.
| | 01:22 | However, the people who are building search
engines are trying to make them more semantic.
| | 01:26 | They are moving towards what is called
the semantic web or the meaningful web.
| | 01:31 | And once that kicks in, search
engines will literally understand what it is
| | 01:35 | you're seeing on your page, which means
if you put emphasis on something, search
| | 01:39 | engines will put emphasis on that too.
| | 01:41 | Let's add emphasis to some of the
text content in our example project.
| | 01:45 | I will open the example project in my browser
so I can find some text I want to emphasize.
| | 01:50 | The easiest way of doing this is
usually just by reading the text out, and you
| | 01:53 | will hear when you read it out
loud that something has more emphasis.
| | 01:57 | On the last line in the fourth paragraph
for instance, there is a natural emphasis.
| | 02:01 | If I read it, The Primrose blossoms have a
scent, not strong, but very sweet and pleasant,
| | 02:06 | I can tell there should
be emphasis on not strong.
| | 02:10 | Now that I know that, I can
go in and change the markup.
| | 02:13 | So I will open index.html in my Notepad,
scroll down to the fourth paragraph and
| | 02:19 | find that piece of text. Here it is:
| | 02:21 | The Primrose blossoms have a scent,
not strong, but very sweet and pleasant.
| | 02:24 | So now I can add emphasis to not strong.
| | 02:27 | So I will go in and add a new tag,
it's just <em> for emphasis, and then I end
| | 02:32 | the tag where I want the
emphasis to end, and I save it.
| | 02:36 | When I now reload the page,
you'll see that nothing happened.
| | 02:40 | It's still the same, and that's fine.
| | 02:41 | I will show you why in a second, but first I
also want to strongly emphasize a piece of text.
| | 02:46 | If I scroll further down, there is a
piece of text here in the last paragraph
| | 02:50 | here--that trees also have flowers--
| | 02:52 | that I want to strongly emphasize.
| | 02:54 | So I will go back to my text editor,
scroll down to the last paragraph, find
| | 02:58 | that piece of text, starts
here, and then say <strong>.
| | 03:02 | The strongly emphasize tag is literally strong.
| | 03:05 | I will save that and we will go back to
the browser, reload it, and you will see
| | 03:10 | again nothing happened.
| | 03:12 | That's because so far, we who designed
the page have not made a decision on how
| | 03:16 | we are going to display
emphasized and strongly emphasize text.
| | 03:19 | So right now it's being
displayed just like all the other text.
| | 03:22 | But, if I turn Styles off, you will see
that the browser will make that decision
| | 03:26 | on our behalf if we don't specify anything.
| | 03:28 | So under Heading 2, you see here that
our emphasized text is now italicized.
| | 03:33 | And our strongly emphasized
text at the bottom is bold.
| | 03:36 | If we want this same effect to happen
when we turn Styles on, we have to go into
| | 03:40 | our style sheet and add two new styles.
| | 03:42 | So I will open my style sheet, and I
will scroll down to the Global styles, then
| | 03:49 | here I'll add two new styles.
| | 03:50 | I will add a style for the emphasized
text and a style for the strong text.
| | 03:57 | I want the emphasized text to be
italicized, so I will say font-style:
| | 04:02 | italic and I want the strong text to be
bold, so I will say font-weight: bold.
| | 04:08 | When I save that and reload my page in
the browser, you will see my strongly
| | 04:14 | emphasized is now bold and my
just emphasized text is italicized.
| | 04:19 | And now you see what I
was talking about earlier.
| | 04:21 | The emphasis has nothing to
do with how it's displayed.
| | 04:24 | The display is the decision of the designer.
| | 04:26 | For example, if I want my strongly
emphasized text to be red, I can go into my
| | 04:31 | style sheet and just add that. I will say color:
| | 04:34 | red, save it, reload, and the
strongly emphasized text is now red.
| | 04:38 | It doesn't matter to the browser; it's
still just strongly emphasized text. But
| | 04:42 | to the person who is just looking
at it, you can see that it's red.
| | 04:45 | There is an important side note to this.
| | 04:46 | In addition to the <em> tag,
emphasized, and the <strong> tag, which is
| | 04:50 | strongly emphasized,
| | 04:51 | you can also add a B tag or an I tag.
They either bold or italicize the text.
| | 04:57 | Now these two tags are purely visual.
| | 04:59 | They are only added if you want to
make some text either italicized or bold,
| | 05:03 | without adding more emphasis to them.
| | 05:05 | That means they'll look bold or
italicized in the browser, but if they are read
| | 05:09 | back to someone, they won't have emphasis.
| | 05:11 | So every time you want to emphasize something
you use either the <em> tag or the <strong> tag.
| | 05:16 | Using strong and em tags in your text
takes you back to the original purpose
| | 05:20 | of bold and italicized text, lending
importance to sections of the text.
| | 05:25 | It also hooks into the default settings
of all browsers, who will identify the
| | 05:28 | text as emphasized or strongly
emphasized and point this out to the reader,
| | 05:32 | either through visual
changes or through voice changes.
| | Collapse this transcript |
| Making accessible block quotes| 00:00 | When you read a magazine or newspaper,
you will from time to time see offset
| | 00:04 | quotes that are lifted out of
the overall context of the page.
| | 00:07 | These are sometimes called pull quotes
and they are used to drag the reader's
| | 00:10 | attention toward a particular quote in
the text or to emphasize that this is a
| | 00:14 | quote rather than just a
regular part of the text.
| | 00:17 | In HTML, we find the same type of
elements in the blockquotes tag.
| | 00:21 | When you build a web page, the blockquote
element is used to indicate a quotation.
| | 00:25 | It's usually used when you quote
something off someone else's website or if you
| | 00:30 | write an article that has a quote in it
and you want to pull attention to it.
| | 00:34 | The blockquote is good for accessibility
because it clearly separates a quote
| | 00:38 | from the rest of the text,
| | 00:39 | so that when you read the text, you
can clearly either see or hear that this
| | 00:43 | text does not belong in with the rest
of the text in terms of who wrote it.
| | 00:47 | And this is really important, because
if you want to communicate that this
| | 00:50 | is not what you wrote, this is what
someone else wrote, you will use the blockquote.
| | 00:54 | The SEO benefit of the
blockquote is directly linked to this.
| | 00:57 | Search engine rankings depend on a lot
of different factors, two of which are the
| | 01:01 | validity of your content and also
the linking out to other sources.
| | 01:06 | So when you make a quote and you
attribute it properly to the source, usually
| | 01:10 | with a link attached to a name, then
you tell the search engine, look, I am
| | 01:14 | presenting you with proper
content and here is where I got it from.
| | 01:17 | So you are being transparent about it, and
that's something that search engines like.
| | 01:21 | Adding a blockquote to your text means to
add the blockquote tag around some content.
| | 01:26 | So I will go to my project site and open into
my browser to find some content I want to wrap.
| | 01:32 | And when I read it, I see that the
fourth paragraph under Heading 2 looks like a
| | 01:37 | quote, so I will just wrap this in the
blockquote so you can see what happens.
| | 01:40 | I will open my file in Notepad and I
will find the section I want to change.
| | 01:46 | It starts here with I daresay, so I'll
just go and simply change the <p>, which
| | 01:51 | is the paragraph, to blockquote.
| | 01:53 | Then I will end with the same
thing <blockquote> and save it.
| | 01:57 | Now when I reload the page, you will
see that the blockquote appears quite
| | 02:02 | differently from the rest of
text, and here's something important.
| | 02:05 | The reason why it appears differently is
because that's how I styled it, so if I
| | 02:09 | right-click on this content, select
Inspect Element, and look at the styles in
| | 02:14 | the site here, you will see that I have
a style called blockquote that controls
| | 02:18 | the display of this content.
| | 02:20 | You will see that the font size is 1em,
it's italicized, there is a bigger
| | 02:25 | line-height, and there are more margins.
| | 02:27 | Just like with the emphasized and
the strongly emphasized content, the
| | 02:30 | blockquote tag itself has
nothing to do with how it's displayed.
| | 02:34 | It's a semantic tag telling the browser
what's going on with the content inside
| | 02:39 | it. How you display that content varies
depending on how you want to design it,
| | 02:43 | and this is an important point.
| | 02:44 | In the past, people tended to use the
blockquote element to indent content.
| | 02:49 | It was really used as an indentation
function rather than a quote function.
| | 02:53 | This is not what it's for.
| | 02:55 | The blockquote is for presenting
block quotes, texts that are quoted either from
| | 03:00 | a person, from within the text
itself, or from a different source.
| | 03:04 | If used correctly, the blockquote is a
powerful tool telling the browser and the
| | 03:08 | user that this content comes
from elsewhere and is quoted.
| | 03:11 | Combined with the right citation and a
link to the originator, it can be an even
| | 03:15 | more helpful tool both for the visitor
in finding the original source, and you,
| | 03:19 | in lending validity to your content.
| | Collapse this transcript |
| Using some new HTML5 tags| 00:00 | HTML has a lot of lesser used, but
no less important, tags that are slowly
| | 00:04 | becoming more important as the
Semantic Web starts rolling in.
| | 00:08 | These include the <small>, <cite>,
<meter>, <abbr>, and <time> tags.
| | 00:14 | Because these tags can be a bit hard to
figure out, I'll walk you through them
| | 00:17 | so you can see how they're used.
| | 00:19 | We'll start with the <small> tag. The <small>
tag used to be used just to make things
| | 00:23 | smaller, but now it has a specific purpose.
| | 00:26 | The <small> tag wraps legalese or fine
print content--things like terms and
| | 00:31 | conditions, rules, legal disclaimers, and so on.
| | 00:35 | I like to use it in my footers to
wrap things like the copyright statement
| | 00:39 | in the bottom of the page, so that
it's easier to see that this is a
| | 00:42 | copyright statement.
| | 00:44 | Here is an example of how you'd use it.
| | 00:45 | You simply put it in the <small> tag,
write in the fine print you want to use
| | 00:49 | there and then end the <small> tag.
| | 00:50 | The next tag is <cite>.
| | 00:52 | Now, <cite> used to be used a lot, and then
people stopped using it, and now it's back.
| | 00:57 | The <cite> tag is now supposed to wrap the
title of work pointing to another source.
| | 01:02 | So for example, if you put in a
blockquote with a quote from a different source,
| | 01:06 | then you would put them in a cite quote,
with the name of that source, and then
| | 01:10 | within that, put an anchor tag that
points out to the source so people can
| | 01:14 | click on it, and go to that source.
| | 01:16 | An example of using the <cite> is this.
Because I got this information from the
| | 01:20 | W3C Web Standards website, I'll wrap W3C
Web Standards in a cite tag so that it
| | 01:27 | is clear where it came from.
| | 01:28 | The <meter> tag is a new tag
that has a lot of potential.
| | 01:32 | It's not really being used much now,
but it will be in the future, and you'll
| | 01:35 | see why in a second.
| | 01:36 | The meter tag measures data within a
certain range, for instance, "9 out of 10
| | 01:41 | lynda.com viewers are human,"
or 80% or something like that.
| | 01:46 | The point of the <meter> tag is that it
actually carries with it information about
| | 01:51 | the number within the tag itself.
| | 01:53 | If you look at an example,
you'll see what I mean.
| | 01:55 | When you add the <meter> tag,
you also add attributes.
| | 01:58 | In this case, when you say 9 out of 10,
we add the value ="9" and then we set the
| | 02:02 | minimum="0" and the max="10".
| | 02:05 | Now we can use CSS in JavaScript to
display a scale from 0 to 10, and then point
| | 02:09 | out the 9 value on that scale.
| | 02:12 | You can also use it to show something
like 90% out of a 100, by marking it up
| | 02:16 | this way. Meter value=0.9, which is 90%,
and again, you can use CSS to then show
| | 02:23 | a scale from 0 to 100, and mark off to 90% mark.
| | 02:27 | The <abbr> tag is the abbreviation tag.
| | 02:30 | You use it to wrap acronyms and abbreviations.
| | 02:32 | The purpose of this tag is to provide
extra information, because if you use an
| | 02:37 | acronym or an abbreviation, chances are the
person reading it won't know what these
| | 02:41 | mean, and here's a good example.
| | 02:43 | If you see the abbreviation c-o-l or col dot,
| | 02:44 | you don't know what that means.
| | 02:48 | It could either be colonial, it could
be colonel, it could be could be college,
| | 02:53 | or it could be something else.
| | 02:54 | But by wrapping this in the <abbr> tag
and adding a title, if you then move your
| | 02:59 | mouse and hover over the abbreviation,
you'll see a little pop-up that gives you
| | 03:03 | the full explanation of what that word means.
| | 03:05 | Finally, we have the <time> tag. Now the
<time> tag is controversial to say the least.
| | 03:10 | In fact, the week before we recorded
this course, the W3C who decide these
| | 03:14 | things, what tags people can or cannot
use, decided to pull the <time> tag out of
| | 03:19 | the HTML5 standard, only to
reintroduce it because developers got so angry.
| | 03:23 | The idea with the <time> tag is that
when you put a time on your website, you
| | 03:27 | can tell the browser what time this is, and
then the browser can do something with it.
| | 03:31 | The way you mark that up is by saying
time and then datetime and then you can
| | 03:35 | either mark it up by a standard 24-hour
clock, so 9:30 p.m. will become 21:30,
| | 03:40 | or you can even attach a
specific time on the Gregorian calendar.
| | 03:45 | In this case I've added a datetime
that points to Winter Solstice 2011, which
| | 03:50 | is on the 22nd of
December at 5:30 a.m. in England.
| | 03:54 | You'll notice it says +00:00 at the
end. That refers to the zero timeline.
| | 03:59 | So if you wanted to refer to a time,
for instance in LA, you would say +08:00,
| | 04:03 | because it's eight hours ahead.
| | 04:07 | The <time> tag is probably the most
interesting one, at least for me, because
| | 04:10 | once you add the <time> tag into your page,
you can then develop a phone app or a
| | 04:15 | Web app that would pick up the time and
either change it depending on where the
| | 04:18 | person who's visiting the site is, or
add that time to your calendar, add it to
| | 04:23 | some other elements where you can use it actively,
and that's the whole point of all these tags.
| | 04:28 | As the Web progresses and browsers
progress, we can build-in new functions
| | 04:32 | that hook into the tags and pull out
information of the website, in addition
| | 04:35 | to what you've written.
| | 04:36 | Using the correct markup in your
copy can add a lot of information to the
| | 04:40 | material that's already there.
| | 04:41 | That's the whole point of hypertext,
to add new layers of information that's
| | 04:45 | not available in print.
| | Collapse this transcript |
| Using ordered and unordered lists| 00:00 | Lists are powerful and often used
tools where web development is concerned.
| | 00:04 | Not only can they create regular
bullets and numbered lists, but they can also
| | 00:08 | help organize long strings of related
content, be used as menus, or keep order of
| | 00:13 | things like comments.
| | 00:14 | Knowing when and how to use lists the
right way can be huge benefit, both for
| | 00:18 | yourself, your visitors, and search engines.
| | 00:21 | When you're building a webpage and
you have content types that repeat
| | 00:24 | themselves over and over or you have
groups of content that appear in a list,
| | 00:29 | or you have groups of content that should
appear together, you're always going to use a list.
| | 00:33 | Not only does this make it easier to
access for people who access the site, but
| | 00:37 | it also tells the browser and search
engines that these things belong together
| | 00:41 | and it becomes easier to style for you.
| | 00:43 | The accessibility benefit of creating
lists is pretty obvious. When you put
| | 00:47 | items that belong together or are
related into a list, then they will be listed
| | 00:51 | out in a list and they're easy to navigate.
| | 00:54 | That also carries over into search
engines; once you put items into a list,
| | 00:58 | search engines will see those items
as sequential and related and will
| | 01:02 | treat them accordingly.
| | 01:03 | There are several common uses for lists in HTML.
| | 01:06 | The most common one that you'll see on
almost every site these days is Menus.
| | 01:10 | Whereas before, web developers would
create tables to contain menu items or they
| | 01:15 | would just list off links,
| | 01:17 | when you make a menu these days, you
create an unordered list and then you put
| | 01:21 | each menu item in its own list item.
| | 01:23 | The reason for this is then you can
create one style for all the list items and
| | 01:27 | then every time you add a new menu item,
it'll automatically inherit that style,
| | 01:30 | so it's just easier to manage.
| | 01:32 | You'll also find lists used
extensively in blogs and other indexes.
| | 01:36 | In many blogs you'll see that each post
on an index page is actually a list item.
| | 01:41 | This is done both so it's easy to
manage for the developer and also so it's
| | 01:44 | easy to navigate for a
person visiting that site.
| | 01:47 | You'll also see lists appear very
often in sidebars on blogs and other items,
| | 01:52 | because then you can make one general
style for the single list item, and then
| | 01:56 | as you add more things to the
sidebar, they just inherit those styles.
| | 02:00 | When it comes to comments on blogs,
you'll often find they use numbered
| | 02:04 | lists with sub-lists.
| | 02:05 | That way the browser can count the
comments, they're treated as sequential
| | 02:09 | elements, and they make more sense semantically.
| | 02:12 | Another use that's kind of novel and a lot
of people don't know about is image galleries.
| | 02:16 | If you wanted to make an image gallery,
the easiest way is to actually to put all the
| | 02:20 | images into lists, and then just style
the list items. That makes it easy to
| | 02:24 | manage and they also flow nicely on the page.
| | 02:27 | To give you an idea of how this works,
let's take a look at the example project.
| | 02:33 | Looking at the website itself, it
doesn't look like there are any lists here.
| | 02:36 | If you look at it, we just have menus
and content, but if I turn off Styles,
| | 02:43 | you'll see that all the lists appear.
| | 02:44 | From the top here the Main
Menu is an unordered list.
| | 02:48 | And when we'll scroll down you'll see
that this image gallery, the three images
| | 02:52 | are also list items.
| | 02:53 | You notice because they have these
bullets next of them, and as we scroll
| | 02:57 | further down, you'll see that each of
the big blocks in the sidebar are also
| | 03:01 | lists, and finally that
the bottom menu is a list.
| | 03:05 | There are several reasons
I laid it out like this.
| | 03:08 | Like I said in the beginning, one of
the most important ones, at least for
| | 03:10 | menus, is that once you create a list,
adding a new menu item becomes very easy.
| | 03:15 | If we go into the code, you'll see
that adding a menu item is as easy as
| | 03:20 | adding a new list item.
| | 03:22 | You see the menu item here, and all we
have to do is simply copy out that code, add
| | 03:27 | a new list item, and call it
something else. I'll call it New.
| | 03:32 | So all I did now was add a new list
item with a new link, and when I reload
| | 03:36 | the page, you'll see that that list
item automatically appears and inherits the
| | 03:39 | same style, as all the other elements.
| | 03:41 | That means managing a menu becomes very easy.
| | 03:44 | The same can be said for this image
gallery down here. The reason why I created
| | 03:48 | a list is because then I know that if I
add another image, it'll automatically
| | 03:51 | stack nicely underneath the ones that
are already there. And if I take one away,
| | 03:56 | the two other images will shift nicely in.
| | 03:58 | So it's an easy way of managing the
image gallery without having to add new
| | 04:02 | styles every time you add a new image.
| | 04:05 | Let's take a look at that code one more time.
| | 04:06 | If I go into my code, you'll see all
these lists appear in the same fashion.
| | 04:12 | They start off with an unordered list
tag, and then you have each list item
| | 04:16 | appearing underneath.
| | 04:18 | If we scroll down to where the images
are, the gallery consists of an unordered
| | 04:23 | list with a class, gallery. And then we
have a list item that contains an anchor,
| | 04:28 | and within that anchor or link, we have
the image itself, and then that process
| | 04:32 | just repeats itself.
| | 04:33 | Another list item, another anchor,
another image, another list item, another
| | 04:38 | anchor, another image. And as we scroll
down, we'll find the sidebar right here,
| | 04:43 | the first sidebar list, the second
sidebar list, the third sidebar list, and
| | 04:49 | all the way inside the footer, again,
we'll find an unordered list, this time
| | 04:52 | called footer-menu that has list items
inside it that point to those menu items.
| | 04:57 | So see how using the list makes it very
easy to manage the code on the code end,
| | 05:02 | makes it very easy to style the code
for display, and makes it very easy for
| | 05:06 | people to access the code
when it's displayed in the site.
| | 05:09 | Using lists effectively can not only
make your site easier to access and
| | 05:12 | understand for people and search engines, but
it can also make it easier for you to manage.
| | 05:16 | Looking around the web, you'll see
that lists show up everywhere, and often in
| | 05:20 | places you didn't expect.
| | 05:22 | Try for yourself and see if
you can start incorporating lists
| | 05:24 | more constructively.
| | 05:26 | When in doubt, a list is often the right answer.
| | Collapse this transcript |
|
|
6. Adding Accessibility and SEO Info to Links, Images, and Other ContentMarking up links properly| 00:00 | The whole internet is built
around the concept of the hyperlink.
| | 00:03 | Therefore, it's surprising to realize
that the majority of hyperlinks, or links,
| | 00:08 | on the web are not properly marked up.
| | 00:10 | There are many reasons for this,
most notably that even if a link is not
| | 00:13 | properly marked up, it'll still work.
But regardless of the reasons why, the
| | 00:18 | poorly constructed link is not very functional.
| | 00:21 | When you add a link to a web page
you're doing it for one reason only: to get
| | 00:25 | people to click on that link. And for
them to click on the link, you need to
| | 00:30 | make sure you give them enough
information so they know where they're going.
| | 00:33 | This is where the title attribute comes in.
| | 00:35 | The title attribute lets you add
additional information to the link, so you can
| | 00:40 | provide additional
information about where they're going.
| | 00:43 | The accessibility benefit of marking
up your hyperlink properly is obvious.
| | 00:47 | If you mark it up properly and add a
title tag to it, then people will be able
| | 00:51 | to hover there mouse over it and get
more information about where that link is
| | 00:55 | going. Or if they're using a text-to-
speech browser, they'll be able to focus
| | 00:59 | on that link with their Tab key, and then hear
the information about where that link is pointing.
| | 01:04 | And this is where the premise of
accessibility techniques and SEO going
| | 01:07 | together comes together for real.
| | 01:10 | The accessibility benefit equals the
SEO benefit because, as I said earlier, a
| | 01:15 | search engine is a blind reader;
it can only read what you display.
| | 01:19 | So when the search engine sees a link,
it immediately looks for the title tag to
| | 01:23 | explain where this link is pointing.
| | 01:26 | The basic hyperlink markup is very
simple. You start with an anchor tag or an
| | 01:30 | <a, you then add the href or the
hyperlink reference, which points directly to
| | 01:35 | wherever you're pointing.
| | 01:36 | This can be either an absolute link,
like what you see here, it can be a root
| | 01:40 | relative link that points to a file or
a page inside your site, or it can be a
| | 01:45 | link to a place on the
page that's currently open.
| | 01:48 | After you've added the hyperlink
reference, you add the title tag.
| | 01:52 | The title tag is a descriptive tag
that explains where this link is pointing.
| | 01:57 | In this case, since I'm pointing to
lynda.com/morten, I have put in the title
| | 02:03 | tag, lynda.com courses
by Morten Rand-Hendriksen.
| | 02:06 | This is more descriptive and
tells the user where they're going.
| | 02:10 | Now when I say more descriptive, I'm
talking about more descriptive than what
| | 02:15 | the hyperlink wraps.
| | 02:17 | In this case, the hyperlink wraps the simple
word My courses, which doesn't say anything.
| | 02:23 | If you left it just My courses and
didn't add a title tag, then the only Google
| | 02:27 | search that would result in this
link would be a search for My courses.
| | 02:32 | Whereas, if you search for Morten Rand-
Hendriksen's courses, you wouldn't find it.
| | 02:36 | Now that we know how to markup a
hyperlink properly, let's do it in the page, so
| | 02:40 | you can see some general principles around it.
| | 02:43 | If I open the example project in my
browser, you'll see that we have a lot of
| | 02:49 | hyperlink going on here.
| | 02:50 | We have a hyperlink wrapping this
header image, we have all our menu items and
| | 02:54 | we have the sidebar menus, we also have
one inside the text itself, and we have
| | 03:00 | the images that are hyperlinks,
as well as in the footer.
| | 03:04 | So what I'm going to do is change
some of these hyperlinks so that they're
| | 03:07 | properly marked up, and then you can do
the rest of them yourself, because it's
| | 03:11 | a fairly simple principle.
| | 03:12 | The basic idea here is to add a title
attribute to each of the hyperlinks to
| | 03:17 | explain further where you're going,
because, for instance, the word Home itself
| | 03:23 | doesn't actually tell you anything
about where that link is going. And unless
| | 03:26 | you add a title attribute, Home is just
a link to Home and if you go on Google
| | 03:31 | and search for Home, you get
something like 39 billion answers. You want
| | 03:36 | something more specific.
| | 03:38 | So I'll go in and edit my
markup in the index.html file.
| | 03:42 | If I scroll down, I'll find my first
menu link here. You'll see it starts with
| | 03:48 | the list attribute and then it says <a href
and in this case it just says pound
| | 03:54 | key, because I'm just pointing
it back through the current page.
| | 03:57 | If it was pointing somewhere else,
I would add a proper link to it.
| | 04:00 | Now I want to add a title attribute, so
I'll make some space and I'll just type
| | 04:04 | in title= and then Home page
of Hansel & Petal Flower Company. I'll
| | 04:18 | end that quote, save the
page, reload it in my browser,
| | 04:25 | and now when I hover over the Home
button I get that pop-up that says Home page
| | 04:29 | of Hansel & Petal Flower Company, which
means this is now what's being indexed,
| | 04:33 | and this is what the search engine sees.
| | 04:35 | More importantly, this is also what a
text-to-speech reader would read out. It
| | 04:40 | would read out link Home, Home
page of Hansel & Patel Flower Company.
| | 04:45 | When we look at images, it is a
little bit different. You'll remember down
| | 04:48 | here we have these three images and
each of them is a link to a page on
| | 04:52 | Wikipedia about this plant.
| | 04:54 | When we look at these three images,
when I hover my mouse over them, you'll see
| | 04:58 | that each of them is a link, but right
now I don't know where they're pointing.
| | 05:02 | The reality is each of these images is
actually pointing out of this website to
| | 05:06 | Wikipedia and a page about that
particular plant, but because I didn't provide
| | 05:10 | that information, a user who clicks on
it will probably be surprised to learn
| | 05:14 | that they jump out of the
website and go somewhere else.
| | 05:17 | So adding a title tag here
becomes extremely important.
| | 05:20 | So I'll go into mark up again and
scroll down to where I have my images. Here
| | 05:26 | they are in the gallery lists. I'll
find my anchor tags, and then I'll add a
| | 05:32 | title tag. And I'll say Bougainvillea,
which is the plant, on Wikipedia.org.
| | 05:41 | I can do the same for the two other
plants. So I'll go and add a title tag here,
| | 05:49 | title="Chrysanthemum on Wikipedia.org",
and finally, this one, Golden
| | 06:05 | Barrel Cactus on Wikipedia.org.
| | 06:11 | When I save this and I reload the
page, you'll see that as we hover over
| | 06:16 | each link, we get a message saying, that
this is a link to the plants on Wikipedia.org.
| | 06:22 | So now we provide enough information
for the person visiting this site to know
| | 06:26 | whether or not they want to click on
this link and follow it, or whether they
| | 06:29 | want to wait and do it later.
| | 06:31 | Without the title tag, they would not
know where this link is leading and would
| | 06:34 | probably assume it's leading to just
a larger version of the same picture.
| | 06:38 | Adding a simple title tag to your links
can make a huge difference, both in how
| | 06:42 | your visitors understand your content,
and also how search engines index your
| | 06:46 | pages for future visitors.
| | Collapse this transcript |
| Marking up images| 00:00 | The Internet is a fantastic medium for
sharing images, but unfortunately, not
| | 00:04 | everyone can see these images.
| | 00:06 | That includes people with vision
problems, search engines, as well as people
| | 00:10 | who use browsers that have images turned off
or can't display images for some other reason.
| | 00:15 | For people who can't see the image, the
web experience can be a dull and often
| | 00:19 | confusing one if no
information about the image is provided.
| | 00:23 | That's what the alt attribute is for.
| | 00:25 | When you add an image to a web page, you
are usually doing it as an illustration
| | 00:29 | or to convey some message.
| | 00:31 | The alt attribute in the image tag
provides that message in text format so that
| | 00:36 | people can understand it and
search engines can understand it.
| | 00:39 | What is really important here is that
the alt attribute is required for web
| | 00:44 | standards compliancy;
| | 00:45 | that means if you add an image and you
don't add an alt tag, your code is invalid.
| | 00:50 | It needs to be there.
| | 00:51 | The alt tag needs to be in every
single image tag for the code to be valid.
| | 00:56 | The accessibility benefit of
adding an alt tag is pretty obvious.
| | 01:00 | When you add an alt tag, you are adding
a text description of the image, meaning
| | 01:05 | if you can't see the image you see the
text description instead, and if you're
| | 01:08 | accessing the website using a text-
to-speak browser, you get that text
| | 01:12 | description read back to you.
| | 01:14 | The SEO benefit is directly related to
the accessibility benefit because the
| | 01:18 | search engine cannot see your image.
| | 01:21 | The search engine relies entirely on
your alt description to understand what
| | 01:25 | this image is, so that it
can be indexed properly.
| | 01:28 | That means if you provide a good
description of your image, the search engine
| | 01:32 | will understand what it is.
| | 01:34 | Unfortunately, some people use this to
try to up their search engine ranking.
| | 01:39 | They put in images in their pages and
stack them with alternate descriptions
| | 01:43 | that often have little to do with the article
and have nothing to do with the image itself.
| | 01:47 | This might seem like a good idea, but
the search engines are on to them, and
| | 01:52 | this will actually hurt your search
engine ranking quite dramatically.
| | 01:55 | So when you add an alt description to
your images, make sure that you do it
| | 02:00 | properly and that you
actually describe the image.
| | 02:03 | The image markup looks a lot like
the anchor markup, with a couple of
| | 02:06 | small modifications.
| | 02:08 | You start with the image tag.
| | 02:10 | You then add the source attribute
which points directly to the image.
| | 02:13 | This is because the image
itself doesn't live on your page;
| | 02:16 | the image lives somewhere else and
it's called in through a hyperlink.
| | 02:20 | So in this case, I'm using a root
relative link to point to an image called
| | 02:24 | morten.jpg in the Images folder.
| | 02:27 | Then you add the alt tag.
| | 02:29 | The alt tag is simply alt= and then
inside quotations marks you type out the
| | 02:33 | description of the page.
| | 02:35 | And then inside the quotation marks, you
type out the descriptions of the image.
| | 02:39 | When you have done all this, you close
the tag, because the image tag doesn't
| | 02:43 | wrap around anything, since
it's only bringing an image in.
| | 02:47 | Depending on the function of the
image on the page, what you put in the
| | 02:50 | alt variable will vary.
| | 02:53 | If the image contains information that
is pertinent to your article or the image
| | 02:57 | itself is descriptive, we use the alt
tag to describe the image or describe how
| | 03:02 | it relates to the article.
| | 03:04 | If the image is inside a link element,
so when you click on the image, you
| | 03:07 | follow a link, the alt
variable describes the link target.
| | 03:12 | In other words, the alt variable and the
title variable from the link should be the same.
| | 03:18 | Finally, if the image is added as
decoration only and has no relation to the
| | 03:22 | topic and no relation to anything else
in the page, you should still add the
| | 03:27 | alternate description
variable, but you leave it empty.
| | 03:30 | So you type out alt= and
then just two quotation marks.
| | 03:33 | That way the browser will know, here is
an image, it has no value to the story,
| | 03:38 | so I will simply ignore it.
| | 03:41 | In our example project we have four
images: one big image at the top of the
| | 03:45 | story that relates to the story and
three images that link out to other places.
| | 03:49 | Now we can go and change the markup
so that all these images validate and
| | 03:53 | have the correct markup.
| | 03:54 | So I'll go in and open index in my
Notepad, and then I will find my images.
| | 04:01 | The first one is in the
first part of my paragraph.
| | 04:05 | You find it here, inside the figure tag.
| | 04:08 | It says image class="center" and then
we have the source link to the image
| | 04:12 | itself, but we don't have a title.
| | 04:14 | So here I will add a title describing the image.
| | 04:17 | In this case the image is "Yellow
Pansies in a pot outside a house."
| | 04:27 | I will end the image tag and now when I
save it, I can go and open the page in
| | 04:34 | my browser and when I hover my mouse
over the image, you will see we get that
| | 04:40 | message, "Yellow Pansies
in a pot outside a house."
| | 04:43 | That also means that the search
engine will now index that image as Yellow
| | 04:47 | Pansies in a pot outside a
house, instead of just an image.
| | 04:51 | Looking at the images below, you will
see that these images point to another
| | 04:55 | source, and based on the rules about
how to use the alternate tag, we now have
| | 04:59 | to match the alternate description of
each of the images to the title tag of the
| | 05:05 | links that are pointing elsewhere.
| | 05:07 | So I will go back to my markup and find
these images and then I will copy out
| | 05:14 | the title variables and add them
to the alt variable in the images.
| | 05:18 | So I will copy this one, and then say
alt equals, and I will paste it in.
| | 05:26 | And then I will do it for
this one and for the last one.
| | 05:35 | Now this might seem like doing twice
the work for the same results, because as
| | 05:51 | you saw, before I added the alt
variables, when I hover over the image, I can
| | 05:56 | see where it's pointing.
| | 05:57 | Now the reason why you need to do
this has nothing to do with the link;
| | 06:01 | it's because you need to provide
information about the image itself and its
| | 06:05 | relation to the rest of the content on
the page, regardless of whether or not
| | 06:09 | it's wrapped in a link.
| | 06:10 | So the fact that it's wrapped in a link
and that the link has a title tag has no
| | 06:15 | impact on the image itself.
| | 06:16 | The image still needs an alternate description.
| | 06:19 | When I reload the page, it doesn't seem
like there's any difference, because we
| | 06:23 | still get the same message.
| | 06:24 | The difference only kicks in if
something goes wrong with this page.
| | 06:27 | For example, if I go in and I right-
click on the image and go to Inspect
| | 06:32 | Element, and I break the link to the image--
let's say, for instance, it wouldn't
| | 06:37 | load from the server or something like that--
| | 06:39 | if I go in and take this link out, you
will see that in its place, we get the
| | 06:43 | description of the image itself.
| | 06:46 | And because this image was a link, the
link now wraps around this text description.
| | 06:50 | Without the text description we wouldn't
see this link, so we would have an empty
| | 06:54 | spot without a link and no way
of following that link anywhere.
| | 06:58 | Though the alt attribute is required
when posting an image on a web page, it's
| | 07:02 | often overlooked because images
work even without the attribute.
| | 07:06 | Adding the alt attribute to your images
ensures that they get indexed properly
| | 07:09 | by search engines and that non-visual
users can still glean the information
| | 07:14 | they contain.
| | Collapse this transcript |
| Creating a proper image header with CSS| 00:00 | A common element in websites is an image header.
| | 00:03 | By that, I mean the use of a large image
or logo image at the top of every page,
| | 00:08 | like you see right here,
this large image header.
| | 00:11 | This ensures a visual
identity and can be impactful.
| | 00:15 | However, the logical way of doing it,
simply adding an image to the top of the
| | 00:18 | page, it's not really the
correct way of doing it.
| | 00:22 | If you add an image, you're not
providing a header with text content, just
| | 00:26 | a link to an image.
| | 00:27 | There's a better way of doing this.
| | 00:29 | With some clever CSS, you can get a
header that has the correct text elements
| | 00:33 | and still displays as if it was an
image inside browsers, and you can make that
| | 00:39 | header image link back to the home
page just as if it was an image.
| | 00:43 | That sounds confusing
until you see how it's done.
| | 00:46 | So let's first take a look at what we
have right now and why this isn't the
| | 00:49 | right way of doing it.
| | 00:50 | So what I have here at the top is this
big image, and if you click on it you go
| | 00:55 | back to the home page, so it seems like
it works the way it's supposed to. Yes?
| | 00:59 | Well, if we turn Styles off and then
disable his image by breaking the link, you
| | 01:09 | immediately see the problem.
| | 01:11 | Because it was an image, there
is no text information here.
| | 01:14 | So for a person who's not seeing the
image, what they see is the first piece of
| | 01:18 | text information, namely Main Menu,
which is the menu header for the Main Menu,
| | 01:23 | hardly what you want to
display as a title of your site.
| | 01:26 | A better option would be to add actual
text as your header, but if you do that,
| | 01:31 | then you don't have the image.
| | 01:33 | Well, you can't have the image,
but you have to know how to do it.
| | 01:36 | So first I'm going to add just the text
I want in the header and then we'll add
| | 01:41 | the image afterwards.
| | 01:42 | So let's go to the mark up in our
project file and take a look at what it
| | 01:49 | looks like right now.
| | 01:50 | So when we scroll down, you'll
see here on line 18 we have this div
| | 01:54 | id="header-image" and then there's
an anchor and then the image itself.
| | 02:01 | So what I want to do is
replace this with some text.
| | 02:03 | So first, I'm going to a new
HTML5 element called hgroup.
| | 02:08 | This is not age group,
as in the age of a person;
| | 02:11 | it's hgroup as in group of headings.
| | 02:14 | So I'll end that type first so that
there's no confusion, and then inside here I
| | 02:19 | want to add both an h1 and an h2 header,
because I want the h1 to say Hansel &
| | 02:26 | Petal Flower Company and I want
the h2 to say, from our garden to your
| | 02:30 | home, which coincidentally matches
what the graphic says right here.
| | 02:38 | So I'll add an h1 first. Say Hansel &
| | 02:45 | Petal Flower Company, and then I'll add the h2.
| | 02:51 | It says, From our garden to your home.
| | 03:01 | And then because I want this to be a
link, I'll add a link around Hansel &
| | 03:05 | Petal Flower Company.
| | 03:06 | So I'll go down here and I'll simply
borrow the link code from the image we had
| | 03:11 | before and I'll wrap it around the
text, Hansel & Petal Flower Company.
| | 03:17 | Then because this link is a link,
it needs a title tag, so I will
| | 03:20 | say title=Hansel &
| | 03:26 | Petal Flower Company home page.
| | 03:31 | Now I can delete the code that calls the
image and save the page, and when we go
| | 03:37 | back to the page now, you'll see,
instead of the image, we have this Hansel &
| | 03:41 | Petal Flower Company link,
and then the subtitle.
| | 03:44 | The next step is to add the image back in.
| | 03:46 | So here I want to do two things.
| | 03:48 | I want to add the image as a background
element, and then I also want to hide the text.
| | 03:53 | This is all done in CSS, but first we
need to create some IDs to attach CSS to.
| | 03:59 | So I'll go back into my markup,
and then for the h1, I'll add the
| | 04:02 | id="site-title" and for the h2
I'll add the id="site-description".
| | 04:13 | Now I can create CSS styles
that hook up to these IDs.
| | 04:17 | I'll go and open my style sheet and then
under Header I can add some new styles.
| | 04:26 | So I'll go here and I'll create a
new style called site-title, because
| | 04:31 | that's the new ID, and then I'll say a,
because I want to target the anchor
| | 04:38 | inside, meaning the link.
| | 04:41 | The reason why I do this is because I
want the image I place there to become
| | 04:45 | clickable so that I can
go back to the home page.
| | 04:47 | Now, I need to add the background image.
| | 04:50 | So I will say background:
| | 04:51 | url and then I'll point to the image.
| | 04:56 | In this case it's under images/headerBanner.png.
| | 05:04 | I don't want this image to repeat, so I'll just
set it to no-repeat and then I can now save it.
| | 05:10 | So I've saved the style sheet and index.html
page and I'll reload it in my browser.
| | 05:15 | Now you see we have the background
image, but the background image only spans
| | 05:19 | the length of the text itself.
| | 05:21 | I want the background image to
be the same size it was before.
| | 05:24 | So what I want to do is match the size of
this box to the size of the image itself.
| | 05:28 | I already know that the image is 183
pixels tall and 900 pixels wide, so I can
| | 05:34 | go in and add that to my styles.
| | 05:36 | So I go and add a new line and say height:
| | 05:39 | 183px and then width:
| | 05:42 | 900px, and because I want it to display
as a block element so that it wraps
| | 05:48 | around, I have to set display to block.
| | 05:53 | Now when I reload the page, you'll see
the image is the size I want, and you
| | 05:58 | notice that wherever I hover
inside the image, it's clickable.
| | 06:02 | So I'm almost where I want to be.
| | 06:03 | The only thing that's missing is
that I can still see the text Hansel &
| | 06:06 | Petal Flower Company.
| | 06:07 | So I need to get rid of that.
| | 06:09 | And I'm going to do this the same way
we got rid of the section header.
| | 06:12 | So I'll go in and finally
say text-indent:-9999px.
| | 06:20 | Reload one final time, and you see
now the text is gone because it's been
| | 06:23 | indented to the left so far
that you can never see it.
| | 06:27 | That leaves us with just one problem,
the subtitle From our garden to your home.
| | 06:31 | We need to get rid of that as well.
| | 06:33 | So I'll go back in and create a new style
for the site-description, and I'll use
| | 06:42 | the same text indent trick we
did with the section-headers.
| | 06:45 | So I'll first position it
absolutely, and then I'll do text-indent.
| | 06:58 | Reload the page and we now have that
header image clickable, containing the text
| | 07:04 | information we need, and it
doesn't display the text.
| | 07:07 | So if now go and Disable Styles, you'll
see that the header of the page now is
| | 07:12 | Hansel & Petal Flower Company,
| | 07:14 | From our garden to your
home, rather than nothing.
| | 07:17 | Of course, this still doesn't
look exactly the way we want it to.
| | 07:23 | I need to work a bit on my margins
here and get rid of that hover effect, but
| | 07:26 | that can be done later on.
| | 07:28 | This is the general principle of
adding a proper page header and you can also
| | 07:33 | use this to create any other image
buttons, so that the image buttons always
| | 07:37 | contain real text, in
case the image doesn't work.
| | 07:40 | By adding and hiding header text at the
top of your site and adding an image
| | 07:43 | background to the header, you get
all the benefits with none of the pain.
| | 07:47 | The page has a proper text header
readable by browsers, people, and search
| | 07:51 | engines alike, and for those using a
visual browser the image and logo will
| | 07:54 | display as intended.
| | 07:56 | The same technique can and should be
used any time you want to replace text
| | 08:00 | with an image. That way you preserve
the text semantics, and still get the
| | 08:04 | graphic display.
| | Collapse this transcript |
|
|
7. Creating Accessible and Searchable NavigationCreating an accessible menu with an unordered list| 00:00 | Good navigation is vital for
a website to work properly.
| | 00:04 | If the user can't figure out how to
navigate the website and get to the
| | 00:07 | different sections, the
site is basically useless.
| | 00:11 | Website navigation usually takes the
form of menus, and these menus can be
| | 00:15 | created in many different ways.
| | 00:17 | However, if you're coding with
accessibility and SEO in mind, there's
| | 00:20 | really only one way to do it
right: all menus should be lists.
| | 00:25 | If you think about a menu, it's really a
list of links that point to something else.
| | 00:31 | Therefore, using a list to
create a menu is quite logical.
| | 00:35 | However, in the past, creating a list
that displayed horizontally for instance
| | 00:39 | was complicated, so therefore
people used other means to create menus.
| | 00:43 | But today there's no reason to do that.
In fact, not using lists doesn't make
| | 00:49 | any sense at all, because it's much easier to
create navigation with lists than without them.
| | 00:54 | The accessibility benefit of using
lists for menus is that once you turn the
| | 00:58 | Styles off, a list will
display as a bullet or numbered list.
| | 01:02 | Therefore, they're easy to parse for
the person visiting the site, even if they
| | 01:06 | can't see the styling around it, and
it's obvious that this is a list of links,
| | 01:11 | rather than just a cluster of links.
| | 01:13 | The SEO benefit is similar.
| | 01:16 | Once you put menu items into a list, a
search engine will see these menu items
| | 01:21 | as a group and handle them accordingly.
That means a search engine will pretty
| | 01:25 | much understand that this is a menu
and then treat these menu links with the
| | 01:30 | attention they deserve.
| | 01:32 | If you've been following this course,
and you've been making your own site based
| | 01:36 | on the exercise files, this is the time
to go grab the exercise files for this
| | 01:41 | movie and pull them into your project,
because I've made some subtle changes to
| | 01:45 | the HTML and CSS, just to clean it up a bit.
| | 01:48 | If you want everything to match
exactly with what I'm doing, you have to move
| | 01:52 | these files over, but if you don't care,
you can just continue with the files
| | 01:55 | you have. It's up to you.
| | 01:58 | Going in and looking at the index.html
file in the Notepad, you'll see we already
| | 02:03 | have a set of lists, we have these menus.
| | 02:06 | We have the Main Menu, we have three sidebar
menus down here, and we have a footer menu.
| | 02:15 | Let's say I want to add a new menu at
the top of my site. I can then create
| | 02:19 | new menu using a list.
| | 02:21 | So first I have to create a new widget,
because that's how I structured my site,
| | 02:26 | so I'll basically just copy what's down here.
| | 02:29 | Because I'm using HTML5, I want to wrap
all my menus in a nav element, telling
| | 02:34 | the browser, this is navigation.
| | 02:36 | So I'll start with a nav tag and
provide an ID, so I'll call this one firstWidget.
| | 02:44 | And then I can also give it the class="widgets,"
so that all the styles that are
| | 02:48 | applied to the other widgets are applied
to this widget too, and then I'll close
| | 02:53 | my nav tag, so that I don't forget it later.
| | 02:56 | Inside my nav tag I can now add a
list for a menu or a heading or both.
| | 03:03 | In this case, I only want the menu,
so I'll just start a new list.
| | 03:07 | I'll start an unordered list, and
then close the unordered list. And
| | 03:12 | inside here, I'll have all my list
items that will become the menu items.
| | 03:17 | So I'll start with creating a new list
item and close it, and then inside that
| | 03:22 | list item I want to put the
menu items I'm going to use.
| | 03:26 | So I'll create a menu item called Menu
item 1, and then I'll create a new list
| | 03:32 | item and call it Menu item 2. Then I'll
create a third one and call it Another menu item.
| | 03:49 | When I save this and I open the site in
my browser, as you now see a new menu on
| | 03:55 | the side, as you can see right
here, that displays as a list.
| | 03:59 | Now you'll notice that none of the
styles from the menu below carry over. That's
| | 04:05 | because the styles that styled this
menu to look the way it does are actually
| | 04:09 | attached to the anchor
tags, not to the list tags.
| | 04:12 | That's because when I designed this
site, I wanted it to be so that I didn't
| | 04:16 | have to click on the text itself to go
to the link, I just needed to hover the
| | 04:19 | mouse anywhere inside the area
that that menu item contains.
| | 04:24 | So to trigger these effects we need to
add an anchor tag to each of our menu items.
| | 04:30 | So I'll simply go in here and inside the
list item, I'll create an anchor item, set
| | 04:35 | the href to pound for now. Then it
points to the current site. And give it a
| | 04:42 | title, and I'll just say Menu item 1.
| | 04:46 | And I'll close the a tag on the other
side, save it, and now I can test that one
| | 04:54 | Menu item to see if it works, and it does.
| | 04:56 | As you can see, I've now borrowed the same
styling that's applied to the other menu
| | 05:01 | items at the new menu at the top here.
| | 05:05 | So to apply to the other two items, I
just do the exact same thing again, a
| | 05:08 | href="#" title="Menu item 2" and then
end the a tag, and finally, the last one.
| | 05:22 | What you're seeing here is that all of
these things that I have been talking
| | 05:25 | about throughout this course
are starting to come together.
| | 05:28 | We're working with lists, I'm attaching
links to the list items, I'm attaching
| | 05:34 | title attributes to all the links, so
they make sense for the browser, for the
| | 05:39 | search engines, and for the person
visiting them, and because I'm using lists as
| | 05:43 | menus, they're
automatically displaying as lists.
| | 05:46 | So when I now save this new menu, reload
the page, you'll see I have a menu that
| | 05:51 | works the same way as the other ones do,
and if I go and turn the Styles off and
| | 05:57 | scroll down, you'll see my new
Menu appears as a list in my content.
| | 06:03 | By putting your navigation menus in
lists, you not only make them easier to
| | 06:06 | access for your visitors, but they
also become easier to manage for you.
| | 06:11 | Adding or subtracting a menu item
becomes a matter of adding or subtracting
| | 06:14 | a list item.
| | Collapse this transcript |
| Creating and hiding nav headings and skip navigation links| 00:00 | A big part of accessibility is adding
additional information to the person
| | 00:04 | accessing the site,
explaining what they are reading.
| | 00:07 | This is especially true when it comes to menus.
| | 00:09 | For visitors using a visual browser,
having a menu heading and skip menu button
| | 00:14 | is pointless, because
they can see what's going on.
| | 00:16 | But for non-visual visitors, a menu
heading and skip menu button can mean the
| | 00:20 | difference between trying to figure out
what all these links are doing together
| | 00:24 | in a big cluster, or listening to a
long list of links, or just jumping
| | 00:28 | straight to what matters.
| | 00:30 | Adding and hiding menu headings and
skip navigation links is an easy way of
| | 00:35 | making your site more accessible and
can be done with a small piece of CSS.
| | 00:41 | Earlier in this course, we added
a menu heading to the Main Menu.
| | 00:45 | Though we can't see it when you use
the visual browser, if we turn off our CSS
| | 00:50 | styles, you can see it
this Main Menu right here.
| | 00:53 | This is the Main Menu heading.
| | 00:54 | We even have a Main Menu
description underneath it.
| | 00:57 | What we want to do now is add headings
to our sidebar menu lists and also add
| | 01:02 | skip navigation buttons throughout the
site, so that a person visiting the site
| | 01:07 | using a text-to-speech browser can skip
the menus if they don't want to listen
| | 01:11 | to every single item.
| | 01:13 | This is actually a really important tool
and it can be used in many different ways.
| | 01:17 | Let's start with the Main Menu.
| | 01:19 | I want to add a simple link at the top
that lets you skip directly to the content.
| | 01:24 | First, I will open the index page in my Notepad
and find the header-navigation. It's right here.
| | 01:31 | And we already have this h1 for
the Main Menu and the description.
| | 01:35 | So what I want to do now is
add a div that has a link in it.
| | 01:40 | So I will give this div the class= "skip-
button" and then inside the div, I want
| | 01:50 | to add an anchor with some text in it.
| | 01:52 | Let's say <a href, and this time I
want the link to target a specific
| | 02:00 | point within my page.
| | 02:02 | I want to target where the actual
content starts in the page, and I know that
| | 02:06 | the content starts here on line 44,
with this article that has the ID content.
| | 02:11 | So what I want to do is create a link
that targets this ID. It's easy to do.
| | 02:16 | I will just type in # which means
ID on the current site, and then say content.
| | 02:22 | Now when someone clicks on the link,
they will jump directly to the content
| | 02:25 | section on the page.
| | 02:28 | Because it's a link, I need a title, so
I will say title="Skip to content" and
| | 02:34 | then I will put in the actual text
that the anchor will wrap around, "Skip to
| | 02:39 | content" and I will end my anchor.
| | 02:42 | When I save this and reload my browser,
we now have a link that says Skip to
| | 02:48 | content and if I click on it,
we jump down to the content.
| | 02:51 | So this is precisely what we want.
| | 02:54 | When someone is visiting the site
using a text-to-speech browser, it should
| | 02:58 | hit that button that says Skip to content
before they hit the Menu and after the Menu title.
| | 03:04 | So they know what the menu is about,
then they get the option of skipping the
| | 03:07 | menu, and then they get the menu itself.
| | 03:09 | Now all I have to do is hide this Skip
to content button, so it doesn't display
| | 03:13 | for people who are using visual browsers.
| | 03:16 | To do that, I have to go into my style
sheet, so I will open the style sheet.
| | 03:20 | And I have already created the
function to hide this content earlier, so I
| | 03:25 | just scroll down to my Global styles where I
already have the style for the section-heading.
| | 03:29 | So now I can just add on this
new class that I have created.
| | 03:35 | So I will go check what it was
called again, it's called Skip button, so
| | 03:39 | I'll copy that, I put a comma after
section-heading to say, here's another
| | 03:44 | style this will apply to,
and I type punctuation mark, and
| | 03:48 | skip-button, save that, reload the
page in the browser, and you will see that
| | 03:53 | the skip button is gone.
| | 03:55 | But if I go back and look at this
without styles, you see the Skip to
| | 03:59 | content button is here.
| | 04:01 | Now I can do the same for our sidebar.
| | 04:05 | First I will scroll down to my
sidebar and then I can add headings and skip
| | 04:12 | buttons for each of the menus.
| | 04:15 | So I'll start up here with the first
menu. It's one that's called firstWidget,
| | 04:19 | so I will put in an h1, class="
section-heading" so that it hides,
| | 04:27 | and then call it First widget menu.
| | 04:33 | Just to check that everything works, I
will go reload my page, and I should not
| | 04:38 | see anything here, but if I go and turn
the styles off and scroll down, I should
| | 04:45 | see the menu title, First widget
menu. Then I can add the skip link.
| | 04:50 | In this case, I am just going to scroll
up and copy the link I created earlier.
| | 04:54 | So I will just go and grab the entire
link, copy it, go down, and paste it in.
| | 05:03 | Now the reason why I'm doing it is
because I want to use the same format, but I
| | 05:07 | am going to skip to somewhere else.
| | 05:09 | In this case, I want to
skip down to the next widget.
| | 05:11 | And as you can see, the next widget
has the id widget1, so I will copy out
| | 05:15 | widget 1 and paste that in instead of
content, and then I say Skip to widget
| | 05:23 | 1, Skip to widget 1.
| | 05:30 | Now when I reload the page and turn
off the CSS, you will see we now have
| | 05:38 | the menu header, plus Skip to widget 1, which
will automatically jump us down to widget 1.
| | 05:42 | Now that you know how to do it, you can
do it for the rest of the sidebar widgets.
| | 05:47 | But I am going to do one final thing
and this is just something I like to do,
| | 05:50 | because I think it's kind of funny, and
it's also quite useful for people who
| | 05:53 | access my site using a text-to-speech browser.
| | 05:56 | I will go all the way to the bottom of
the page. In the footer, and then below
| | 06:02 | the footer, I'll paste in
that skip link one more time.
| | 06:04 | And I will point the anchor to the first
div on the entire page, which I know is
| | 06:11 | called id page. Then I will say, "Go
back to the top," and then I will write in
| | 06:19 | here, "You have reached bottom.
| | 06:25 | Click here to get back on top."
| | 06:28 | I will save it, and when I reload my
page again and turn styles off, you'll see at
| | 06:36 | the very bottom of the page, there is
a link that says, "You have reached the
| | 06:39 | bottom. Click here to get back on top!"
| | 06:41 | And when you click it, you jump back
to the top of the page and you can read
| | 06:44 | everything all over again.
| | 06:46 | Accessibility has a lot to do
with making things easier for people.
| | 06:50 | Adding navigation headings and skip
links might seem unnecessary to a sighted
| | 06:54 | developer, but it's a huge help to
those accessing content through a
| | 06:58 | screen reader.
| | Collapse this transcript |
| Giving navigation links proper focus with style| 00:00 | You can add what's called pseudo-classes
to active elements on your site to make
| | 00:04 | them more interactive.
| | 00:05 | The most common pseudo-classes are
found when interacting with links.
| | 00:09 | The hover class is probably the most
common among them, and it's one that's
| | 00:12 | activated every time you
hover your mouse over a link.
| | 00:16 | One pseudo-class that doesn't get the
attention it deserves is the focus class.
| | 00:20 | Focus can be given to an item with
a keyboard or another interaction
| | 00:24 | device and should be treated with the same
level of importance as the other pseudo-classes.
| | 00:29 | This is especially true
if you're creating menus.
| | 00:32 | Always assume people will try to
navigate your menu using the tab button.
| | 00:36 | If you don't have a focus pseudo-class
defined in your style sheet, they won't
| | 00:40 | know what menu item they are actually on.
| | 00:43 | This brings me to an important point.
| | 00:45 | When we're talking about accessibility,
we are not just talking about people who
| | 00:49 | can't see what's on your site, like
people with severe vision problems who are
| | 00:53 | blind, or search engines.
| | 00:56 | We are also talking about people who
can't access your site through other means,
| | 01:00 | for instance, a person who can't use a
mouse, or someone who isn't blind but
| | 01:04 | is really hard of seeing.
| | 01:06 | For them, we need to add visual cues
when they use things like a keyboard to
| | 01:10 | interact with your site, and this
is where the focus class kicks in.
| | 01:13 | You'll remember that if we navigate
around the site, you will see every time you
| | 01:17 | hover over link, first of all you see
the hand pointing icon, and secondly,
| | 01:23 | under for instance, the main menus, you
will see that the Main Menu items change
| | 01:28 | appearance when you hover over them.
| | 01:29 | This is the hover pseudo-class.
| | 01:32 | The problem is, when I navigate this
site using the Tab button on my keyboard, I
| | 01:36 | navigate through links.
| | 01:38 | But I don't know where my tab button is,
I don't know want item has focus, and I
| | 01:42 | can't see what's going to happen.
| | 01:44 | If you look down at the bottom left
corner of my browser window, you'll see that
| | 01:48 | those links appear, but this isn't good enough.
| | 01:51 | I want to visually display
where the focus is currently at.
| | 01:56 | For that I am going to add one
simple style in my style sheet.
| | 01:59 | So I will go to my Accessible
site and open styles in the Notepad.
| | 02:04 | From here, I will scroll down to my
Global styles and find where I have all
| | 02:09 | my, a pseudo-classes.
| | 02:10 | So here I have the anchor class, which
is just a link, and then I have the active
| | 02:14 | and hover pseudo-classes.
| | 02:15 | Here I want to add another new
pseudo-class. I'll call it a:
| | 02:22 | focus.
| | 02:23 | This is how you mark up pseudo-classes,
and whatever style I put in here will be
| | 02:28 | applied every time an anchor gets
focused through a keyboard or other device.
| | 02:33 | Now I can apply a style that will be
triggered every time someone interacts with
| | 02:37 | the link using a keyboard
or another input device.
| | 02:40 | What I want to happen is there should
be a blue box around the link itself.
| | 02:45 | But I don't want that blue box to
hamper with the rest of the content.
| | 02:49 | For that I am going to
use the attribute outline.
| | 02:52 | Unlike border, which interacts with
the rest of the content, outline will
| | 02:56 | literally outline whatever is
inside the CSS box you're dealing with.
| | 03:01 | So I will set that color of the
outline to 3389a9, which is a blue, and I
| | 03:06 | will set it to a solid, so that is a solid
outline, and I'll give it a width of 2 pixels.
| | 03:11 | When I save this small change and
reload my page, scroll to the top, and use the
| | 03:17 | tab button, you'll see where focus is.
| | 03:22 | Now focus is on the header, now focus
is on the Home button, now it's on the
| | 03:28 | Flower button, and so on.
| | 03:30 | And as I tab through the page, my new
focus pseudo-class highlights the content
| | 03:36 | I'm going to click if I hit Return.
| | 03:38 | So by adding that simple class, I've
now added a focus element to all the
| | 03:46 | links on my entire page.
| | 03:48 | Of course, you can get more specific,
and add different styles to different
| | 03:51 | elements so that they appear
differently when you use the focus class.
| | 03:55 | But in general, if you just create a:
| | 03:58 | focus and make that a class, then you
can style all the elements on the page
| | 04:03 | that are interacted with the keyboard.
| | 04:05 | Accommodating non standard modes of
accessing elements on your site is becoming
| | 04:09 | more and more important because
many of these non standard methods are
| | 04:13 | becoming standard.
| | 04:14 | Earlier in the course, I spoke of a
time in the very close future, where
| | 04:18 | people will surf the web using text-to
-speech browsers on their phone while
| | 04:22 | jogging or driving their car.
| | 04:23 | Likewise, I can see a time in the
future, where people use gestures or hand
| | 04:28 | emotions to select elements on a page.
| | 04:30 | This may very well be focus states,
so you need to add them to kind of work
| | 04:36 | for what's going to
happen possibly in the future.
| | Collapse this transcript |
| Creating an accessible drop-down menu| 00:00 | Drop-down menus are a
frequently used tool on the Web.
| | 00:04 | They are easy to design, they de-
clutter the page, and they allow you to jam a
| | 00:08 | lot of menu content into a small space.
| | 00:10 | Unfortunately, they're also hard to
access unless you're using a mouse.
| | 00:14 | This used to be a problem only for people
who navigated websites with a keyboard.
| | 00:18 | But it's increasingly becoming an
issue for people who navigate websites with
| | 00:22 | other devices, such as phones and
tablets, because neither have the hover
| | 00:26 | state of the mouse.
| | 00:28 | Nevertheless, if you want to make a drop-
down menu, you have to make sure you at
| | 00:32 | least make it accessible.
| | 00:34 | That means when people use a keyboard,
they should be able to get access to
| | 00:37 | the sub-elements of the drop-down menu.
| | 00:40 | To do so, you have to tap
into some simple JavaScript.
| | 00:43 | Fortunately, all the heavy lifting
has been done for you in the form of a
| | 00:47 | solution called Superfish, which
is an accessible version of the
| | 00:50 | Suckerfish drop-down menu.
| | 00:52 | Before I show you how to get it and
how to integrate it into your page, let
| | 00:56 | me just say this. I don't think drop-down
menus are a very good idea, and here's why.
| | 01:01 | They're a remnant of a
Web that no longer exists.
| | 01:04 | If you want good navigation,
there are better ways of doing it.
| | 01:08 | That said, in some situations
you have to build a drop-down menu.
| | 01:12 | If you do, you also should
always make it accessible.
| | 01:16 | And I'll show you how to do exactly that.
| | 01:19 | In our example site, we
currently have a single-level menu.
| | 01:21 | It's right at the top here and
it has just one level of content.
| | 01:26 | But what if we wanted to add a drop-down,
let's say to this Flowers button, and
| | 01:30 | make it into Products, and then it
would drop down to say Flowers, Plants,
| | 01:33 | Trees, and whatever.
| | 01:35 | There are several steps to this process.
| | 01:37 | First, we have to make the
actual menu items themselves.
| | 01:39 | And that's done in the markup.
| | 01:42 | So I'll go to my example project, open
the index page, find my menu, and then
| | 01:50 | add some new menu items.
| | 01:52 | I said I wanted to change the Flowers
menu item to be Products and then add new
| | 01:57 | items underneath it.
| | 01:58 | So I'll go in here and change the
Flowers one first, to Products, and then I want
| | 02:04 | to add more menu items.
| | 02:06 | So what I'm going to do is extend
that list item and create a new unordered
| | 02:11 | list underneath it.
| | 02:13 | I'll just close my unordered list two,
so that I know I won't break anything.
| | 02:19 | And then inside here, I can now make
new list items with the new menu items.
| | 02:26 | Just so you see what's going on here,
| | 02:28 | we have an unordered list with list
items in it, and then within the second list
| | 02:33 | item, there's a new unordered
list with its own list items.
| | 02:38 | This is how a structured drop-down menu works.
| | 02:41 | It's a nested menu within a menu.
| | 02:44 | Now I need to make the actual menu items.
| | 02:46 | So I'll just follow the
same structure I have up here.
| | 02:48 | I'll start with an anchor and then an
href and then a title, I'll close the
| | 02:54 | anchor, and then say Flowers.
| | 02:58 | And then I'll just copy this line, and
make another item and another item, and
| | 03:04 | then the second one will be
Plants, and the third one will be Trees.
| | 03:12 | I'll save this and reload my page in my
browser, and you'll see everything now breaks.
| | 03:18 | That's because right now all the
list items are using the same styles.
| | 03:23 | And the styles currently say that each
unordered list is on its own line, which
| | 03:28 | means the first unordered list is up here.
| | 03:31 | And then we have a new unordered list
that breaks everything, and then we have
| | 03:35 | the continuation of the first one down here.
| | 03:37 | To fix this and make the drop-
down work, we need to use some CSS.
| | 03:41 | Now this is not a CSS course, so I
prepared the file for you to make this happen.
| | 03:46 | You can go in and dissect
it later if you want to.
| | 03:48 | If you go to the Exercise Files for
this lesson, you'll find a single file
| | 03:56 | called stylesDropDown, so just copy
that one and dump it into your folder.
| | 04:01 | And then we'll go back to our index
page and call that new style sheet.
| | 04:06 | So I'll copy the styles.css call,
and add the new call underneath it.
| | 04:12 | This is really important, because we
want to call the drop-down styles after the
| | 04:16 | styles, because the drop-down
styles will override the other styles.
| | 04:20 | We'll call the stylesDropDown, save it,
and now when I reload my page, you'll
| | 04:28 | see that the menu has shifted to the left.
| | 04:31 | And when I hover over
Products, we get a drop-down menu.
| | 04:34 | But this drop-down menu is
not currently very accessible.
| | 04:37 | It's kind of finicky, and more
importantly, if I use the Tab key on my
| | 04:42 | keyboard, I can't access it.
| | 04:44 | I'll show you just that.
| | 04:45 | If I hit the Tab key, I can
access the main menu items.
| | 04:51 | But when I get to the drop-down
section, I can't see what I'm opening.
| | 04:57 | I'm now surfing the web blind.
| | 04:58 | I can't see the menu item
I'm currently focusing on.
| | 05:02 | And that's because I was using CSS to
activate the drop-down menu and I was
| | 05:06 | using the hover state.
| | 05:08 | But since the keyboard doesn't use the
hover state but the focus state, I can't
| | 05:12 | get that top menu item to open.
| | 05:15 | This is where the JavaScript comes in.
| | 05:17 | I need to add JavaScript to make this menu
item open, so I can see what I'm focusing on.
| | 05:23 | The issue of drop-down menus and
accessible drop-down menus has been a challenge
| | 05:27 | for web developers for a long time.
| | 05:29 | In 2003, Patrick Griffiths and Dan Webb
published an article called Suckerfish
| | 05:34 | Dropdowns on A List Apart.
| | 05:37 | And it has become the de facto standard for
how to make CSS drop-down menus on the web.
| | 05:42 | There are many versions of the
Suckerfish menu available, but after a lot of
| | 05:46 | research, I found that the most
accessible one is one called Superfish.
| | 05:51 | The Superfish menu is built around
accessibility and activates keyboard
| | 05:55 | accessibility to your drop-down menus.
| | 05:58 | It's also very easy to implement, and
I'll show you exactly how to do it now so
| | 06:02 | you can use it for this website and
for all future websites you build.
| | 06:07 | To get the Superfish menu,
simply click Download & Support and
| | 06:11 | download Superfish.
| | 06:16 | I'll extract this to my Desktop, so I
have it for future reference, and then
| | 06:29 | I'll take a look at what's in here.
| | 06:31 | If I open the Superfish file, you'll see
there's a file called example here, and
| | 06:35 | I can open that in my browser and
see how the Superfish menu works.
| | 06:41 | It's a rather advanced menu
and it has a lot of styling and
| | 06:44 | functionality options.
| | 06:45 | But what I want to do is just use
the most basic options available.
| | 06:49 | So I'll open this example file in
Notepad to see how the code works.
| | 06:54 | And what I very quickly see is that there's
some JavaScript here from Line 8 to Line 18.
| | 06:59 | And that's really all I
need to make my menu work.
| | 07:02 | So I'll copy that JavaScript out and
paste it in the head tag of my site.
| | 07:11 | So I'll make a comment here so I know
what it is, and then I'll paste in the
| | 07:19 | JavaScript. And I'll do some quick
cleaning of the code, because I'm a very
| | 07:25 | tidy coding person.
| | 07:27 | And now I need to add these JavaScript
libraries to my site so that I can call
| | 07:32 | them, and you see there are three of them.
| | 07:34 | There's the standard jQuery library,
there's a library called hoverIntent, and
| | 07:38 | there's one called Superfish.
| | 07:39 | So if I go back to the Superfish
folder, I see there's a folder called js.
| | 07:45 | And under here we have five libraries,
of which I need three. So I'll open My
| | 07:50 | Accessible Site, create new folder
call it js, and then copy in hoverIntent,
| | 07:56 | jquery, and superfish.
| | 08:01 | There is one final step.
| | 08:05 | If you look at the code we copied in,
you'll see there's a JavaScript function
| | 08:08 | that comes along with these calls to
the JavaScript libraries. It's down here.
| | 08:13 | All it does is it creates a new
function and then does something to a certain
| | 08:18 | element on the page, in this case,
an ordered list with a class sf-menu.
| | 08:21 | The problem is, our menu
doesn't have the class sf-menu.
| | 08:26 | If we scroll down, you'll see that
our menu has an id and it's main-menu.
| | 08:33 | So what I want to do is change that, so I'll
change it so it says ul# for ID, main-menu.
| | 08:41 | What this function does is it appends the
Superfish function to whatever item you point to.
| | 08:48 | So in this case, we're appending
the Superfish function, which is that
| | 08:51 | accessible drop-down, to the main menu item.
| | 08:55 | And that's exactly what we want.
| | 08:57 | So now if I save the index page with my
new JavaScript libraries and reload this
| | 09:02 | page in my browser,
you'll see two things happen.
| | 09:07 | First of all, my Products button now
has a small little arrow on it indicating
| | 09:11 | that there's something underneath it.
| | 09:13 | And you see that, when I hover over it, there's
a slight animation and delay on the menu items.
| | 09:19 | And when I use my Tab key to navigate
the page now, it opens the drop-down menu
| | 09:27 | and I can see what I'm doing.
| | 09:29 | And that's kind of the whole point.
| | 09:31 | Now I can actually use my drop-down
menu with my keyboard.
| | 09:37 | What you're seeing here is the most
basic functionality of the Superfish menu.
| | 09:40 | The Superfish menu is very advanced
and it has a lot of different types of
| | 09:44 | menus you can build and a lot of different
functionality with a lot of different styling.
| | 09:47 | You can experiment with the files
that I've given you or you can experiment
| | 09:52 | with the files that come from the Superfish
library and see how far you can get with it.
| | 09:56 | It's very powerful and it's something
that you should learn how to use, so you
| | 09:59 | can implement it on all of your sites.
| | 10:01 | If you have to have a drop-down menu on
your site, make sure it's accessible.
| | 10:05 | It's easy to test to see if your menu
is accessible. Simply use the Tab key on
| | 10:10 | your keyboard and see if it opens the submenus.
| | 10:13 | With the help of JavaScript libraries
like Superfish, it becomes easier to
| | 10:17 | build proper drop-down menus, but now your
drop-down menus rely on JavaScript to function.
| | 10:23 | And not everyone has a
browser that supports JavaScript.
| | 10:26 | In fact, a lot of browsers have
blocked JavaScript for various reasons.
| | 10:31 | If that's the case, the
accessibility part of this menu will not work.
| | 10:35 | It's a catch-22 of epic proportions and
unfortunately, there is no good solution
| | 10:41 | to this problem, except not
using drop-down menus to begin with.
| | Collapse this transcript |
| Scrapping drop-down menus for better options| 00:00 | In the previous movie we introduced
a drop-down menu to the site and we
| | 00:04 | also made it accessible.
| | 00:06 | As you can see, we now have a drop-down
item that we can access with the mouse
| | 00:11 | and you can access it with your keyboard.
| | 00:15 | If we tab through the items, we can
open the drop-down menu and access each of
| | 00:21 | these items. But I also said that I
personally don't think that drop-down menus
| | 00:25 | are a good idea and I'll explain to you why.
| | 00:28 | Drop-down menus, though they look pretty,
are actually quite inaccessible, even
| | 00:32 | if you have the access of a mouse or a
keyboard and the drop-down menu works
| | 00:37 | for keyboard, because you can't see the
contents and more importantly drop-down
| | 00:41 | menus tend to lead you to
more information about something.
| | 00:45 | Ideally, if you want to create a drop-
down menu, you should really be thinking
| | 00:49 | about doing something else instead,
and I'll show you what I mean.
| | 00:54 | This is a website we created for a
South Asian wedding company called Sapna in
| | 00:58 | Toronto. They had a very interesting
menu design that made it impossible for us
| | 01:03 | to create a drop-down menu.
| | 01:05 | As you can see, these menu items are staggered,
so a drop-down menu would look rather weird.
| | 01:09 | They also didn't want a drop-down
menu that would cover any of their content.
| | 01:13 | So what we did instead was create
landing pages for the sections that would
| | 01:18 | have drop-down menus.
| | 01:19 | For example, rather than having a drop-
down menu under Services that would then
| | 01:23 | display the different services,
| | 01:25 | when you click on the Services button,
you get to the Services landing page and
| | 01:29 | the Services landing page has two sections.
| | 01:31 | It has the main section that
gives you a synopsis of each of the
| | 01:35 | different services.
| | 01:36 | There are four services in this case
with a short breakdown of what it is, with
| | 01:40 | a title, a short description,
and then a button to see more.
| | 01:44 | In addition, we added a list of
services in the sidebar, and this addresses the
| | 01:49 | two main ways of dealing with the drop-down issue.
| | 01:52 | Rather than creating a drop-down menu,
you should create a landing page that
| | 01:56 | showcases all the options that you
would've put under the drop menu in more
| | 02:01 | detail, and then, if you wish to
always display the contents that would have
| | 02:06 | been in the drop-down menu, you should
put it somewhere, for instance, in the
| | 02:09 | sidebar, so that those menu
items are always available.
| | 02:13 | By doing that you're making
those items available at all times.
| | 02:17 | So no one needs to know that there may
or may not be more items under a drop-down
| | 02:21 | menu. It's always there and you can see
it. But more importantly, because of the
| | 02:25 | way the web works now, landing pages are
far more valuable than drop-down menus.
| | 02:30 | If someone is searching for services
online and they land on a single page that
| | 02:35 | lists out all the services in one
place and then you can click for more
| | 02:38 | information, they are far more likely
to get there than if they landed on the
| | 02:43 | front page of a site and then had to
find a drop-down menu, and then find the
| | 02:47 | item they're looking for.
| | 02:48 | This concept is based on the idea that
people don't land on your front page,
| | 02:52 | they land where they're most likely to
find the information they're looking for,
| | 02:56 | and therefore this type of
landing page works exceptionally well.
| | 03:00 | Just to give you another example of
how you can implement this landing page
| | 03:03 | idea, in addition to the Services page
that had the drop-down menu with the
| | 03:07 | four services items, we also initially
have a drop-down menu for the About page,
| | 03:12 | because this company has several
different pages listed under About.
| | 03:16 | So rather than creating one About page,
and then a bunch of other pages that
| | 03:20 | were only accessible through the drop-
down, we made a landing page for About,
| | 03:25 | and at the bottom of it we have two
additional pages you can get to through navigation.
| | 03:30 | So when you're thinking of making
a drop-down menu, think about this.
| | 03:34 | Is there a better way of doing it if
I instead create a landing page that
| | 03:38 | directs the people to those sub pages?
And can I add those drop-down menu
| | 03:43 | items to my sidebar?
| | 03:45 | You'll remember from earlier in the
course that I showed you how easy it is to
| | 03:49 | create new sidebar menus in your sidebar.
| | 03:52 | So why not, instead of putting
your drop-down menu here, simply add
| | 03:57 | the drop-down menu items to
your sidebar to make them always
| | 04:01 | accessible for everyone.
| | Collapse this transcript |
|
|
GoodbyeNext steps| 00:00 | In this course we've talked about two
important topics, Accessibility and Search
| | 00:07 | Engine Optimization, and how they can
work together to make your website more
| | 00:10 | accessible, more findable, and more useful.
| | 00:13 | But we've barely scratched
the surface of these topics.
| | 00:16 | There's a lot of interesting stuff to
learn about both accessibility and SEO,
| | 00:20 | and where better to start
learning than on the web?
| | 00:23 | The first page you should take a look at
for accessibility is the W3C's standards
| | 00:28 | page for accessibility.
| | 00:30 | The W3C or World Wide Web Consortium is
a group of people that make decisions on
| | 00:36 | how the web works and how it should
work, and they have this bucket page with
| | 00:40 | tons of information about
accessibility, about the principles behind
| | 00:43 | accessibility, and about where
to go to read about accessibility.
| | 00:47 | It's a great resource to start with to
really get an idea of the depth of this field.
| | 00:52 | When you're done with the W3C
accessibility standards page, jump over to the Web
| | 00:57 | Accessibility Initiative page. This is
also part of the W3C and there's a link
| | 01:03 | from the first page to this one.
| | 01:05 | The Web Accessibility Initiative have
concrete examples of how to do design, how
| | 01:10 | to include accessibility in your sites,
they have before and after examples and
| | 01:14 | direct examples on pretty much
everything we've been talking about here in this
| | 01:17 | course, plus a lot more.
| | 01:19 | This is the number one resource to go
to when you really want to dive into
| | 01:23 | accessibility and understand not only
why it's important, but how to implement
| | 01:27 | it and how it will make your sites better.
| | 01:29 | As for Search Engine Optimization,
there are a million resources and there is a
| | 01:34 | lot of confusion about
what it is and how it works.
| | 01:38 | This is because the search engines
change all the time, and Search Engine
| | 01:43 | Optimization companies are always
trying to figure out how the search engines
| | 01:46 | work so that they can optimize
their sites for them and trick them into
| | 01:51 | giving you better results.
| | 01:52 | My approach to search engine
optimization is that if I create quality content
| | 01:58 | and mark it up right, and make it
accessible to the search engines, they will
| | 02:02 | get good ranking on search engines.
And truth be told, this actually works
| | 02:07 | just as well as using some black magic to
make your websites more search engine friendly.
| | 02:12 | If you just follow web standards and
follow what is provided by the search
| | 02:16 | engines themselves, like for instance,
what you can find on the Google Webmaster
| | 02:21 | Central website, you will find that
your website will be indexed on the search
| | 02:25 | engines and people will find them.
| | 02:27 | When it comes to SEO, following the
rules and playing your cards right and in
| | 02:31 | the right order is extremely important.
| | 02:34 | And going to Google Webmaster Central
and using the tools they have will get
| | 02:38 | you pretty much all the way there.
| | 02:40 | If you want to really dive into
search engine optimization, you should also
| | 02:45 | check out the Search Engine
Optimization Starter Guide published by Google.
| | 02:49 | This is a PDF document you can
download and read that outlines not only what
| | 02:54 | search engine optimization is, but
also how search engines work and how your
| | 02:58 | website interacts with them and they
interact with your website, to give your
| | 03:02 | firm understanding of how this all
works. Because like I said in the
| | 03:05 | beginning, although we are covering search
engine optimization in relation to accessibility,
| | 03:10 | this is just the tip of the iceberg, and
following these principles alone will
| | 03:14 | not get you top ranking on Google.
| | 03:17 | To get top ranking on Google, you have
to have excellent content, good links,
| | 03:22 | and people who really love your site.
| | 03:25 | Now that you've seen how some simple
accessibility principles can not only make
| | 03:28 | your site accessible to more people,
but also make it more findable through
| | 03:32 | search engines and social media, it's
time to start making accessibility an
| | 03:36 | integrated part of your web development process.
| | 03:39 | It may sound cheesy, but with
better accessibility, everybody wins.
| | Collapse this transcript |
|
|
