IntroductionWelcome| 00:00 | >> Hi, my name is Zoe Gillenwater.
| | 00:02 | I'm a web designer and author, focusing on accessibility,
CSS and other web standards development topics.
| | 00:09 | I've worked in both the government and the private sector.
| | 00:11 | And I'm part of the Adobe task force for the web standards project.
| | 00:16 | We're going to be learning about web accessibility principles.
| | 00:19 | We'll discuss what accessibility means, what the
standards are and how you can meet or even exceed them.
| | 00:25 | We'll go over how to set up your computer
for testing the accessibility of your sites.
| | 00:29 | And we'll build an example site throughout the title so you can learn how
to incorporate accessibility techniques into your initial development.
| | 00:37 | But we'll also talk about ways to convert or improve existing pages.
| | 00:41 | I'll show you how to create accessible layouts, text, navigation
elements, images, tables and forms, as well as how to style them with CSS,
| | 00:50 | so you can successfully bound successibility
with other site design requirements.
| | 00:55 | We'll be using Dreamweaver throughout.
| | 00:57 | But the principles and techniques shown can be done in any HTML editor.
| | Collapse this transcript |
| Using the exercise files| 00:00 | >> If you are a premium member of the lynda.com online training
library, or if you are watching this tutorial on a disk,
| | 00:06 | you have access to the exercise files used throughout this title.
| | 00:10 | The exercise files for this title are arranged by chapter and movie.
| | 00:15 | Inside each chapter folder are a series of
folders, one for each movie within the chapter.
| | 00:20 | If you're watching the chapter from beginning to end, you
can start in the starting folder within each chapter folder.
| | 00:26 | It contains all of the files you need to work through the chapter.
| | 00:30 | If you're going to watch various movies throughout different chapters,
you can immediately jump to that movie's folder to find the starting file
| | 00:39 | and associated files that you need to perform the exercises in that movie.
| | 00:44 | If you are a monthly or annual subscriber to
lynda.com, you don't have access to the exercise files,
| | 00:49 | but you can file along with your own files
using the steps that are described.
| | 00:54 | Let's get started.
| | Collapse this transcript |
|
|
1. Getting Started with Web AccessibilityWhat does accessibility mean?| 00:01 | >> Before we talk about how to make your websites accessible, we need to
give a definition of what accessibility actually is and what it isn't.
| | 00:09 | Web accessibility is basically allowing
people with disabilities to use the web.
| | 00:14 | This includes all disabilities that would affect web access.
| | 00:17 | For instance, visual disabilities, such as
blindness, tunnel vision or even low vision;
| | 00:23 | auditory disabilities, such as deafness and speech disabilities.
| | 00:27 | Physical limitations can also affect use of the web, such as
even arthritis or Parkinson's Disease; learning disabilities,
| | 00:34 | such as dyslexia, and other cognitive and neurological disabilities.
| | 00:39 | There are some concepts that web accessibility is frequently confused with.
| | 00:43 | Accessibility overlaps with, but is not the same, as usability.
| | 00:47 | Usability is designing web pages to be more
effective, efficient and satisfying for all people.
| | 00:53 | Accessibility addresses issues that put people with
disabilities at a disadvantage when they're using the web.
| | 00:59 | Accessibility is also not the same as device independence.
| | 01:03 | This is the concept of designing websites so that they can be
used with a wide variety of devices that have access to the web,
| | 01:10 | including small screen devices, such as
mobile phones and PDAs, and older browsers.
| | 01:16 | However, improving the accessibility of your site
will often improve how your site performs in terms
| | 01:21 | of its usability and device independence at the same time.
| | 01:25 | So don't worry too much about the semantics of what each term means.
| | 01:29 | Rather, focus on putting features into your site that will
help users make sense of it and navigate around whether
| | 01:36 | or not those features are called accessibility or usability.
| | 01:39 | Accessibility is also something that is relative.
| | 01:42 | So there's some good news and bad news with that.
| | 01:45 | The good news is there's no such thing as inaccessible.
| | 01:48 | But that doesn't mean that you have no work to do because
the bad news is there's no such thing as accessible either.
| | 01:54 | While there's no such thing as an inaccessible
page, there are pages or pieces of content
| | 01:59 | that can be completely inaccessible to
certain groups of people with disabilities.
| | 02:04 | So basically, accessibility is a range.
| | 02:07 | It's not possible to make everything accessible to everyone.
| | 02:10 | But you can make content more accessible to more people.
| | 02:14 | As we will talk about in later movies, there are different
standards and guidelines available for web accessibility.
| | 02:20 | Different standards can result in greater or less accessibility.
| | 02:23 | Basically, your job is to maximize the number of people
| | 02:26 | who can use the site while balancing other
requirements for the site, such as funding or branding.
| | 02:32 | Also remember that accessibility doesn't have to be a
painful requirement that you're forced to add to your sites.
| | 02:38 | It doesn't require much extra work when accessibility features
are done as part of the initial development of the site.
| | 02:43 | So make sure you plan for it upfront.
| | 02:45 | This will be less expensive than fixing
accessibility problems that are found later.
| | 02:50 | If you already have pages that you've made and you need
to make them compliant with accessibility guidelines,
| | 02:56 | keep in mind that even small changes that you make
can have a big impact on making them more accessible.
| | 03:01 | Another myth about accessibility is that the sites
that are accessible are simple, plain or ugly.
| | 03:07 | This doesn't have to be the case, though, if you
keep in mind the concept of progressive enhancement.
| | 03:12 | This means starting out with a solid structure of content that can be
accessed by a wide variety of devices and people and then adding on layers
| | 03:20 | of style and functionality for those that can use it.
| | 03:23 | There are a number of websites that illustrate
how attractive accessible web design can be.
| | 03:28 | Three of these sites are listed here.
| | 03:30 | If you want to pause the movie at this point to write down the URLs,
this would be a good time to do so before we look at these actual pages.
| | 03:38 | These three sites are examples of sites that collect
screen shots of other great looking websites to use
| | 03:43 | as inspiration when you are creating your own design.
| | 03:46 | This first site is at http://accesssites.org/site/category/showcase.
| | 03:55 | Accesssites.org not only shows you screen shots of the websites
that it features that are accessible, but also attractive,
| | 04:02 | and includes a write-up of each of these sites,
detailing what features are accessible in each one.
| | 04:09 | We can scroll down the page to view the beginning
of each of these articles about each site.
| | 04:14 | The name of the site is given.
| | 04:16 | A screen shot is provided.
| | 04:17 | And you can continue reading the article to view
all of the comments on its accessibility features.
| | 04:23 | Let's switch over to another site now.
| | 04:25 | This site is at www.cssliquid.com.
| | 04:30 | This site is dedicated to showing websites that are
made with CSS and include a liquid type of design,
| | 04:37 | which we'll talk about how to make in a later movie.
| | 04:40 | This type of layout is often more accessible.
| | 04:43 | Although CSS, by itself, does not guarantee that a website
will be accessible, it is a great tool down that path.
| | 04:50 | If we scroll down the page here, we'll see the latest three
screen shots of sites that have been added to the gallery.
| | 04:57 | You can click on any of these screen shots
to go to the website that is featured.
| | 05:02 | Now let's look at the third site.
| | 05:04 | This site is at www.cssbeauty.com.
| | 05:07 | Again, this site showcases web designs that are made with CSS.
| | 05:12 | These designs are shown in screen shots in this third column of the page.
| | 05:16 | A great feature of this website is the news articles
that are listed on the left side of the page.
| | 05:23 | You can use these articles to learn more about how to create
CSS-based designs, such as the ones you see in this site.
| | 05:29 | So in this movie, we've learned what web accessibility is,
some of the types of disabilities that it's meant to address,
| | 05:36 | and seen some examples of websites that can offer you
inspiration when making your own accessible designs.
| | 05:42 | In the next video, we'll learn more about the people
who are affected by web accessibility and the benefits
| | 05:47 | that it can give them when they are browsing the web.
| | Collapse this transcript |
| How does accessibility help your users?| 00:01 | >> Now let's look at how accessibility helps real people.
| | 00:04 | The web is a really great tool for people with
disabilities because for many of them, it can truly enrich
| | 00:10 | and change their lives, being able to function independently.
| | 00:13 | Web accessibility is essential for equal opportunity.
| | 00:17 | The web is increasingly used in all areas of society as part of daily life.
| | 00:21 | And it's sometimes completely replacing traditional resources
provided by the government, education, news, healthcare.
| | 00:30 | And having access to this information on the web
is a great tool for people with disabilities.
| | 00:35 | It can provide them more access to information
than they had access to before.
| | 00:40 | For example, information that could only be obtained by physically going
to the library and reading a book printed in Braille can now be accessed
| | 00:48 | by blind or otherwise disabled people in their own homes.
| | 00:51 | So that might be something that may have been impossible
for them to read before that now they have access to.
| | 00:58 | The web can also provide people with disabilities
more opportunity for interaction.
| | 01:03 | They can meet other people and form relationships on the web.
| | 01:07 | The web also gives them more opportunities for different types of jobs.
| | 01:11 | And they can participate more fully in society,
even contributing their own content to the web.
| | 01:16 | So by making your web pages accessible, you're making them
usable without eyes, ears, motor control, perception of color,
| | 01:25 | even a mouse, things that many people take for granted.
| | 01:29 | It's helpful to get a sense of how people with disabilities access the web.
| | 01:33 | Many people use special software or devices called assistive
technology, which is often abbreviated to AT on accessibility websites.
| | 01:42 | This includes screen readers and screen magnifiers
for people who are blind or visually impaired.
| | 01:47 | Refreshable Braille displays for use by people who are
both blind and deaf, captioning software can be used
| | 01:53 | by people who are deaf to access multimedia presentations.
| | 01:57 | Voice recognition software, switches, pointer sticks
and touch screens are all tools that can be used
| | 02:03 | by people with motor impairments who cannot use a mouse.
| | 02:07 | But many people use the same technology that
others use, but just in a different way.
| | 02:12 | For instance, many people may use the keyboard to navigate
around their operating system or browser instead of a mouse.
| | 02:19 | They may customize their browser or their whole
system font size to make it easier for them to read.
| | 02:25 | They can also adjust their browser window size, their
color settings, even set up their own style sheets
| | 02:30 | to make things easier for them to read, understand and use.
| | 02:35 | Changes that you make for accessibility can also help people
who don't use any of this technology and who aren't disabled.
| | 02:42 | Usually, the changes that you make for accessibility
are completely transparent to those who don't need them.
| | 02:48 | But they can also be helpful to other groups, particularly people who
are older, who use small screen devices, like mobile phones and PDAs,
| | 02:56 | who use old or slow devices or computers, people who
have low fluency or literacy in a particular language,
| | 03:03 | or even people who are just relatively unfamiliar with using the web.
| | 03:07 | All of these groups of people can benefit from
the changes that you make for accessibility.
| | 03:13 | In later movies, we'll discuss each of the specific
benefits of the techniques that we go over as we cover it.
| | 03:19 | In the next movie, let's look at an inaccessible and an
accessible version of the same web page to get a sense
| | 03:25 | for how a person with a disability might experience that page.
| | Collapse this transcript |
| Experiencing a website via a screen reader| 00:01 | >> Let's look at how someone using a screen reader would
experience a web page that is inaccessible and the improvements
| | 00:07 | that can be made when accessibility features are added.
| | 00:10 | We are at the W3C's web accessibility initiative
website at www.w3.org/wai/eo/2005/demo.
| | 00:23 | On this page are a series of links to inaccessible web pages as well
as links to the same web pages with accessibility features added.
| | 00:32 | But for now, I just want you to sit back and get a sense of the experience
of having a disability and using a screen reader to access a web page.
| | 00:40 | Let's scroll down the page, and underneath the heading
demonstration contents are the listing of pages that we can look at.
| | 00:47 | I'm going to go to the Inaccessible Homepage link.
| | 00:50 | This is a fairly common type of website that you may find.
| | 00:53 | It has a logo on the top left corner identifying
the name of the site that we can immediately see.
| | 00:59 | This is also evident in this large heading text in the middle of the page.
| | 01:03 | We can quickly get a sense of what the sections of
the website are by looking in the left-hand column
| | 01:09 | at the four links listed; home, news, tickets and survey.
| | 01:14 | And we can see what the main stories on the website are in this middle
column with these three headings: Heat wave link to temperatures,
| | 01:24 | Man gets nine months in violin case, and Lack of brains hinders research.
| | 01:29 | Another thing that we can view on this web page, if we
scroll down, is some brief text about each of these stories
| | 01:38 | and a link that says More that we can click on to read the full story.
| | 01:42 | Now we're going to look at this web page with a screen reader.
| | 01:45 | And I would like you to pay attention to these
same parts of the web page that I have pointed out
| | 01:50 | and see how the screen reader reads this and
the information that it gives to the user.
| | 01:55 | (Start Screenreader)
| | 01:55 | >> Jaws 40 minute loads dot dot colon colon city lights
colon colon colon dot dot dot dash Mozilla Firefox combo box
| | 02:03 | to left's click menu dash dash greater traffic colon construction
work on main road to date colon Monday 03 September 2007.
| | 02:12 | Sunny 23 degrees see traffic colon construction work
on main road to date colon Monday 03 September 2007.
| | 02:20 | Sunny 23 degrees see link graphic pics slash nav underline mouse over.
| | 02:25 | Link graphic pics slash NAV underline news on mouse
over link graphic pics slash NAV underline fax on those
| | 02:31 | over link graphic pics slash NAV underline
survey on mouse over welcome to city lights.
| | 02:36 | City lights is the new portal for visitors and residents.
| | 02:38 | Find out what's on book tickets.
| | 02:40 | Tell us what's good and what's not.
| | 02:42 | Get the latest news.
| | 02:43 | Link heat wave link the temperatures.
| | 02:45 | Link NAV gets nine months in violin case.
| | 02:48 | Link lack of brains hinders research.
| | 02:50 | After three years of efforts, city scientists now agree that the primary
cause of the 2003 heat wave was hot air from our link graphic pics slash
| | 02:58 | on mouse over mayor colon these kinds of crimes
need more creative effective punishments.
| | 03:04 | For example, we could require compulsory
link graphic pics slash on mouse over brain.
| | 03:09 | >> (End Screenreader).
| | 03:10 | I've stopped the screen reader from finishing to the
end of the page now that you've had a chance to hear it.
| | 03:15 | Let's now look at the same version of this page that is more accessible
and listen for the differences in how the screen reader reads it.
| | 03:22 | I scroll to the top.
| | 03:23 | There's a link to the accessible version
of this same page, Accessible Homepage.
| | 03:28 | >> Accessible homepage link.
| | 03:30 | Welcome to city lights.
| | 03:32 | Traffic colon construction work on main
road to date colon Friday 27 January 2006.
| | 03:38 | Sunny spells 23 degrees.
| | 03:40 | See navigation menu colon.
| | 03:42 | List of four items home link news.
| | 03:44 | Link tickets.
| | 03:45 | Link survey list and ten in level one.
| | 03:48 | Welcome to city lights.
| | 03:49 | City lights is the new portal for visitors and residents.
| | 03:52 | Find out what's on book tickets.
| | 03:53 | Tell us what's good and what's not.
| | 03:55 | Get the latest news.
| | 03:56 | Head in level two link heat wave link to temperatures
graphic man with giant head after three years of efforts,
| | 04:02 | city scientists now agree that the primary cause of the 2003
heat wave was hot air from dot dot dot link heat wave dash.
| | 04:09 | Link full story head in level two.
| | 04:11 | Link man gets nine months in violin case.
| | 04:13 | Traffic A violin case open for inspection complete with violin mayor
colon these kinds of crimes need more creative effective punishments.
| | 04:21 | For example, we could require dot dot dot link violin case dash.
| | 04:25 | Link full story head in level two.
| | 04:27 | Link lack of brains hinders research traffic A brain.
| | 04:30 | >> So as you can see on this web page,
it looks almost exactly as it did before,
| | 04:35 | but you heard a number of changes in how the screen reader read the page.
| | 04:38 | First of all, when it read the navigation bar on the left side,
it didn't read extra information about each of the images.
| | 04:46 | But instead, said link home link news link tickets link survey.
| | 04:52 | It also announced how many links were about
to be read before it began reading them.
| | 04:57 | Another change that you probably noticed was that it read each
of the three headings, then read the caption below the picture.
| | 05:05 | These small changes made the information on the page clearer.
| | 05:08 | And it also took less time for the screen
reader to get to the important information.
| | 05:13 | It had less unnecessary characters and images to read through
before it could tell the user what the names of the links were,
| | 05:20 | what the names of the stories were and
how to get more information on the site.
| | 05:24 | So this is just one example of how small changes on
a website can make a big difference in the experience
| | 05:30 | of browsing a website and using it to get information.
| | 05:34 | Hopefully this shows you the great benefits
that can come from accessibility to your users.
| | 05:38 | There's also great benefits from accessibility
for you and for your clients.
| | 05:43 | We'll talk about those benefits next.
| | Collapse this transcript |
| How does accessibility help you and your clients?| 00:01 | >> We've talked about how web accessibility helps people with disabilities.
| | 00:05 | But it also has a lot of benefits for you and your clients.
| | 00:08 | I've grouped together these benefits for you, the web designer, with
that of your client or employer, because they really go hand in hand.
| | 00:15 | The things that make your work easier and more effective
usually benefit your client as well, as vice versa.
| | 00:22 | You can look at web accessibility with a negative or a positive attitude.
| | 00:26 | One of the negative ways of looking at it is that you should do it
| | 00:29 | because you can avoid being accused of
discrimination against people with disabilities.
| | 00:35 | So you do it because you have to comply with anti-discrimination laws,
you want to avoid lawsuits, and this can even apply to private companies.
| | 00:44 | But you can also look at accessibility in a positive light.
| | 00:46 | For one thing, it can promote the image of
your company as being socially responsible.
| | 00:52 | There can also be financial incentives
to making your web pages more accessible.
| | 00:56 | By allowing your web pages to be accessed by more
people, you're increasing your user or customer base.
| | 01:02 | That can mean more sales or funding for your organization.
| | 01:06 | Changes that you make for accessibility also usually
make your pages easier to maintain, update and redesign.
| | 01:12 | That means it's less time that you have
to spend doing tedious maintenance work.
| | 01:16 | And it's less hours that your client has to pay you for.
| | 01:19 | Pages that are accessible often work better on a wider variety of devices.
| | 01:24 | Again, less time debugging for you, less frustration,
more time to work on the fun stuff of web design.
| | 01:29 | And again, less time that the client has to pay you for.
| | 01:32 | Accessible web pages have very streamlined page markup.
| | 01:36 | That decreases the file size, which means there's less
bandwidth for your client to pay for on their web servers.
| | 01:41 | It also makes your pages load faster so you can
have happier, more satisfied users and customers.
| | 01:47 | Again, that could translate into a financial incentive for your client.
| | 01:51 | These streamlined pages also have better search engine results.
| | 01:56 | With less markup, you're increasing your keyword
density and also the waiting of your keywords.
| | 02:01 | Also, when you use semantic markup, as we'll explain in
a later movie, you're adding more keywords to the page.
| | 02:08 | So again, you're increasing your keyword density.
| | 02:11 | Keyword density is simply a measure of how many keywords are on your
page versus all of the other code and things that make up your page.
| | 02:19 | Another reason to learn and use website accessibility
techniques is that it can improve your competitiveness.
| | 02:27 | It can be a selling point for you as a web
designer as another skill added to your skill set.
| | 02:32 | Web accessibility is one of the current
best practices referred to as web standards.
| | 02:37 | Web standards based design is very popular right now and can
really create the impression that you're a high quality designer.
| | 02:44 | It's another way to differentiate yourself
from the competition when you're looking
| | 02:48 | to get web design jobs, request for proposals listing their qualifications.
| | 02:54 | It can also be a selling point for your organization
when they're responding to requests for proposals.
| | 02:59 | If you're applying for federal funding, it's required
by law that you comply with web accessibility.
| | 03:04 | Next, we'll talk about the standards in Section 508.
| | Collapse this transcript |
| Overview of Section 508 standards| 00:01 | >> The web accessibility law in the U.S. is called Section 508.
| | 00:05 | We'll go over the details of what each of its rules
means and how to comply with it in our later movies.
| | 00:11 | But first let's get a quick overview of what it's about.
| | 00:13 | Section 508 is a U.S. accessibility standard that's mandated
by law, part of the 1998 amendment to the rehabilitation act.
| | 00:22 | Its rules apply to all federal agencies when they develop,
procure, maintain or use electronic and information technology.
| | 00:30 | The agencies must give disabled employees and members of the public access
to information that is comparable to the access available to others.
| | 00:38 | Subpart B of Section 508 deals specifically with web accessibility.
| | 00:43 | And it's made up of 16 rules.
| | 00:45 | The first says a text equivalent for every non-text element
shall be provided, e.g. via alt, longdesc or in element content.
| | 00:54 | This rule is related to images and the information that images provide.
| | 00:58 | Its goal is to make the information and the images
accessible to people who cannot see the images.
| | 01:03 | In later movies, we'll talk about the methods for
doing so that are briefly mentioned in this rule.
| | 01:08 | The next rule is equivalent alternatives for any multimedia
presentation shall be synchronized with the presentation.
| | 01:15 | This rule pertains to captioning of multimedia presentations and making
sure that they are accessible to people who have auditory problems.
| | 01:23 | Rule C states web pages shall be designed so that all
information conveyed with color is also available without color.
| | 01:31 | For example, from context or markup.
| | 01:33 | This rule benefits people who have colorblindness or other visual problems.
| | 01:37 | Rule D, documents shall be organized so they are
readable without requiring an associated style sheet.
| | 01:43 | Throughout the movies in this title, we'll be
talking about how to use CSS to style your pages.
| | 01:49 | But we'll always make sure that the pages can be read without these styles.
| | 01:53 | This is related to the idea of progressive
enhancement that we talked about earlier.
| | 01:57 | We'll create a base markup for the page
that can be read by a variety of devices.
| | 02:01 | Then we'll add the styles on top for those who can take advantage of them.
| | 02:05 | Rule E, redundant text links shall be provided for
each active region of a server's side image map.
| | 02:12 | Currently, image maps are almost entirely client side.
| | 02:15 | And we'll talk about how to make those image maps accessible later.
| | 02:19 | Rule F talks about these client side image maps and says, client
side image maps shall be provided instead of server side image maps,
| | 02:26 | except where the regions cannot be defined
with an available geometric shape.
| | 02:30 | Rule G says row and column headers shall be identified for data tables.
| | 02:35 | Tables often contain large amounts of complex information.
| | 02:38 | And it's important for there to be markup that tells different browsers
| | 02:41 | and other devices what pieces of data are
related to other pieces in that table.
| | 02:46 | Rule H states markup shall be used to associate
data cells and header cells for data tables
| | 02:52 | that have two or more logical levels of row or column headers.
| | 02:55 | This is related to the previous rule.
| | 02:57 | And again, we'll talk about it later in our movies on tables.
| | 03:01 | Rule I says frame shall be titled with text that
facilitates frame identification and navigation.
| | 03:07 | Again, this is a rule that is somewhat out of
date, as frames are rarely used in websites today.
| | 03:13 | Rule J, pages shall be designed to avoid causing the screen to
flicker with a frequency greater than 2 Hz and lower than 55 Hz.
| | 03:21 | This is another rule that is somewhat out of date.
| | 03:24 | It applies mostly to web pages that used to use the HTML tag blink.
| | 03:29 | A text only page with equivalent information or functionality shall
be provided to make a website comply with the provisions of this part.
| | 03:38 | When compliance cannot be accomplished in any other way, the content of
the text only page shall be updated whenever the primary page changes.
| | 03:47 | This technique of creating the text only page has been very popular with
some organizations when they're trying to make their websites accessible.
| | 03:54 | However, it has a number of problems.
| | 03:56 | And so we'll talk about those in a later movie.
| | 03:59 | Rule L says when pages utilize scripting languages
to display content or to create interface elements,
| | 04:05 | the information provided by the script shall be identified
with functional text that can be read by assistive technology.
| | 04:12 | This rule is important if you're using
JavaScript to create dynamic effects on the page.
| | 04:17 | You want to make sure that they comply
with the idea of progressive enhancement,
| | 04:20 | that all of the information that the script provides
to the user is also available without scripting.
| | 04:26 | Rule M, when a web page requires that an applet, plug-in or other
application be present on the client system to interpret page content,
| | 04:34 | the page must provide a link to a plug-in or applet that complies
with Rules A through L. N, when electronic forms are designed
| | 04:42 | to be completed online, the form shall allow people
using assistive technology to access the information,
| | 04:48 | field elements and functionality required for completion and
submission of the form, including all directions and cues.
| | 04:55 | This is designed to make sure that people who are using
assistive technology can fill out forms successfully.
| | 05:01 | And we'll talk about those techniques in a later movie.
| | 05:04 | Rule O, a method shall be provided that permits
users to skip repetitive navigation links.
| | 05:10 | Having to hear that same navigation read
on every page can be a real problem.
| | 05:14 | So we'll talk about how to create skip navigation links later.
| | 05:17 | Rule P, when a timed response is required, the user shall be
alerted and given sufficient time to indicate more time is required.
| | 05:25 | This is another rule that applies to your scripting practices.
| | 05:28 | So those are the 16 rules of Section 508 that all federal
agencies and people who have federal funding must comply with.
| | 05:37 | Again, we'll talk about the techniques and more of the details
of what these rules are meant to accomplish in later movies.
| | 05:44 | Next, we'll talk about another web accessibility
standard called the web content accessibility guidelines.
| | Collapse this transcript |
| Overview of WCAG standards| 00:01 | >> We just talked about the section 508
standards that are part of the US Federal Law,
| | 00:05 | now we're going to talk about the Web Content Accessibility Guidelines.
| | 00:10 | They're currently at version 1.0 and they are
published by the Web Accessibility Initiative.
| | 00:15 | This is part of the World Wide Web Consortium, or W3C, which is
an organization that writes web standards such as the standards
| | 00:23 | for HTML, CSS, and other languages used in web sites.
| | 00:27 | You can view all of the details of WCAG 1.0 at www.W3.org/tr/wcag10.
| | 00:39 | One thing to point out is that version 2.0 is currently in development,
but it could be quite a while before that becomes a recommendation.
| | 00:47 | Until that does become a recommendation, you should continue to follow
the guidelines in 1.0, but you may want to look at WCAG 2.0 for ideas
| | 00:54 | and to begin preparing for any changes that you
might need to make once it becomes a recommendation.
| | 01:00 | Most countries outside the US do not have their own standards, such as
section 508, but instead rely on the standards that are part of WCAG.
| | 01:09 | If you're in the US, you're not required
to comply with these standards, however,
| | 01:12 | doing so can really improve the accessibility
of your page, versus just doing section 508.
| | 01:18 | WCAG 1.0 is made up of 14 guidelines.
| | 01:22 | Each of these guidelines contains on or more checkpoints that
you can use to evaluate the web accessibility of your site.
| | 01:29 | Then these checkpoints have a priority
assigned to them of one, two or three.
| | 01:33 | The priority one checkpoints are ones that you must satisfy,
| | 01:37 | otherwise one or more groups will find it
impossible to access the information on your page.
| | 01:42 | Priority two checkpoints are ones that you should satisfy, otherwise
one or more groups will find it difficult to access the information.
| | 01:50 | Priority three checkpoints are ones that you may address, otherwise one
or more groups will find it somewhat difficult to access the information.
| | 01:58 | Not every checkpoint will apply to every web page, so
it's not required for you to comply with all of them.
| | 02:04 | However, the priority levels give you an idea of which ones will result
in the greatest amount of accessibility for the greatest number of people.
| | 02:12 | Now let's quickly go over these 14 guidelines.
| | 02:15 | Again, there's more information contained in the
individual checkpoints that make up these guidelines.
| | 02:21 | We'll go over these checkpoints in more detail in later movies.
| | 02:25 | The first guideline is to provide equivalent
alternatives to auditory and visual content.
| | 02:30 | This is similar to the section 508 rules that dealt with text
equivalents for images as well as captioning for multimedia.
| | 02:39 | Two is don't rely on color alone.
| | 02:41 | Again, this is important for people who have color blindness problem.
| | 02:45 | So make sure that they're able to access all of the
information that you're presenting visually on your page.
| | 02:51 | Guideline three says use markup and style sheets and do so properly.
| | 02:56 | This is a pretty broad guideline that will pertain
too many of the movies that we'll go over later.
| | 03:01 | Four states clarify natural language usage.
| | 03:04 | This just means that you need to make clear what
language all of the text on your page is in so
| | 03:09 | that different devices can present the text correctly to their users.
| | 03:13 | Rule five says create tables that transform gracefully.
| | 03:16 | This is related to the concept of progressive
enhancement that we talked about before.
| | 03:21 | It basically means that you want the information
in tables to be able to be restructured in ways
| | 03:26 | that will make it easier for different
devices to read in the correct order.
| | 03:30 | Guideline six says ensure that pages featuring
new technologies transform gracefully.
| | 03:35 | Again, you need to follow the concept of progressive enhancement
making sure there's a base level of content that can be understood
| | 03:42 | and then add new technologies and new features on top
of that to enhance the experience for other people.
| | 03:48 | Guideline seven says ensure user control of time sensitive content changes.
| | 03:53 | You want to make sure that anything on the
page that is dependent on a time limit,
| | 03:57 | such as filling out a form, can be completed successfully by your users.
| | 04:01 | Guideline eight says ensure direct accessibility
of embedded user interfaces.
| | 04:07 | This applies to multimedia and other technologies
that you can embed inside a webpage.
| | 04:13 | Nine, design for device independence.
| | 04:15 | Because there are so many types of technology and devices that are used
by people with disabilities as well as people without disabilities,
| | 04:23 | you need to incorporate techniques into your page that will
allow the greatest number of them to have access to your content.
| | 04:29 | Guideline ten says use interim solutions.
| | 04:32 | This is addressing the challenge faced by many web developers
when they're trying to make their web pages more accessible.
| | 04:38 | Sometimes, a barrier in accessibility doesn't currently have a
great solution provided by it because of technological limitations.
| | 04:46 | However, there are frequently things that you
can do as stop gap measures in the mean time.
| | 04:51 | Eleven says use W3C technologies and guidelines.
| | 04:55 | Again, the W3C is a web standards organization.
| | 04:59 | Making sure that your web pages conform to current standards
makes it more likely that they will be correctly viewed
| | 05:05 | on a wider variety of devices and by a wider variety of people.
| | 05:09 | And it also makes them more adaptable to the future.
| | 05:12 | Guideline twelve says provide context and orientation information.
| | 05:16 | This is related to providing information on the page so that users
know where they are within a site or within a page and are able to use
| | 05:24 | that information to be able to navigate the
site and find what they are looking for.
| | 05:29 | Thirteen says provide clear navigation mechanisms.
| | 05:32 | This is related to the previous rule.
| | 05:34 | Fourteen, ensure that documents are clear and simple.
| | 05:37 | This guidelines pertains mainly to the text of your
page, making sure that the content is understandable
| | 05:44 | by people even with cognitive disabilities or learning problems.
| | 05:48 | So these are the 14 guidelines of WCAG 1.0.
| | 05:52 | Many of these guidelines, as well as those of section
508, are best met by adapting your HTML markup.
| | 05:58 | We'll next talk about a method for markup that
will help you meet many of these guidelines.
| | Collapse this transcript |
| Understanding consistency and semantic markup| 00:01 | >> There are some general principles of accessibility
that will be themes throughout this title.
| | 00:05 | I wanted to go over them now so you can keep them in mind when you're
developing any of the accessibility techniques that we'll later cover
| | 00:12 | so that you can have a greater understanding of why
we're choosing certain techniques and how they can help.
| | 00:17 | So these principles that we're going to talk about are consistency,
semantic markup and separation of content, presentation and behavior.
| | 00:25 | So let's first talk about consistency.
| | 00:28 | Consistency is actually mentioned in some of the guidelines
of WCAG 1.0 and 2.0 as being important for accessibility.
| | 00:35 | It's related to the fact that patterns
help everyone understand information.
| | 00:40 | If you're a sighted person, patterns that we create through consistency,
either visually through our text, help everyone understand information.
| | 00:48 | So it's important to be consistent in the
techniques that you apply to your web pages.
| | 00:53 | With web accessibility, there's not always a right or a best answer.
| | 00:58 | So you'll often have to use your judgment to pick one.
| | 01:01 | When you do that, make sure that you stick with it throughout your site.
| | 01:04 | Even when sites have problems with accessibility, if those problems are
consistent throughout the site, users can often recognize those patterns
| | 01:13 | and figure out a way around them to make do in using the site.
| | 01:17 | Another important theme of accessibility is that of semantic markup.
| | 01:21 | Many of the techniques that we'll talk about are
very dependent on markup because the information
| | 01:26 | in the markup is what is accessed by assistive
technology and provided to its users.
| | 01:31 | Semantic markup is the method of writing XHTML or HTML markup where
your mark what each piece of content is, not what it should look like.
| | 01:41 | So, for example, you may have headings on your page, and
you can mark them up with the HTML tags H1 through H6.
| | 01:48 | Quotations should be marked up with block quote and so forth.
| | 01:53 | Presentational tags, such as center, font or bold have
been deprecated or removed from current web standards
| | 01:59 | because they do not comply with the idea of semantic markup.
| | 02:03 | Again, though, this is an area where there's not always a right
answer as to which tag is perfect for which piece of content.
| | 02:10 | So use your judgment and be consistent.
| | 02:12 | Semantic markup is also related to the idea of
separating content, presentation and behavior.
| | 02:19 | This is where you use each web technology for its intended purpose.
| | 02:22 | You use XHTML or HTML for marking up what content is.
| | 02:28 | You use CSS for controlling the visual presentation and
JavaScript for controlling the behavior of the content.
| | 02:34 | Keeping each of these separated is what enables progressive enhancement.
| | 02:38 | Each technology can take advantage of only the
pieces that it needs to provide information
| | 02:42 | to its users and make the web pages understandable to them.
| | 02:46 | So we've learned what accessibility is, some of the people that
it affects, and how it can help your users as well as yourself.
| | 02:54 | In the next chapter, we'll set up an accessibility testing environment
so that we can evaluate our web pages' accessibility as we build them.
| | Collapse this transcript |
|
|
2. Setting Up an Accessibility Testing EnvironmentUnderstanding screen readers and accessibility tools| 00:00 | >> In this chapter we are going to set up a number of tools that
you can use to test the degree of accessibility of your pages.
| | 00:06 | Some of these tools are actual software that people with disabilities use.
| | 00:10 | Other tools aren't used by people with disabilities, but they attempt
to emulate how a web page would look or work for certain disabilities.
| | 00:17 | Finally, some are web pages or browser extensions that
attempt to evaluate certain characteristics of your site
| | 00:23 | or their compliance with official web accessibility guidelines.
| | 00:26 | But with all of these remember that they are just tools.
| | 00:29 | Nothing is going to replace testing with real people,
because that's what web accessibility is about.
| | 00:34 | It's about making web pages that are understandable to people.
| | 00:37 | This is especially important to remember when
you're using a screen reader as a testing tool.
| | 00:42 | Using a screen reader to its full extent means
browsing the web without a monitor or a mouse.
| | 00:47 | So it's a very different experience from what most people
are used to, even other assistive technology users.
| | 00:53 | You don't use a screen reader every day as your only way of accessing
the web, So even if you take the time to learn how to use it extensively,
| | 01:01 | you're not going use it like someone who has
to use it, or has been using it for years.
| | 01:05 | Because you're inevitably going to use a screen reader very differently
from its real intended users, you can't rely on your own experience alone.
| | 01:13 | It can be pretty overwhelming to listen to all of
the information that a screen reader throws at you,
| | 01:17 | so if you find your web page terribly confusing, don't assume
you need to change it completely to make it accessible.
| | 01:24 | It might be perfectly understandable to people
who are used to hearing web pages read to them.
| | 01:28 | So do continue to test with screen readers and other tools, but don't
make big changes without first consulting people with disabilities.
| | 01:35 | There are a number of places that you
can look for people to test your pages.
| | 01:39 | You can look for organizations for specific
disabilities or across disabilities.
| | 01:43 | Even national organizations may have regional contacts who could
put you in touch with people in your area who have disabilities.
| | 01:50 | Also, most colleges and universities have
programs for students with disabilities.
| | 01:54 | So if you have a college or a university in your
area you could consider contacting them to get
| | 01:58 | in touch with students who that might be able to help you.
| | 02:01 | You may also have local disability-related support
groups in your area, or local government rehabilitation
| | 02:07 | or disability services departments that you could contact.
| | 02:10 | You may also want to contact senior organizations and local senior centers
as well as independent living organizations to talk to older users.
| | 02:17 | You can also look on line for help.
| | 02:19 | There are a number of web sites where you can get accessibility reviews
from both experts in the field as well as people with disabilities.
| | 02:26 | Three of these web sites are listed on the screen.
| | 02:28 | You may want to pause the movie at this time to write down the URLs.
| | 02:31 | Let's look at these sites.
| | 02:34 | The first site that we are at is accessabilityforum.com.
| | 02:38 | This site contains a number of forums that you can subscribe to or read
without subscribing to find out information about web accessibility.
| | 02:45 | Most of the users on this forum are not people are disabilities, but there
are some here that can help you, as well as many experts in the field.
| | 02:52 | The first form listed on the page is called Site Building and Testing.
| | 02:56 | This is where the majority of the questions to this forum are posted.
| | 02:59 | Let's click on that link.
| | 03:01 | And you can see a listing of topics that have been posted recently.
| | 03:05 | Many of them are technical in nature, so it's a good place to ask questions
| | 03:09 | about specific web development techniques
and post your URL for people to evaluate.
| | 03:14 | Let's go to the next site now.
| | 03:16 | We are now at Web Aim, the URL is www.webaim.org/community.
| | 03:23 | Web Aim is a non-profit organization within
Utah State University that provides training
| | 03:28 | and consulting, as well as other web accessibility services.
| | 03:31 | Their web site has many resources for web developers posted that
can help you with technical issues surrounding web accessibility.
| | 03:37 | On the community page that we are on, they
have links to a form as well as a mailing list.
| | 03:42 | If we scroll down the page you can see under the heading Web Accessibility
Forums, there's a link that says View or Join the web accessibility forums.
| | 03:52 | We click there.
| | 03:53 | Again, you can see a number of forums where you
can post technical issues and ask for site reviews.
| | 03:59 | Click Back now.
| | 04:00 | And scroll further down the page to where it says E-mail Discussion List.
| | 04:09 | This provides the same sort of help as a forum, but in a different format.
| | 04:13 | So if you prefer getting messages by e-mail you may
want to subscribe to this list instead of a forum.
| | 04:18 | As with the Accessify forum, most of the users of this list are not
people with disabilities, but there are some there that can help you.
| | 04:24 | And it may also be a source for you to talk to other web developers
and see if they can put you in touch with their own testing contacts.
| | 04:31 | Now let's go to the third web site.
| | 04:36 | We are at lists.w3.org/archives/public/w3c-wai-ig.
| | 04:43 | This is a mailing list for the Web Accessibility Initiative interest group.
| | 04:50 | At the top of the page are some informational links about the list.
| | 04:56 | This green link that says Subscribe to This List is
where you would click if you wanted to subscribe.
| | 05:00 | You can also view messages without subscribing by using the
search box or by choosing a period that the messages appeared in.
| | 05:08 | You can choose to view the messages by thread, by author, or by subject.
| | 05:13 | Let's click on by thread in the July to September 2007 period.
| | 05:21 | You'll see the names of the e-mail messages, who posted them, and when.
| | 05:25 | And they will be organized in a thread view so you can start at
the top of the thread and read all of the successive messages.
| | 05:31 | The content in this mailing list is geared towards people who
are very involved with the web accessibility initiative in terms
| | 05:38 | of developing new standards and evaluating those that exist.
| | 05:41 | So it's a bit more technical or theoretical
than the other two sites that we looked at.
| | 05:45 | But if you really get involved in web accessibility, it's a great
way to keep up with what is currently going on in the field.
| | 05:51 | So we've learned that accessibility testing is most
valuable when it's performed by people with disabilities,
| | 05:56 | and we've talked about some of the ways
that you can get help from real people.
| | 06:00 | Now let's look at tools that you can download or bookmark to setup
your computer for when you want to test pages quickly by yourself.
| | 06:06 | Next we'll look at free browsers you can download to help in your testing.
| | Collapse this transcript |
| Getting accessible browsers| 00:00 | >> The first tools that we're going to use for
accessibility testing are two free browsers.
| | 00:05 | The first is Firefox.
| | 00:06 | This is a good browser to download and use for web site testing because it
is highly standard compliant and also has a number of extensions available
| | 00:14 | that you can use to customize the browser and add additional tools.
| | 00:17 | In a later movie we'll download those tools,
but first we need to download the browser.
| | 00:21 | Go to www.mozilla.com/en-us.
| | 00:25 | Click on the link that says Download Firefox Free.
| | 00:29 | The link will download a Windows installer package if you are on Windows,
and if you are on Mac it will detect this and install a Mac installer file.
| | 00:37 | Simply click on this link, download the
installer, and go through the installation process
| | 00:41 | like you would for any other software program for your system.
| | 00:44 | The next browser that we're going to download is Lynx.
| | 00:47 | If you're on a Mac you can download it from
apple.com/downloads/macosx/unix_open_source/lynxtextwebbrowser.html .
| | 01:00 | There are two download buttons for the program,
one at the top of the page and one at the bottom.
| | 01:06 | Both of them install a downloader package you can run to
install the program as you would others on your system.
| | 01:13 | In order to run Lynx on Windows we first
need to download a tool called Cygwin.
| | 01:19 | The web site to download this tool is www.cygwin.com.
| | 01:26 | Cygwin is a collection of tools that provide
a Linux or Unix feel to Windows.
| | 01:30 | Scroll down the page, and select the install or update now link.
| | 01:36 | Click on the link and you will be asked to save a setup.exe file.
| | 01:42 | Click on Save File and it will save the file.
| | 01:45 | Then click on the Open link in your downloads window.
| | 01:49 | When it asks if you want to open an executable file, click OK.
| | 01:56 | You'll now be in the Cygwin setup installer screen.
| | 01:59 | On the first screen, click Next.
| | 02:02 | Next it will ask you if you want to install from the Internet.
| | 02:05 | Keep that default selection, and click Next.
| | 02:08 | Next , you need to choose a route install directory.
| | 02:11 | Just go ahead and keep the default location at the root of your C drive.
| | 02:15 | Also keep the default options under install for,
and default text file type checked, then click Next.
| | 02:21 | You'll next be asked to select the local package directory.
| | 02:24 | Again, you can keep the default location, and click Next.
| | 02:27 | On the next screen, keep direct connection selected and click Next.
| | 02:32 | You'll next have to choose a download site to download the program from.
| | 02:35 | You can choose any of these sites.
| | 02:38 | I'm selecting ftp.planetmirror.com.
| | 02:43 | Then hit Next.
| | 02:51 | We now have a screen asking us what we want to install.
| | 02:54 | Scroll down the list to the Web option.
| | 03:00 | Click the plus sign next to Web.
| | 03:04 | Scroll down further, and in the Package column,
look for a listing that says Lynx, L-Y-N-X.
| | 03:14 | Click on the circular arrow icon to the left of Skip.
| | 03:17 | This selects this file to download.
| | 03:20 | Then click Next.
| | 03:22 | The installation process is now beginning.
| | 03:24 | It's going take a while, so you may want to
go get a bite to eat while this is happening.
| | 03:29 | OK, now that Cygwin has finished installing, leave the options to create an
icon on the desktop and an icon to the start menu checked and click finish.
| | 03:37 | If we know minimize Firefox and close the downloads window.
| | 03:44 | To launch Cygwin, go to your Start menu at
your lower left-hand corner of your screen.
| | 03:52 | Click on All Programs, and select Cygwin from the list.
| | 03:59 | Then click on Cygwin bash shell.
| | 04:02 | On a Mac you would get here by going to your finder,
then applications, then utilities and selecting terminal.
| | 04:09 | From that point on both of these programs would work the same.
| | 04:12 | To navigate to a Web page type L-Y-N-X, a
space, and then the URL of the Web page.
| | 04:19 | We're going to go to lynda.com.
| | 04:22 | Http://www.lynda.com.
| | 04:29 | Then hit Enter or Return.
| | 04:31 | Because this page is asking us to set a cookie, type Y to accept it.
| | 04:38 | The lynda.com web site is now loaded.
| | 04:40 | All of the text and links are still visible,
but no images or styles are present.
| | 04:45 | You can navigate between links by pressing the down arrow on your keyboard.
| | 04:50 | You can go to previous links by pressing the up arrow.
| | 04:53 | To jump down an entire page view, click the space bar, to
activate a link, click on the down arrow to get to the link
| | 05:01 | that you want, then click the right arrow to go to that page.
| | 05:05 | To go back to the previous page hit the left arrow.
| | 05:09 | When you want to go to a new web site, click "g" on your keyboard.
| | 05:13 | You will be prompted to type in a new URL.
| | 05:15 | I'm going type in http://www.w3.org.
| | 05:24 | Now we're at a new Web page.
| | 05:26 | So this gives you a sense of what it's like to browse
with out images or styles, just in a text-only browser.
| | 05:32 | Next we're going to look at the other browser we downloaded, Firefox,
and how we can further customize it for accessibility testing.
| | Collapse this transcript |
| Customizing Firefox for accessibility testing| 00:00 | >> Now that we've downloaded Firefox there are a number of extensions
that you can add to it for testing the accessibility of your web sites.
| | 00:07 | The four extensions that we are going to add are named Web Developer,
Firefox Accessibility Extension, Fangs, and Color Contrast Analyzer.
| | 00:16 | The URLs for the web sites where you can install
these extensions are listed on the screen.
| | 00:20 | You may want to pause the movie at this time to write them down.
| | 00:23 | The Web Developer extension can be downloaded
from chrispederick.com/work/web-developer.
| | 00:36 | This extension adds a toolbar to Firefox
with a number of tools that you can use
| | 00:40 | for testing not only the accessibility of
your web pages but other features as well.
| | 00:44 | So download the extension, click on the
Download for Firefox and Flock link.
| | 00:50 | When you click on this link a yellow bar will appear at the top
of your browser window that says Firefox prevented this site
| | 00:58 | from asking you to install software on your computer.
| | 01:01 | Click on the Edit Options button in this yellow bar.
| | 01:03 | A dialogue box will come up listing the allowed
sites that can install extensions to Firefox.
| | 01:10 | The address of this web site will be listed
and there is a button that says Allow.
| | 01:14 | Click this button to add this web site to your list of allowed sites.
| | 01:18 | The web site now shows up in the list of sites.
| | 01:22 | So we can click the close button at the bottom of the dialogue box window.
| | 01:26 | Now that we're able to install extensions from this site we can
once again click on the link that says Download for Firefox/Flock.
| | 01:34 | This time a dialogue box comes up saying "Software
Installation" with the name of the extension.
| | 01:41 | Click on the Install Now button.
| | 01:46 | Firefox will download the extension and tell you that
you need to restart to complete the installation.
| | 01:51 | We have three more extensions that we're going
to install before we restart, so close this box.
| | 01:56 | Go to the next web site now, which is the web site for the
Illinois Center for Information Technology Accessibility.
| | 02:05 | The page that we're on is firefox.cita.uiuc.edu/index.php.
| | 02:13 | This is the page for the Firefox Accessibility
Extension that this organization offers.
| | 02:19 | This extension was designed for people with
disabilities but is also useful for web developers.
| | 02:24 | It shares a lot of features with the other web developer extension that we
just downloaded, but has some other accessibility features that we'll show.
| | 02:31 | To install this extension go to the orange box on the right side of the
page, and click on the link that says Install from extension web site.
| | 02:43 | This will take you further down the page, and there's a link that
says select the Mozilla Firefox Extension 1.0 installation link.
| | 02:52 | Click on this link.
| | 02:54 | Once again, a yellow bar will appear that prevents
the download from this particular web site.
| | 03:00 | Again, click on the Edit Options button.
| | 03:03 | Click Allow, then Close.
| | 03:06 | Then click on the Installation link again.
| | 03:12 | Click on the Install Now button.
| | 03:14 | And then close the add ons dialogue box once it has installed.
| | 03:21 | Now let's go to the third web page.
| | 03:23 | This is the web page for the Fangs extension.
| | 03:27 | The URL is www.standards-schmandards.com/projects/Fangs.
| | 03:38 | This extension emulates the text that a screen reader would
read, but instead of putting it in an easy to read text format.
| | 03:46 | To install this extension click on the link that says to
install Fangs click here on the left side of the page.
| | 03:54 | Once again, in the yellow bar that appears at the
top of Firefox click on the Edit Options button.
| | 04:01 | Click Allow, and then click Close.
| | 04:05 | Then click on the Installation link again.
| | 04:10 | Click on the Install Now button, and again close
the Add-ons dialogue box once it has installed.
| | 04:18 | Finally, let's go to the fourth web site.
| | 04:22 | This is the page to download the Color Contrast Analyzer.
| | 04:25 | The URL is juicystudio.com/article/color-contrast-analyzer-firefox/
extension.php.
| | 04:35 | You would need to scroll down the page
a bit to get to the link to download it.
| | 04:41 | Under the heading that says Contents click on the Firefox Extension link.
| | 04:47 | Then click on the link that says Download the Color Contrast Analyzer.
| | 04:53 | Follow the steps again to allow the site to install extensions.
| | 04:57 | Click on Edit Options, then click on Allow, then Close.
| | 05:04 | Then click on the Color Contrast Analyzer link again.
| | 05:09 | Click the Install Now button.
| | 05:12 | And now that we have installed all four of
these extensions we're ready to restart Firefox.
| | 05:17 | So click the button in the Add-ons dialogue box that says Restart Firefox.
| | 05:21 | It will warn you that you're about to close four tabs.
| | 05:24 | Click Close Tabs.
| | 05:26 | Now that these extensions have been installed you'll notice that
there are two new toolbars at the top of the Firefox window.
| | 05:36 | The first is the Web Developer toolbar.
| | 05:39 | The next toolbar is the Web Accessibility toolbar.
| | 05:42 | In the next movie we'll use these tools on a web page
to see how they can help evaluate its accessibility
| | 05:47 | and show us what problems exist and how we might be able to fix them.
| | Collapse this transcript |
| Using custom accessibility toolbars| 00:00 | >> Now that we've installed these extensions
for Firefox let's use them to test some pages.
| | 00:05 | The first extension that we're going to test is the Web developer toolbar.
| | 00:08 | Some of its features do not work for local pages, so we're going to
test the page that we looked at in the previous chapter from the W3C.
| | 00:16 | The web page that we're at is www.w3.org/wai/eo/2005/demo/before/index.
| | 00:28 | Because some of the features in the Web Developer toolbar
do not work for locally loaded pages make sure that you
| | 00:33 | up load your pages to a testing server before using the extension.
| | 00:37 | The Web Developer toolbar is the third toolbar underneath the URL bar.
| | 00:43 | The first item on its left is a disable button.
| | 00:46 | Click on this button to expose a menu with options
of things that you can disable on the page.
| | 00:52 | You can scroll down and choose disable JavaScript,
and then check the all JavaScript option.
| | 00:58 | This will turn off all JavaScript on the page so you can
make sure that it is still useable without scripting enables.
| | 01:04 | Another thing that's useful to turn off is CSS.
| | 01:07 | Click on the CSS button on the web developer toolbar.
| | 01:10 | Select the disable styles option, and then click on all styles.
| | 01:15 | You'll see that the display of the page
changes because CSS is no longer available.
| | 01:24 | Some of the images have disappeared and the font formatting has changed.
| | 01:28 | This is useful to make sure that your pages
are still readable without styles applied.
| | 01:34 | We can also turn off images.
| | 01:38 | Click on the Images button, select Disable
Images, and then select the All Images option.
| | 01:45 | All images on the page are now displayed as if they were broken.
| | 01:49 | The space is still referred for them, but they are not displayed.
| | 01:52 | You may also want to see which images on a page lack
all attributes, which we'll talk about on a later movie.
| | 01:58 | For that, click on the Images button, scroll down to the
Outline Images option, and select Images Without All Attributes.
| | 02:09 | This will put a red border around all images
that do not currently have an all attribute.
| | 02:14 | You can also view the all attributes of image
that's do have one using the Images menu.
| | 02:20 | Click on Images again, and go to Display All Attributes.
| | 02:24 | The all attributes will be listed in yellow boxes.
| | 02:28 | This page has only a couple all attributes set.
| | 02:31 | You can hover over the yellow box to see what the text is currently set to.
| | 02:37 | You may also want to outline other elements on the page.
| | 02:41 | There are a number of these options underneath the Outline menu.
| | 02:44 | You can outline frames, headings, links, and so forth to make
sure that you're marked up these pieces of content correctly.
| | 02:51 | Underneath the Tools menu are links to validate your page against a
number of W3C standards, as well as Section 508 accessibility rules.
| | 02:59 | Let's select the Validate Section 508 option.
| | 03:03 | This opens a new tab with the contents of a report
from cynthiasays.com, a web site accessibility checker.
| | 03:11 | You can see the full results of its test.
| | 03:14 | On the left side it gives you a description of each Section 508 rule.
| | 03:20 | On the right side it tells you whether you have passed or not.
| | 03:26 | In this case, you can see that we have not passed for
image elements because they do not have all attributes,
| | 03:33 | as we saw with the outline feature that we used earlier.
| | 03:38 | Now let's close this tab.
| | 03:40 | Next, let's use some of the tools in the accessibility extension.
| | 03:44 | This is the next toolbar down on the page.
| | 03:47 | It contains many of the same tools that the Web
Developer toolbar does, but there are some differences.
| | 03:52 | For instance, when you click the navigation
button you'll see a number of elements listed.
| | 03:57 | Clicking on these items will bring up a list of each of these elements.
| | 04:02 | Click on the Links option.
| | 04:04 | This brings up a box showing all of the links on the
page, what the text of the link is, and where it goes to.
| | 04:10 | These navigation options in this extension are useful
because screen readers have functions just like this.
| | 04:16 | You can use this to see what a screen reader user might see in
their own list of links and make sure that the text makes sense.
| | 04:22 | We'll talk more about that in a later movie.
| | 04:24 | Close this box and go to the Style button.
| | 04:28 | Click that and choose high contrast view one.
| | 04:31 | This changes the view of the page to make the
text easier to read for visually impaired users.
| | 04:36 | It makes the text large and changes its color.
| | 04:40 | If we scroll down the page you can see
that some of the text does not change.
| | 04:47 | This is because the way the text has been coded does not allow for changes.
| | 04:51 | This would show you that you would need to make changes to your CSS or
other pieces of your page to make the text more changeable to user changes.
| | 04:58 | Again, we'll talk about that in a later movie.
| | 05:00 | The other two extensions we downloaded were
Fangs, and the Color Contrast Analyzer.
| | 05:05 | These do not show up as tool bars on Firefox, but
these are available from the Context menu that appears
| | 05:11 | when you right-click or on a Mac, Ctrl-click on the page.
| | 05:14 | So that gives you an idea of some of the features
available in the Web Developer and accessibility tool bars.
| | 05:20 | In the next movie we'll look at how to use the other tools
that we've downloaded, Fangs and the Color Contrast Analyzer.
| | Collapse this transcript |
| Using Fangs and the Color Contrast Analyzer| 00:00 | >> In the last movie we used the Web Developer and
accessibility toolbars to make some changes to this page.
| | 00:06 | I've unchecked those options now so the page is back to its default view.
| | 00:09 | Now we're going to use the Fangs and Color Contrast
Analyzer extensions that we also downloaded.
| | 00:14 | To use Fangs you can right-click for Windows or Ctrl
click for Mac on the page to bring up a context menu.
| | 00:23 | Scroll down to the last option which says View Fangs.
| | 00:26 | Click on that, and a new window will open.
| | 00:29 | In this case, the window is blank.
| | 00:31 | It shows no text.
| | 00:32 | This is a common problem when you first install the Fangs extension.
| | 00:35 | Close this window.
| | 00:41 | And we're going to go to the web page
where we downloaded the Fangs extension.
| | 00:46 | We're at www.standards-schmandards.com/projects/fangs/faq.
| | 00:57 | The first question on this page asks about what to do when
the output is blank, which is the problem we just experienced.
| | 01:04 | What we need to do is change some preferences
in Firefox is the about config screen.
| | 01:10 | Open a new tab in Firefox and in the address
bar type about:config and hit Enter or Return.
| | 01:19 | A number of preferences are shown on the page.
| | 01:21 | We need to add the two that were listed on the FAQ.
| | 01:25 | Go back to the FAQ page.
| | 01:28 | Select the first preference name, and
use Ctrl C or Cmd C to copy that text.
| | 01:35 | Also note that the value that we're going to set for
this preference is E N. Go back to the about config tag
| | 01:41 | and right-click or Ctrl click to bring up a context menu.
| | 01:45 | Select New and then click on the String option.
| | 01:49 | In the dialogue box that appears use Ctrl V or Cmd V
to paste in the text that you copied from the FAQ page.
| | 01:57 | Click OK, and the next dialogue box that says
enter string value, type in E N. And click OK.
| | 02:05 | Now we need to set the other preference.
| | 02:07 | Go back to the FAQ page and select the name of the next preference.
| | 02:13 | Use Ctrl C or Cmd C to copy it, and note that
the value that we need to set is default.
| | 02:20 | Go back to the about config tag, right-click
or Ctrl click, select new, and select string.
| | 02:28 | Use Ctrl V or Cmd V to paste in the preference name.
| | 02:32 | Click OK, then in the next box type default and click OK.
| | 02:41 | We can now close this tab as well as the tab for the FAQ.
| | 02:49 | We're now back on the page we want to test.
| | 02:52 | Once again, right-click on the page or Ctrl click on a Mac.
| | 02:57 | Scroll down and select View Fangs.
| | 03:01 | This time when the new window opens up you'll see that it's full of text.
| | 03:05 | The text that is shown emulates what Jaws, a
popular screen reader, would read out to its users.
| | 03:11 | So it's not simply the text on the page but also additional information
such as list of two items as we can see at the top of the page.
| | 03:22 | There are also additional tabs to view a headings list,
and in this case we can see that the page has no headings.
| | 03:30 | We can also click on the third tab to see the links list.
| | 03:34 | This will show us the text of all the links on the page.
| | 03:37 | In a later movie we'll show how to use Jaws and why
the headings list and the links list are so important.
| | 03:42 | You can use Fangs to quickly see if you have
headings marked up correctly, what your link text is,
| | 03:47 | if it's understandable, and the order of the text output on the page.
| | 03:51 | Close the Fangs window now.
| | 03:58 | The next thing we want to analysis on this page is its
color contrast using the extension that we downloaded.
| | 04:04 | Right-click or Ctrl click on the page
again, and select Color Contrast Analyzer.
| | 04:10 | Then click on the All Test option.
| | 04:13 | A new tab will open up showing the results of your test.
| | 04:16 | It analyzing the text color and background color of all of
the text elements on the page and lists them down the report.
| | 04:23 | Any elements that do not pass WCAG guidelines will be highlighted in yellow.
| | 04:27 | For instance, this first piece of text, which is yellow and
red, is passing in the luminosity contrast ratio column.
| | 04:36 | It also passes the difference in brightness test.
| | 04:39 | But the last column on the page shows the
difference in color results and states that it fails.
| | 04:44 | We can scroll down the page to see all elements on the page, what
their colors are, and whether they pass all three of these tests.
| | 04:53 | So now we've seen a number of tools that we can use in Firefox
to test different areas of our pages for their accessibility.
| | 05:00 | Next we're going to look at some online tools that you can use as well.
| | Collapse this transcript |
| Accessibility tools to bookmark| 00:00 | >> Now let's look at some accessibility tools that are
online that you can bookmark and use for testing your pages.
| | 00:06 | Four of these tools are listed on the screen with their URLs.
| | 00:09 | You may want to pause the movie at this point to
write them down and load them in your browser.
| | 00:13 | I'm going to use the same page from the W3C
that we've been testing in these four tools.
| | 00:19 | The URL of it again is www.w3.org/wai/eo/2005/demo/before/index.
| | 00:31 | Go to the address bar and hit Ctrl C or Cmd C to copy the URL.
| | 00:39 | Then open up the first tool at the URL colorfilter.wickline.org.
| | 00:45 | This tool asks you to put in an URL to a page and then
choose a type of colorblindness to emulate on that page.
| | 00:52 | Go down to the type URL box and hit Ctrl V or Cmd V to paste in the URL.
| | 00:59 | In the Select box below you'll need to pick a type of color filter.
| | 01:04 | The filters shown are different types of colorblindness.
| | 01:06 | The two at the top, the red-green colorblindness are the most common.
| | 01:10 | So you might want to start with testing those.
| | 01:12 | I'm going choose protanopia.
| | 01:15 | Then click the Fetch and Filter button.
| | 01:17 | The tool will load the page with different
colors to simulate this kind of colorblindness.
| | 01:24 | It might take a few minutes for it to load
all of the images since it has to remake them.
| | 01:31 | You can see that the colors and the images have changed dramatically.
| | 01:34 | The red and green from the images has basically been stripped out.
| | 01:38 | This box on the right-hand side of the page allows you to choose different
settings to test your page with different types of colorblindness.
| | 01:45 | Let's go to the second tool now.
| | 01:46 | Go to the URL www.vischeck.com/vischeck/vischeckimage.php.
| | 01:56 | This is another tool for emulating different types of
colorblindness, but with this tool you up load and image file to check.
| | 02:04 | Go down to the image file box and click on the Browse button.
| | 02:08 | If you're following along with the exercise filed,
inside the Chapter Two folder is an image named coffee.
| | 02:18 | Select that image and click Open.
| | 02:22 | Now you can click on the run vis check button to change this image
for how it would look for this chosen type of colorblindness.
| | 02:35 | Once again it will take a few moments while the
tool up loads the image and changes its colors.
| | 02:40 | Let's scroll down the page to see the full image.
| | 02:45 | You can see that with this type of colorblindness it's impossible
to distinguish the different colors in these coffee beans.
| | 02:53 | So for instance if you had a chart or another type of image where color
was important and you're asking your users to choose something based
| | 03:00 | on that color, it would be impossible for
them to do so in those sorts of situations.
| | 03:04 | The third tool that we're going to look at is at
www.snook.ca/technical/color_contrast/color.html.
| | 03:20 | This tool does the same thing that the
Firefox extension we downloaded earlier does.
| | 03:25 | It checks the contrast between the text color and its background color.
| | 03:28 | The difference between this tool and the tool, however, is
that this one allows you to quickly change the colors so that
| | 03:34 | if you are failing a certain color contrast test you
can quickly choose a new color and see if it passes.
| | 03:41 | To change the colors, scroll down to either the
foreground color or the background color box.
| | 03:46 | I am going to change the background color.
| | 03:48 | There are three sliders to change the red, green, and blue values.
| | 03:52 | Click on the red slider and move it to the left.
| | 03:55 | You'll see in the results box to the right
the calculated brightness difference
| | 03:59 | and color difference, and then whether or not these values are compliant.
| | 04:03 | It will either say yes, no, or sort of.
| | 04:05 | Sort of means that it only passes one of the two tests.
| | 04:09 | Ideally, you would want it to say yes.
| | 04:10 | So let's keep moving the slider to the left.
| | 04:17 | Now it says no.
| | 04:18 | So we definitely want to change these colors.
| | 04:24 | Going all the way to the left has just made it worse.
| | 04:27 | Let's slide this back to the right.
| | 04:33 | We now have a value of yes, meaning we pass the color contrast test.
| | 04:37 | The last tool is a readability test.
| | 04:41 | It's online at juicystudio.com/services/readability.php.
| | 04:48 | If you scroll a little ways down the page you'll see
a form labeled test the readability of a web site.
| | 04:54 | Here you can put in a URL and click the Calculate Readability button
| | 04:58 | to have the tool measure how easy it is to
read and understand the text on the page.
| | 05:03 | Click inside the box, and once again hit Ctrl V or
Cmd V to paste in the same URL that we used earlier.
| | 05:12 | Then click on Calculate Readability.
| | 05:14 | A report will come up showing you information
about the text on the page you just checked.
| | 05:19 | The three rows at the bottom of the table are the names of three tests.
| | 05:23 | The Gunning Fog index and Flesh Kincaid Grade.
| | 05:26 | Both assign you a number that corresponds with the
grade level that this would be appropriate reading for.
| | 05:31 | The flesh reading this under is between 1 and 100.
| | 05:34 | Generally, you want to get a value between 60 and 70.
| | 05:37 | So it looks like this page will be easy to read for a number of people.
| | 05:41 | These are just a few online tools that
you can bookmark and use for testing.
| | 05:45 | Next we'll look at some other tools online that give you a
more comprehensive analysis of the accessibility of your pages.
| | Collapse this transcript |
| Using automated accessibility checking tools| 00:00 | >> We've looked at some tools that will allow you to analyze certain
parts of your web site, or analyze them for certain disabilities.
| | 00:07 | But now we're going to look at tools that will test your
web site for their compliance with Section 508 or WCAG.
| | 00:13 | For this we're going to continue to use the
city lights page on the W3.org web site.
| | 00:18 | Go to the address bar and select and copy the URL using Ctrl C
or Cmd C. Then we're going to go to the Cynthia Says web site.
| | 00:27 | The URL is www.cynthiasays.com.
| | 00:31 | This is a very popular web site accessibility validator.
| | 00:34 | If we scroll down the page we can see a form asking us for our web page.
| | 00:43 | Click in that box, highlight over the default text and
delete it, then use Ctrl V or Cmd V to paste in our URL.
| | 00:51 | In the next field on the form we're asked
to choose an accessibility report mode.
| | 00:56 | Click on the drop down box and either choose Section
508 or WCAG priority 1, 1 and 2 , or 1, 2, and 3.
| | 01:03 | We'll choose Section 508 for this test.
| | 01:06 | The first check box listed does not apply to this
test since we're not testing against WCAG standards.
| | 01:12 | The next check box asks us if we want to
include the alternative text quality report.
| | 01:16 | This checks to make sure that your old
text is not only present, but high quality.
| | 01:20 | So check that box.
| | 01:22 | You don't need to change anything for the emulate this browser option.
| | 01:26 | So click Test Your Site.
| | 01:27 | And the report will load.
| | 01:32 | Each of the standards of Section 508 is tested.
| | 01:35 | Let's scroll down the page and see how we did.
| | 01:38 | The first 508 rule states a text equivalent
for every non-text element shall be provided.
| | 01:44 | Underneath the rule are listed all of the problems
that we currently have complying with this rule.
| | 01:48 | On the right-hand column that says passed, there
are three sub columns labeled yes, no, and other.
| | 01:54 | We have a no in this column, meaning we're
not currently complying with this rule.
| | 01:58 | In order to pass we would have to fix the
failures that are listed in the main column.
| | 02:04 | Continue to scroll down the page.
| | 02:06 | The next test does not have a yes or no
written, but instead an NA for not applicable.
| | 02:13 | That's because this test is looking for equivalent
alternatives for multimedia presentations,
| | 02:18 | and the validator did not find any multimedia on this page.
| | 02:22 | Continue to scroll down to get to the third row of the table.
| | 02:27 | For this rule neither yes, no, or NA is filled in.
| | 02:31 | This means that this rule has to be tested by a human of the there's
no way for a machine to be able to tell if the color you're using
| | 02:37 | on the page is conveying information or if it's just decoration.
| | 02:41 | Any time you get a blank result such as here, it means that you
need to do manual testing to make sure that you're complying.
| | 02:47 | As we continue to scroll down the page you'll
notice that a number of rows are blank.
| | 02:53 | This illustrates what we talked about earlier, that
it's very important to test your pages with people.
| | 02:58 | No machine is going to be able to truly know if you
complied with these standards and made your page accessible.
| | 03:04 | Let's try another popular web accessibility validator.
| | 03:09 | This one is located at www.webxact.com.
| | 03:16 | On this page there's only one form field
for us to fill out with our page URL.
| | 03:20 | Highlight over the default text, delete it, and use
Ctrl V or Cmd V to paste in the same URL we used before.
| | 03:28 | Then click on the go button.
| | 03:30 | This test, unlike Cynthia Says, includes information
on a lot more than just accessibility of your page.
| | 03:36 | In includes information such as the file size of
the page, when it was last updated, it's meta data,
| | 03:43 | and more information that doesn't necessarily
have a bearing on accessibility.
| | 03:48 | If we scroll back up the page, though, the third
tab over on the left is named accessibility.
| | 03:55 | Click on that tab, and you can see the details of our accessibility test.
| | 04:00 | By default, this tool checks against WCAG 1.0,
including priority 1, 2, and 3 check points.
| | 04:06 | At the top of the page you have a summary of the number of
errors as well as warning that are generated by the test.
| | 04:12 | Warnings mean that your page has not failed but that there
might be something there that you need to manually check.
| | 04:17 | If we scroll down the page the priority 1 check points are
listed first with their errors at the top and the warnings below.
| | 04:27 | The number and the name of the check point are given, then you're
told the number of times this error or warning has occurred,
| | 04:33 | and finally line numbers where this error or warning is happening in
your document so you know exactly where to go to fix the problems.
| | 04:40 | Both of these tools are a good way to quickly check if you have all text
on your images and other things that can be determined by a machine.
| | 04:47 | But as you see there are many thing that's
need to be determined by manual testing.
| | 04:51 | Next we'll do some manual testing with the Jaws screen reader program.
| | Collapse this transcript |
| Setting up the JAWS screen reader on Windows| 00:00 | >> In this movie we're going to install and
use Jaws, a popular screen reader for Windows.
| | 00:05 | If you're on a Mac this movie wouldn't apply to you, but in
the next movie we'll go over a screen reader that comes built
| | 00:11 | into Mac OS X. Jaws is a software program used by blind
and visually impaired users to read off the screen to them.
| | 00:18 | It's made by freedom scientific, so you
can download it from their web site.
| | 00:22 | We're at www.freedomscientific.com/fs_downloads/jaws.asp.
| | 00:31 | Jaws is not a free program, but a free demo is offered
that will run for 40 minutes at a time on your computer.
| | 00:37 | After 40 minutes you'll need to restart in order to use Jaws again.
| | 00:41 | But this demo version does have all of
the same features that a full version has.
| | 00:46 | Scroll down the page and look for the heading
that says demonstration version of Jaws.
| | 00:52 | Click on the free demo of Jaws link to download the installer.
| | 00:59 | Click on the Save File button, and the downloader will begin installing.
| | 01:03 | Once the installer file has finished downloading
you'll see it on your desktop.
| | 01:08 | Double-click on this file to open it and go through the installation
process as you would for other programs on your computer.
| | 01:14 | One thing that does differ with the Jaws installation is that
you'll need to restart your computer early on during the install.
| | 01:20 | After you've restarted Jaws will finish installing.
| | 01:23 | Once Jaws has finished installing you'll
have an icon for the program on your desktop.
| | 01:27 | Double-click on it to begin the program.
| | 01:29 | It will immediately begin reading the contents
on your screen as well as some other information.
| | 01:36 | >> Jaws, 40 minute mode, dialogue audio monitor, toolbar, 100%.
| | 01:41 | To activate, press the space bar.
| | 01:44 | >> Now we want Jaws to read a web page.
| | 01:45 | So let's open Firefox.
| | 01:47 | Go to the Start menu.
| | 01:49 | >> Menu, start search edit.
| | 01:51 | To move through items press up or down arrow.
| | 01:53 | >> Control up in the Start menu.
| | 01:56 | Go up and select Mozilla Firefox.
| | 01:58 | >> Desktop, folder view, list view, now selected Jaws three of three.
| | 02:02 | To move items use arrow keys.
| | 02:05 | >> The web page that we want to test is
part of the W3C's before and after pages.
| | 02:10 | Go to the address bar and type in www.w --
| | 02:17 | >> 3.org/wai/eo/2005cemo/after/index.
| | 02:27 | Enter. Leaving menus.
| | 02:28 | Welcome to city lights, welcome to city lights.
| | 02:35 | 100%.
| | 02:38 | >> As you heard, Jaws read allow every key as I typed it.
| | 02:44 | When the web page loaded it then read the title of the web page.
| | 02:47 | In order to get Jaws to start reading the full contents of the
page you'll use the keyboard shortcut insert, and the down arrow.
| | 02:54 | This will make Jaws start reading from top to bottom on the page.
| | 02:58 | To stop the speech at any time hit the Ctrl key.
| | 03:01 | I am going to hit insert down arrow to start reading the page.
| | 03:04 | >> Go button, traffic colon, construction work on
main road today colon, Friday, 27 January, 2006.
| | 03:12 | Sunny spells, 23 degrees, see navigation menu.
| | 03:15 | Colon. List of four items, Home link News link
tickets, visit link survey, level one welcome to city lights.
| | 03:23 | >> Then I hit the Ctrl key to stop the speech.
| | 03:26 | Jaws literally has dozens and dozens of keyboard short cuts.
| | 03:29 | That's because a blind user will use the keyboard as their
main way of navigating their operating system and browser.
| | 03:35 | We're just going to look at a few of the keyboard
short cuts that are useful when testing web pages.
| | 03:40 | To bring up a list of headings in the page hit Insert and F6
| | 03:44 | >> Adding list dialogue, adding list view.
| | 03:47 | Welcome to city lights, colon, 1, 1 of 7.
| | 03:50 | To move to item view use arrow keys.
| | 03:52 | >> The heading list it one of the main navigation
mechanisms that screen reader users take advantage of.
| | 03:58 | Instead of having to listen to all of the content on the
page read out at once, seeing the headings gives them a way
| | 04:03 | to basically skim the page, just as a sighted user would do.
| | 04:07 | The text of each heading as well as which level it is, is shown again
so the user can get a sense of the structure and hierarchy of the page
| | 04:14 | and decide what part they want to jump to and read the content of.
| | 04:18 | You can use the arrow keys in this box to jump between headings.
| | 04:21 | >> Heat wave linked to temperatures, colon 2.
| | 04:23 | >> To select this heading and go to it on the page, hit Enter.
| | 04:27 | >> Enter. Heat wave link to temperatures heading level two link.
| | 04:30 | >> It will read the text of the heading.
| | 04:32 | If you want it to continue reading from that
point, again, hit Insert and the down arrow.
| | 04:37 | Another way that Jaws users frequently navigate a web
site is by looking at the list of links at the web site.
| | 04:43 | You can bring this up by hitting Insert and F7.
| | 04:46 | >> Link list dialogue, link list view, heat wave link to
temperatures, (Inaudible) to move to item view use the arrow keys.
| | 04:54 | >> The link that we are currently on is
the one that is first read in this box.
| | 04:58 | Again, you can use the arrow keys to move up and down between the links.
| | 05:02 | >> Survey.
| | 05:03 | >> Selecting the link reads out the text of that link, but not the URL.
| | 05:06 | That's why it's important that your link text be clear on its own.
| | 05:10 | We'll talk about that in greater detail later.
| | 05:12 | If you hit Enter you'll be taken to that link.
| | 05:15 | >> Enter.
| | 05:16 | >> That will immediately take you to the new page.
| | 05:18 | There are also keyboard shortcuts for
jumping between different items on the page,
| | 05:22 | such as from one heading to the next,
from one list to the next, and so forth.
| | 05:27 | Here are some of those keyboard short cuts that you'll
probably use the most when using Jaws to test your web pages.
| | 05:33 | The H key jumps you from heading to heading.
| | 05:36 | U moves you to the next unvisited link, while V to the next visited link.
| | 05:40 | N moves you to the next non-linked text.
| | 05:42 | This is useful for screen reader users when there are a lot of
links at the top of the page that they want to quickly get past.
| | 05:48 | Hitting end will jump them to the next block of text that is
not linked, which hopefully is the main content of the page.
| | 05:55 | The L button moves to the next list, and F to the next form control.
| | 05:59 | You can also type S to move to the next element
that's of the same type that you're on now.
| | 06:03 | For instance, if you're on a block quote and wanted to go to the next block
quote you could hit S. D would do the same for a different type element.
| | 06:11 | Finely, the Enter key as we saw activates links.
| | 06:15 | These are just a few of the commands available in Jaws.
| | 06:18 | It's a very complex program that has a steep learning curve.
| | 06:21 | That's why it's so important to test your pages with real users of Jaws.
| | 06:26 | However, using it yourself should give you an idea of what they might
experience and should point you towards the main issues you'll want to fix.
| | 06:33 | Next we're going to look at the voiceover screen reader on a Mac, and
then we'll move on to setting Dreamweaver's accessibility preferences.
| | Collapse this transcript |
| Using the VoiceOver screen reader on Mac OS X| 00:00 | >> Voiceover is screen reading software built into Mac OS X. It doesn't
work quite like Jaws and other screen readers available on Windows,
| | 00:08 | and it doesn't have most of the features that
Jaws offers for reading and navigating web pages.
| | 00:13 | But keep in mind that it is in its first
release, while Jaws is currently at version 8.02.
| | 00:18 | We'll be using Jaws for testing web pages throughout the
rest of the title, as it is the most popular screen reader.
| | 00:24 | But Voiceover is gaining in popularity and support,
so it's worthwhile to get a feeling for how it works.
| | 00:30 | Voiceover is most useful for navigating the Mac operating
system, but it can read web pages when viewed in Safari.
| | 00:37 | If you're following along with the exercise files, open the file index.html
in Safari that's located in the Chapter Two folder of the exercise files.
| | 00:47 | To start Voiceover, press Cmd and F5 on your keyboard.
| | 00:51 | >> Voiceover on, Safari, Town of Wardscott window.
| | 00:55 | Back, End button --
| | 00:55 | >> To stop Voiceover from speaking at any
point hit the Ctrl button on your keyboard.
| | 01:01 | To begin navigating between items on the
screen, to hear how Voiceover reads them,
| | 01:06 | use the key combination Ctrl, option, and the right or left arrow.
| | 01:10 | >> Forward button, reload button, Add Bookmark button.
| | 01:14 | >> To navigate into the content area of
the page continue to press Ctrl, option,
| | 01:19 | and the right arrow until the content area
of the page is selected with a black outline.
| | 01:25 | >> File, slash, slash, slash, splinter.
| | 01:27 | Blank, show Bookmark, Apple, Amazon, eBay,
Yahoo button, news, 100 -- HTML content.
| | 01:36 | >> If you'd like Voiceover to read all of the content
within a highlighted area, you can press control, option,
| | 01:41 | and A. I'm going to press those keys now
to see how Voiceover will read this page.
| | 01:47 | >> HTML content, image, image, image, image, image, image, image, image,
image, image , image, image, image, image, image, news, July 2, 2008.
| | 01:58 | Time to celebrate library's 70th anniversary.
| | 02:02 | May 26, 2008.
| | 02:05 | Council approves construction of community theater.
| | 02:08 | May 24 --
| | 02:09 | >> I've hit the control key to stop Voiceover from reading the page.
| | 02:14 | I can then move manually between items on the page
using Ctrl, option, and the right or left arrows.
| | 02:21 | >> Police search for hit and run suspect.
| | 02:25 | >> To move to the previous object, hit Ctrl, option, and the left arrow.
| | 02:29 | >> May 24, 2008.
| | 02:32 | >> There are basically two separate ways that Voiceover can read web pages.
| | 02:36 | It can either read every item on the page individually,
or it can group related items together to read.
| | 02:42 | To change this preference open the Voiceover
utility by pressing Ctrl, option, and F8.
| | 02:49 | >> Opening Voiceover utility.
| | 02:51 | Voiceover utility, Voiceover utility window,
Verbosity selected Tab 1 of 5 --
| | 02:55 | >> We can live to the second tab labeled navigation
by pressing Ctrl, option, and the right arrow.
| | 03:02 | >> Navigation, Tab 2 of 5
| | 03:03 | >> To select that tab, press Ctrl, option, and the space bar.
| | 03:08 | >> Navigation, selected Tab 1 of 5 --
| | 03:11 | >> To move down in this screen press Ctrl, option, an the down arrow.
| | 03:17 | >> Voiceover cursor moves newly loaded web page, check, check box.
| | 03:22 | >> This first option specifies whether Voiceover should
immediately begin reading a web page when it is first loaded.
| | 03:29 | Move down to the next option again using Ctrl, option, and the down arrow.
| | 03:33 | >> Two items in web pages on check, check box.
| | 03:37 | >> To check this item, press Ctrl, option, space bar.
| | 03:41 | >> Check two items in web pages.
| | 03:44 | Check box.
| | 03:45 | >> Now close the Voiceover utility using Cmd W.
| | 03:49 | >> Safari Town of Wardscott window, May 24, 2008.
| | 03:55 | >> Now let's see how Voiceover will group the items on the page.
| | 03:58 | Press Ctrl, option and the left arrow.
| | 04:00 | >> Group: The Wardscott Heritage Festival, one of our
town's greatest events of the year is almost here.
| | 04:09 | >> I press the Ctrl key to stop Voiceover from reading.
| | 04:12 | As you can see, Voiceover does not always read the
content on web pages in the order that you would expect.
| | 04:18 | And it may negligent to read entire pieces of the page,
especially with the group web pages option turned on.
| | 04:24 | Don't worry too much about this when you're testing your pages.
| | 04:27 | This is a problem on the software's end, not on the web page end.
| | 04:31 | Still, if you're on a Mac, try using Voiceover in Safari for the
experience and to see if you can fix any small issues that you hear.
| | 04:38 | Voiceover does not have all of the short cuts to bring
up lists of items on the page and jump between them.
| | 04:44 | But you can bring up a list of links in the page and a list of items.
| | 04:48 | To bring up the list of links hit Ctrl option U.
| | 04:53 | >> Link Chooser menu, 11 items.
| | 04:55 | >> You can then navigate between the links
using up and down arrows on the keyboard.
| | 05:01 | >> View more news releases, schedule of free performances,
buy discount tickets to rides --
| | 05:06 | >> Hit the Escape key to close the link chooser.
| | 05:10 | >> Closing link chooser menu.
| | 05:12 | >> To bring up the list of items, hit Ctrl option I on the keyboard.
| | 05:17 | >> Building item, item chooser menu, 83 items.
| | 05:21 | >> This is an alphabetical list of all
of the controls and content on the page.
| | 05:25 | Again, you can navigate between the items using the up and down arrows.
| | 05:31 | >> and / and submitted blank / from the past year / have been implemented.
(Reading aloud as Zoe scrolls down)
| | 05:35 | >> To close the item chooser, hit the escape key.
| | 05:39 | >> Closing item chooser menu.
| | 05:41 | >> So although Voiceover does not have all
of the features that Jaws on Windows offers,
| | 05:45 | it's a good option to use for screen reader testing if you're on a Mac.
| | Collapse this transcript |
| Setting Dreamweaver accessibility preferences| 00:00 | >> Before we start building web pages in Dreamweaver CS 3, there are
a few accessibility preferences that we want to make sure are set.
| | 00:07 | On Windows you can view these preferences by going to the Edit menu.
| | 00:12 | On a Mac the preferences are available by going to
the Dreamweaver menu and then selecting Preferences.
| | 00:18 | At the very bottom of the Edit menu is the option for preferences.
| | 00:25 | Select that to open the Preferences dialogue box.
| | 00:28 | On the left are a list of categories of preferences.
| | 00:31 | The second one from the top is accessibility.
| | 00:34 | Click on that.
| | 00:35 | There are four check boxes that say show attributes
when inserting form objects, frames, media, and images.
| | 00:42 | These are checked by default, but if you've changed your copy of
Dreamweaver, you might want to go and make sure that they're still checked.
| | 00:48 | These two check boxes further down the screen pertain
to Dreamweaver's accessibility as a program itself,
| | 00:54 | so changing these effects how the program would
be used if you were using assistive technology.
| | 00:59 | We're just concerned about the preferences that
effect the code that is going to be written.
| | 01:03 | Click OK to accept any changes you have made.
| | 01:08 | To see what these preferences do, let's create a new page.
| | 01:11 | Go to the File menu and select the first option,
New, to bring up the New Document dialogue box.
| | 01:18 | In the first column of the box click on Blank Page.
| | 01:21 | In the page type column select HTML.
| | 01:23 | In the layout column select none.
| | 01:27 | Then hit Create.
| | 01:29 | The four preferences that we set pertain
to form objects, images, media, and frames.
| | 01:35 | Let's look at inserting a form object to see how the preference effects it.
| | 01:39 | Go to the insert result panel and select the forms tab.
| | 01:43 | Click on the text field button.
| | 01:47 | The input tag accessibility attributes dialogue box appears.
| | 01:51 | Without that accessibility preference checked
for form objects we would never see this box.
| | 01:56 | What this box is asking for is a text label for our fields.
| | 02:00 | These parameters are things that affect accessibility.
| | 02:03 | By having that preference checked Dreamweaver gives you
a reminder every time you insert one of those objects.
| | 02:09 | We'll go over this in great detail in a later movie.
| | 02:12 | For now we just wanted you to see the effect
of turning the accessibility features on
| | 02:16 | and make sure you have them set correctly as
we begin to build our site in the next chapter.
| | Collapse this transcript |
|
|
3. Creating Accessible Page LayoutsAvoiding tables for layout| 00:00 | >> Traditionally, web designers have used HTML
tables for defining the layout of the page.
| | 00:05 | However, using tables for visual formatting not only violates the practice
of separation of content and presentation that we talked about earlier,
| | 00:13 | but also can provide problems for screen readers and text
browsers who need to reflow The page in a linear way,
| | 00:19 | as well as people who prefer to read web pages at very
narrow width, such as people with tunnel vision or dyslexia.
| | 00:27 | Screen readers method of reading table context is called linearization.
| | 00:31 | They basically read from top to bottom and left to right.
| | 00:34 | They start in the first row, read every cell in that row
in order, and then move onto the second row and so on.
| | 00:41 | If there's a nested table in any of the cells that whole nested table
is read following the same order before moving onto the next cell.
| | 00:48 | So the order the content appears in the
source is the order that it will be read.
| | 00:52 | To check your reading order, then, you just need to look at the source.
| | 00:56 | But you can also use some of the tools that we went over earlier.
| | 00:59 | You could use Jaws or another screen reader, of
course, or you could use Lynx, a text browser,
| | 01:03 | or the Firefox extension Fangs, which outputs a text version of your page.
| | 01:08 | Let's look at a couple examples of simple tables to
make sure we understand how they're going to linearize.
| | 01:14 | If you're following along with the exercise files I have open
Table1.html and Table2.html from the Chapter Three exercise files.
| | 01:23 | Table1.html is a very simple table.
| | 01:26 | In this table the first cell that would be read would
be the top left cell, with the text name of the site.
| | 01:31 | The next cell that would be read would be the next one in the row.
| | 01:34 | So it would be the second cell with the text tag line.
| | 01:38 | The third item read would be the third cell
in the first row with the text search bar.
| | 01:43 | After this row is completed being read the screen reader would go
onto the second row starting with the left-most cell, navigation menu.
| | 01:52 | Then it would read main content, then it would read featured items.
| | 01:56 | So in this simple case the linearization is probably OK.
| | 02:00 | It will probably make sense to people
using a screen reader or text browser.
| | 02:04 | However, the user would have to listen to the entire
navigation menu read before they got to hear the main content.
| | 02:11 | If there are a number of items in that menu that could become a problem.
| | 02:15 | There are ways that we can get around
this, as we'll talk about in later movies.
| | 02:18 | But many times linearization disconnects related
content from each other so that it doesn't make sense,
| | 02:24 | or it makes the user hear even more less important content
before they finally get to the content they were wanting.
| | 02:30 | Table2.html is a slightly more complex table that illustrates this.
| | 02:35 | It's the same table except in the main content
cell another table has been nested within.
| | 02:41 | This table also has two rows and three columns.
| | 02:44 | The order that this content would be read would
be header 1, then header 2, then header 3,
| | 02:51 | followed by the story 1 text cell, story 2 text, and finally, story 3 text.
| | 02:58 | So this example shows headings disconnected from their content.
| | 03:01 | So the text that will be read doesn't have the
correct context and probably would be confusing.
| | 03:06 | It could also even be misleading depending on the text of the third
header and the text of the story 1 content that would be read in order.
| | 03:14 | Although there are changes that we could make to the
table itself to make this bad example linearize better,
| | 03:19 | many real-world sites are too complicated to modify for compliance.
| | 03:23 | In those cases, CSS should be used for laying out the site.
| | 03:26 | We'll talk about that next.
| | Collapse this transcript |
| Using CSS for layout| 00:00 | >> Although it's acceptable to continue using tables for layout if they
linearize well, it's a really good idea to reserve the use of tables
| | 00:06 | for data, as we'll talk about in a later chapter, and instead
using CSS for controlling your layout and all other formatting.
| | 00:14 | CSS layouts have advantages beyond avoiding the accessibility
difficulties that were presented in the last movie.
| | 00:20 | Using CSS for layout usually greatly reduces the file
size of all of your pages, as well as their load times
| | 00:26 | and the amount of bandwidth that you use on your server.
| | 00:29 | CSS also makes it easier to keep the layout
and look consistent between pages,
| | 00:34 | which as we talked about in the first chapter,
is an important aspect of accessibility.
| | 00:38 | It also makes it easier to update the look of the site or even redesign it.
| | 00:43 | There are even advanced CSS techniques that allow you to
move the most important content up first in the source
| | 00:49 | so that it will be the first thing read by screen readers and also can
improve your search engine rankings since content that comes further
| | 00:56 | up in the page is weighted more by the search engines, and
also the reduced amount of markup in the page changes the ratio
| | 01:03 | of code to keywords, increasing your keyword density.
| | 01:06 | So with all of these advantages in mind, how do you make a CSS layout?
| | 01:11 | You still need something to structure
the page, so instead of using a table,
| | 01:14 | you use DIV elements to group the content
of the page into related sections.
| | 01:19 | DIVs are just generic HTML elements that can be assigned
an ID attribute to uniquely identify each one on the page.
| | 01:26 | The CSS then targets these ID's to format and position each DIV.
| | 01:31 | Because of this different structure, it really requires
a different type of mindset to make CSS layouts
| | 01:36 | than table layouts, so it really can be tricky to do at first.
| | 01:39 | You're no longer looking at things in rigid grids like you were with
tables and you have to start thinking of things as chunks of content
| | 01:46 | that can be layered on top of each other and moved around the page.
| | 01:49 | Although tricky at first, there are many resources to help you make
reliable CSS layouts, such as Dreamweaver CS3's pre-made layouts.
| | 01:58 | Dreamweaver CS3 comes loaded with a number of pre-made
CSS layouts that you can use for your own sites.
| | 02:04 | They're accessible by going to the File menu then selecting New.
| | 02:11 | This brings up the New Document dialogue box.
| | 02:13 | If you select the Blank Page option on the left side of
the box, then select the HTML option under Page Type,
| | 02:23 | this then shows in the third column the descriptive
names of all the pre-made layout options available.
| | 02:29 | If we scroll through the list we can see the
many options that we have to choose from.
| | 02:33 | In the next few movies we'll explore a few of these pre-made layouts.
| | Collapse this transcript |
| Creating a fixed-width layout| 00:00 | >> There are three basic types of CSS
layouts that Dreamweaver CS3 offers as part
| | 00:05 | of its pre-made layouts: fixed width, elastic width and liquid width.
| | 00:10 | We're going to start out by looking at a fixed width layout.
| | 00:13 | Fixed width means that the overall width of the design is
constrained to a particular pixel width that the designer has chosen.
| | 00:20 | Although this type of layout is the least
optimal in terms of accessibility,
| | 00:24 | as we'll go over in detail later, it's
also the easiest type of layout to build.
| | 00:28 | So it's a good place to start our practice with CSS layout.
| | 00:31 | To create a new fixed width layout, go to the File menu, click on New,
| | 00:38 | in the New Document dialogue box click on
blank page in the left most column of the box.
| | 00:45 | In the second column, select HTML.
| | 00:48 | In the third column labeled Layout, choose the layout
labeled Two column fixed left side bar header and footer.
| | 00:56 | The image that appears in the fourth column gives you
an idea of what this layout is going to look like.
| | 01:01 | The padlock icon on this image indicates that it's a fixed width layout.
| | 01:06 | We next have to choose a document type for our page.
| | 01:09 | We can choose between HTML 4.01 transitional
and strict and various versions of XHTML.
| | 01:16 | I'm going to choose HTML 4.01 Strict.
| | 01:19 | Our next option is to choose where we want to add the CSS for the style.
| | 01:25 | We can add it to the head of the page so that all of the
rules will be listed out inside a style element in the head.
| | 01:31 | We can add it to a file separate from the HTML page, which
Dreamweaver will automatically attach to the page for you.
| | 01:38 | Or our third option is to link to an existing file, and
we would only use this when we didn't want Dreamweaver
| | 01:43 | to create any CSS but just create the structure of this page for us.
| | 01:48 | Choose the Add to Head option.
| | 01:49 | Even though on real sites it's best to keep all the styles in
external style sheets, it's very helpful to keep the styles
| | 01:55 | in the head while you're building the page for easy reference and
not having to switch back and forth between multiple documents.
| | 02:02 | Once you've finished editing the styles you can
easily move them to an external style sheet.
| | 02:07 | Now that we have all the settings correct, click on the Create button.
| | 02:12 | Dreamweaver creates a new page with placeholder content
to help you visualize the page and how it's going to look.
| | 02:18 | Each of the sections of the page is labeled with its purpose.
| | 02:21 | The first DIV on the page is named header.
| | 02:24 | The next DIV is named side bar one.
| | 02:27 | The main content DIV is named, of course, main content.
| | 02:31 | And if we scroll down to see the bottom of
the page we can see our footer at the bottom.
| | 02:37 | Let's preview this page in a browser so that we can
see what a fixed width design looks and works like.
| | 02:43 | Go to the document tool bar and click on the globe
icon to bring up the Preview in Browser menu.
| | 02:50 | Select Preview in Firefox.
| | 02:52 | We're prompted to save the page, so click Yes
and save it to the Chapter 3 exercise folder.
| | 02:59 | I'm going to name it fixed.html.
| | 03:03 | Then click Save.
| | 03:07 | Once it's saved you'll see the page in Firefox.
| | 03:10 | Right now our browser window is maximized, but if I click the button
to restore down its size, I can then resize the browser window
| | 03:18 | to different widths and see how this affects the page.
| | 03:22 | So try making your browser window narrower and wider.
| | 03:27 | The design stays centered, but it doesn't resize.
| | 03:31 | Another thing that we can test is how the design
will hold up when we change the text size.
| | 03:36 | You can enlarge the text by holding down Ctrl
and the plus key or Cmd and the plus key.
| | 03:41 | Every time you hit that button combination the text will get bigger.
| | 03:46 | To make the text smaller you can use the
Ctrl and dash key or the Cmd and dash key.
| | 03:52 | Again, every time you hit these keys the text will get smaller.
| | 03:57 | Once again, the width of the design did not change.
| | 03:59 | The text reflowed, but the width stayed the same.
| | 04:03 | Close the browser window now and go back to Dreamweaver.
| | 04:07 | Let's look at the CSS that is making this page fixed in width.
| | 04:10 | Open the CSS panel group and click on the CSS styles tab, then click
the all button to reveal a list of all the styles in the document.
| | 04:19 | You'll need to click the plus sign next to the style element.
| | 04:22 | The second style listed is the one we want to look at.
| | 04:25 | I'm going to pull these other panels down so
that we have more room to look at the CSS.
| | 04:30 | All of the properties for this rule are shown in the CSS panel.
| | 04:34 | You can see the width property is set and its value is set to 780 pixels.
| | 04:40 | This is what is making the design fixed width.
| | 04:42 | There's nothing in the markup that is doing it.
| | 04:44 | If you wanted to customize one of Dreamweaver's fixed width
layouts, this is where you would look to change the width.
| | 04:50 | So it's pretty simple to create and customize
a CSS layout in Dreamweaver CS3.
| | 04:55 | But when we were looking at it in the
browser we saw some accessibility problems.
| | 04:59 | The user cannot resize the design to make the text
flow in a way that is easier for them to read.
| | 05:04 | Another problem is that if a user has very large text, such as
a vision impaired user, only a couple of words may fit on a line
| | 05:12 | of text, which can make the flow of reading difficult.
| | 05:14 | On the other hand, many people with dyslexia or tunnel
vision would prefer a narrow design with shorter line length.
| | 05:20 | But again, they are not able to resize the design to suit this.
| | 05:24 | This doesn't mean that you should never use fixed width layouts.
| | 05:27 | Remember, accessibility is a scale.
| | 05:30 | It's not an on or off characteristic.
| | 05:32 | There are some types of sites that has content that are well suited to
a fixed width layout, or it might be a requirement from your client.
| | 05:39 | So if you feel you need to create a fixed width design, that's okay.
| | 05:42 | Just be aware of its limitations.
| | 05:45 | Next we'll look at a couple of layout types
that are higher up on the accessibility scale.
| | Collapse this transcript |
| Creating an elastic layout| 00:00 | >> Another type of layout that's possible with CSS,
but not tables, is commonly called an elastic layout.
| | 00:06 | This refers to its ability to start at a fixed
size but expand like a rubber band if needed.
| | 00:11 | These layouts are flexible because they're built with relative units.
| | 00:15 | Their width is relative to the width of the user's font size.
| | 00:18 | This is a pretty strange concept to talk about without seeing it in action,
| | 00:22 | so let's create an elastic layout from
one of Dreamweaver's pre-made layouts.
| | 00:25 | We'll follow the same steps that we used for creating the
fixed width layout, so go to the File menu and click New.
| | 00:32 | In the new document box this time, in the layout column, we're
going to choose 2 column elastic, left side bar, header and footer.
| | 00:41 | You'll see a different image this time
to denote that it's an elastic layout.
| | 00:45 | Again, I'm going to choose HTML 4.0 Strict for the doc
type and keep Add to Head for the Layout CSS selected.
| | 00:52 | Click Create.
| | 00:54 | So far, our page looks exactly the same.
| | 00:56 | So let's preview it in a browser.
| | 00:59 | Go to the globe icon on the document tool
bar and select preview in Firefox.
| | 01:05 | Again, we'll be asked to save the pages to our change,
| | 01:07 | so click Yes and save it to the Chapter 3 exercise
files folder as elastic.html then click Save.
| | 01:16 | Let's do the same thing we did with the fixed width
design and try changing the width of the browser window.
| | 01:24 | So grab the bottom corner and make the window narrower and wider.
| | 01:28 | So far the width hasn't changed and it
looks just like the fixed width layout.
| | 01:32 | But now we're going to try changing the size of the text.
| | 01:35 | Again, you can do that in Firefox by holding down the
Ctrl and plus key, or Cmd and plus key, on your keyboard.
| | 01:42 | Resizing the text just one degree has all
of the sudden made the layout much wider.
| | 01:47 | If we expand the text one more time, it's even wider still.
| | 01:51 | Now let's hold down Ctrl and dash, or
Cmd and dash, to make the text smaller.
| | 01:59 | Every time we hit this key combination, the design gets narrower.
| | 02:03 | This is a characteristic of elastic designs.
| | 02:06 | Because the width of the design changes as the size of the text
changes, we have the same number of words on every line at every width.
| | 02:13 | This allows us to optimize the line length of the text for easier reading.
| | 02:17 | So close Firefox and go back to Dreamweaver
so we can see how an elastic layout is made.
| | 02:22 | In the CSS panel, click the All button, and
then the plus sign by the style element.
| | 02:27 | Click the second rule down for the container element.
| | 02:30 | This time, if we look at the properties, the width
is set to 46em, and em is a relative unit of measure.
| | 02:36 | One em roughly equals two characters of text.
| | 02:40 | So if we change the width value to another number, but keep it in em's,
let's try a value of 30 em's, the design changes its initial width.
| | 02:50 | Less characters are now on every line of text.
| | 02:52 | Let's preview the page in the browser again.
| | 02:56 | We'll have to save changes again to our page.
| | 03:01 | The starting width of our design is much narrower than it was before,
but once again changing the size of the text here using control plus
| | 03:08 | or command plus to make it bigger, still makes the overall
design wider and maintains the same number of words per line.
| | 03:16 | So you can see how this type of design has an advantage
in terms of adapting to the user's preferences.
| | 03:22 | However, one of the problems with this type of design is that
you can quickly generate a horizontal scroll bar in the browser.
| | 03:29 | Let's enlarge the text a couple more degrees to see this.
| | 03:33 | In order to view all of the content on the page,
you have to do a lot of horizontal scrolling.
| | 03:38 | The third type of layout that we're going
to look at has its pros and cons as well,
| | 03:42 | but generally is considered one of the most accessible types of layouts.
| | 03:46 | Let's create a liquid layout next.
| | Collapse this transcript |
| Creating a liquid layout| 00:00 | >> The third type of layout that we're going to
make is called a liquid or fluid width layout.
| | 00:04 | This refers to the fact that these layouts
aren't rigid and solid, but flexible, like water.
| | 00:10 | Like elastic layouts, they're made with relative units, but
their width is dependent on the user's browser window width.
| | 00:15 | A bigger window means a bigger width.
| | 00:17 | And it will scale smoothly down as the window is scaled down in size.
| | 00:21 | We use the same steps to create the layout,
so go to the File menu and click new.
| | 00:26 | This time under the layout column, choose two
column liquid, left sidebar, header and footer.
| | 00:32 | For Doc type, choose HTML 4.01 strict and leave
layout CSS set to add to head and click create.
| | 00:40 | Let's go straight into previewing this in our browser.
| | 00:43 | Go to the document toolbar and click on the
globe icon and select preview in Firefox.
| | 00:47 | When we're asked to save the page, click yes and save the file as
liquid.html in the chapter three exercise files folder, then click save.
| | 01:00 | The first thing we'll do is resize the browser window.
| | 01:05 | However when we resize the width of the window this
time, the entire width of the design changes to match.
| | 01:10 | Pulling the browser window back out changes the design to be wider.
| | 01:15 | Let's close Firefox now and go into Dreamweaver
to look at how this is done.
| | 01:19 | Open the CSS style panel and click on the all button then click on the
plus sign next to the style element to show all the rules for this page.
| | 01:27 | Select the second rule for the container DIV.
| | 01:30 | Here, the width is set to 80 percent.
| | 01:32 | This percentage is relative to the width of the browser window,
so the design will always take up 80 percent of that width.
| | 01:39 | Click on the value and change the width to 60 percent.
| | 01:43 | Now preview the page again.
| | 01:46 | When asked to save changes, click yes.
| | 01:50 | The page is now narrower, but if we resize the
browser window, it still changes in width as well.
| | 01:57 | The advantage in terms of accessibility for this type of layout
is that the user can resize the window and change the design width
| | 02:03 | to make reading more comfortable or otherwise fit their needs.
| | 02:06 | There is a down side though.
| | 02:08 | Although liquid layouts are just as simple to make as fixed
width layouts in terms of their initial structure and CSS,
| | 02:14 | they start becoming more complicated when the design is very
complex or when complex content is introduced into the design.
| | 02:21 | This is because you have to make sure that the graphics
of your design hold together at various sizes and you have
| | 02:27 | to make sure that content doesn't overflow its containers.
| | 02:30 | These are all issues that can be successfully
addressed with CSS, of course,
| | 02:34 | but they require a higher level of skill and comfort with the language.
| | 02:37 | Also, some designs and types of content just don't work well with liquid
layouts, such as if you have a page full of large fixed width images
| | 02:45 | that would overflow their containers if the design became too
narrow, so there may be times to turn to fixed width ones instead.
| | 02:52 | For the rest of this title though, we're going to stick with this liquid
layout and work on customizing it to further improve its accessibility.
| | 02:59 | In the next movie we'll start that customization process.
| | Collapse this transcript |
| Customizing a liquid layout| 00:00 | >> As we saw in the last movie, liquid
width designs can improve accessibility
| | 00:04 | by offering web users an even greater range
of control over the page to suit their needs.
| | 00:09 | We're going to use the page saved in the last movie name
liquid.html as the start of an example site to build.
| | 00:15 | If you're following along with the exercise files and do not
already have liquid.html open in Dreamweaver from the last movie,
| | 00:22 | it's located in a folder named 03_06 in the
chapter three folder of your exercise files.
| | 00:29 | We'll begin our customization of this page by changing some width values
to better suit a wider variety of designs and make it a little more robust.
| | 00:36 | Right now, both of the columns have liquid width.
| | 00:39 | Let's preview the page in Firefox to see that again.
| | 00:42 | Click on the globe icon in the document
tool bar and choose preview in Firefox.
| | 00:47 | Narrow your browser window as you did before.
| | 00:51 | You can see that both columns change in size and the
sidebar gets very narrow when the window is narrow.
| | 00:57 | Long words are overflowing out of the sidebar
and overlapping with the main content.
| | 01:01 | Fortunately we can change the design to make the side bar
have a fixed width while keeping the overall layout liquid.
| | 01:07 | So close Firefox now and go back to Dreamweaver.
| | 01:11 | In the CSS styles panel, click the all button and make
sure that all rules are displayed under the style element.
| | 01:17 | Select the fifth rule in this list that's labeled side bar one.
| | 01:21 | In its properties below we can see that
its width is currently set to 24 percent.
| | 01:25 | Click on 24 percent and Dreamweaver will bring up two select menus.
| | 01:29 | The first is for a value, so enter 200 here.
| | 01:32 | The second menu is where we choose the unit of measurement for this width.
| | 01:36 | Click on the arrow in the menu and choose pixels, the top option.
| | 01:41 | The width of the sidebar immediately changes
in the design view of the page.
| | 01:46 | Scroll down the page in design view and you can see that now the main
content is wrapping underneath the bottom of the sidebar somewhat.
| | 01:54 | This is because the space that the sidebar occupies is
created with the left margin on this main content DIV.
| | 02:00 | We need to change that left margin to
match or exceed the width of the sidebar.
| | 02:04 | Go back to the CSS styles panel and choose
the rule for the main content DIV.
| | 02:09 | It has a single property listed for margin with
four values shown, one for each side of the DIV.
| | 02:15 | The first value is for the top margin, the second for the
right, the third for the bottom and the fourth for the left.
| | 02:22 | You can remember this order by thinking of going around a clock
in clockwise manner from top all the way back up to the top.
| | 02:28 | So click on the list of values and this text will become
editable, change the 26 percent to 230 PX for pixels.
| | 02:37 | This extra thirty pixels is there to provide space between the columns.
| | 02:41 | Click outside of the rule and immediately the
design view changes to show the new margin.
| | 02:45 | We now have a straight left margin on our main content like we did before.
| | 02:49 | Let's preview in Firefox again to see how this has changed our page.
| | 02:53 | Click on the globe icon and choose preview in Firefox.
| | 02:56 | It will ask us if we want to save the changes to the page, so click yes.
| | 03:02 | You can see that now the content is no longer overflowing out of the
sidebar, but now the main content has less room and is overflowing.
| | 03:09 | If we resize the window to make it larger, this
is fixed and the sidebar doesn't change width,
| | 03:15 | but this can become a problem with very narrow windows.
| | 03:18 | To avoid problems to our design at very extreme browser widths or
font sizes, we can set a minimum and a maximum width for our layout.
| | 03:26 | Close Firefox and go back to Dreamweaver.
| | 03:29 | In the CSS styles panel, choose the container
rule at the top of the all rules listing.
| | 03:34 | Select the width property that is listed and simply click
on the trash can item to delete this property entirely.
| | 03:41 | As soon as we do this, the design adjusts to fill the entire design view.
| | 03:45 | It will also now fill the entire browser window, no matter how wide
or narrow, so we probably want to set a minimum and a maximum width
| | 03:53 | to avoid the problems that we saw with very narrow
windows having content overflow and overlap.
| | 03:58 | Still in the container rule, click on the add property
link in the properties pane of the CSS styles panel.
| | 04:04 | A select menu appears, begin typing M I N and
then click on the arrow in the select menu
| | 04:10 | and you will see a full listing of CSS properties that are available.
| | 04:14 | Based on what we began to type in, Dreamweaver has
jumped down the list to properties that might match.
| | 04:19 | It has MIN HEIGHT selected.
| | 04:21 | We're going to choose MIN WIDTH instead.
| | 04:24 | Now two more boxes appear.
| | 04:26 | In the first text field that Dreamweaver
has placed your cursor in, type 500.
| | 04:31 | In the select menu beside it leave pixels
selected as the unit of measurement.
| | 04:37 | We're going to follow these same steps
for setting a maximum width on this DIV.
| | 04:42 | The final value that we're going to use for our maximum width is
1600 pixels, but because that's wider than our current screen,
| | 04:48 | we're going to first set a value of 800 pixels just so we can
preview it in the browser and make sure that it's working.
| | 04:54 | So click on the add property link, type in
MAX, then click the arrow in the Select menu,
| | 05:00 | scroll down and choose MAX WIDTH from the list of CSS properties.
| | 05:04 | In the text field that appears, type 800
and leave pixels selected as the unit.
| | 05:12 | Now let's preview our page.
| | 05:14 | Click on the globe icon and select preview in Firefox.
| | 05:17 | Again, when asked to save the changes, click yes.
| | 05:22 | Grab the corner of your Firefox window and make the design larger.
| | 05:27 | The text reflows up until a certain point and then
it simply stops as if it's a fixed width design.
| | 05:33 | This also happens if we narrow the window.
| | 05:36 | Try making your window more narrow.
| | 05:42 | Again, the design gets less wide until it hits
a certain point and snaps into a fixed width.
| | 05:46 | You can add a minimum and a maximum width to
your liquid layout in order to keep it flexible,
| | 05:51 | but still keep it compatible with any
size limitations you have on your content.
| | 05:55 | One thing to note is that Internet Explorer 6 does
not support the MIN WIDTH and MAX WIDTH properties.
| | 06:01 | The design will still work just fine in this browser, but
it won't snap to this fixed widths when it gets to narrow
| | 06:07 | or too wide, it will just continue expanding or getting smaller.
| | 06:11 | If you need to have a minimum or maximum width in Internet
Explorer, you'll have to use a JavaScript solution.
| | 06:16 | You can search online for one of the many, free
Internet Explorer MIN and MAX width scripts.
| | 06:21 | For all other major browsers, adding a minimum and maximum width is a
really simple and effective way to balance a user's need for flexibility
| | 06:29 | with the design and content requirements for your site
that might make a fully liquid design impractical.
| | 06:35 | Before we customize this page any further, close Firefox.
| | 06:39 | Let's go back to Dreamweaver and change the MAX
WIDTH to the real value that we want, 1600 pixels.
| | 06:45 | Click on the 800 pixels shown inside the MAX WIDTH property and type 1600.
| | 06:51 | The appearance of the page won't change at this point,
but if testing it in a browser at a width greater
| | 06:56 | than 1600 pixels, you'll see it snap to that maximum width.
| | 06:59 | So in this movie, you've seen how to adapt a liquid layout to
accommodate a greater range of content without overflowing or overlapping.
| | 07:07 | We've made the side bar fixed in width but kept the overall layout
liquid up until a certain minimum and maximum width was reached.
| | Collapse this transcript |
|
|
4. Working with TextSpecifying the language| 00:00 | >> In this chapter we are going to replace
the placeholder content that Dreamweaver added
| | 00:04 | to our pages by default with real text for our example site.
| | 00:08 | We're going to focus on making that text accessible.
| | 00:11 | Before we add any text to the page though we need
to specify what language the text is going to be in.
| | 00:17 | The page that we'll be working with is named visitors.html.
| | 00:21 | If you are working along with the exercise files, it's located
in the chapter four folder inside the starting sub folder.
| | 00:28 | This is the same page that we worked on in the previous chapter but
some additional styling has been added unrelated to accessibility
| | 00:34 | to help the site start to take shape and keep us focused on changes
made for accessibility not the minutiae of purely decorative styling.
| | 00:42 | We've also cleaned up the CSS as you've seen in the
CSS files panel simply to make it easier to read
| | 00:48 | and for us to make further changes to it as we develop our site.
| | 00:52 | The site that we will be building is for a fictional town named
Wordscott and this page is the visitor's page of the site.
| | 00:58 | We're going to be setting the language of the page in the HTML doing
so makes this information about the language available to be used
| | 01:05 | by screen readers to provide the correct reading, other
uses are for language specific searches and search engines,
| | 01:12 | translation tools that people may run on your site, spell checking tools
in people browsers, as well as how the browser might format the text.
| | 01:20 | Such as if it needs to choose a certain font to display special characters
| | 01:24 | or choose particular types of quotation
marks and other punctuation markings.
| | 01:29 | To define the base language for the entire
page we'll need to go into the code view.
| | 01:34 | Click on the code button in the document
toolbar in the top left corner of the page.
| | 01:39 | We need to add an attribute to the opening
HTML tag so scroll up to the top of the code,
| | 01:45 | place your curser inside the HTML tag immediately
before its closing bracket, then type LAN="EN-US".
| | 01:55 | This is the LANG attribute and we've set
the language of this page to be US English.
| | 02:06 | If you have multiple languages on the
same page you can use this LANG attribute
| | 02:10 | on whatever HTML element surrounds the
different piece of text that you need to denote.
| | 02:15 | For instance the placeholder text that is still
in the sidebar has two different languages listed.
| | 02:20 | Stay in code view and scroll down until we get to the sidebar.
| | 02:24 | ( Pause in speaking )
| | 02:30 | >> The side bar appears immediately after the
heading DIV on line 89 in the filevisitors.html.
| | 02:37 | The first paragraph shown in the side bar is
in English, the second paragraph is in Latin.
| | 02:42 | We can add LANG attributes to each of
these paragraphs to denote the change.
| | 02:47 | We've already set a base language of English for the page so
we don't need to set a LANG attribute on the first paragraph.
| | 02:53 | For the second paragraph, place your cursor inside its opening
tag immediately before the closing bracket type a space
| | 02:59 | and then LANG="LA" this tells the screen readers, search engines and
other devices that the language of this part of the page is Latin.
| | 03:12 | For a list of possible language codes that you can add to your
pages go to en.wikipedia.org/wiki/List_of_ISO_639-1_codes.
| | 03:28 | Now that the language of the page is set we just need
to set the page title before adding in our content.
| | 03:38 | We'll look at the accessibility implications of page titles next.
| | Collapse this transcript |
| Setting page titles| 00:01 | >> People with and without disabilities use the titles of
web pages to uniquely identify each page from each other,
| | 00:07 | whether that's within their bookmarks list, browser tabs, or task bar.
| | 00:11 | It provides the basic information about what the
page is about, and where you are in the site.
| | 00:17 | Because of that, it's very important to use meaningful text.
| | 00:20 | As you saw in previous movies the title
is the first thing that is read by Jaws.
| | 00:25 | So you want to make the title informative, but not too long.
| | 00:29 | Put the most important information at the start of the title.
| | 00:32 | That means there's less for a screen reader user to listen to,
and it's faster for them to identify what the page is about.
| | 00:39 | So put the name of the specific page you are working
with first in the title and then put the site name.
| | 00:45 | This will be less annoying not having to listen to
the name of the site repeated over and over again
| | 00:50 | as the user views various pages throughout your site.
| | 00:53 | They can just listen to the start of the title being read, then
skip over the rest and get straight to the content of the page.
| | 00:59 | This also makes it easier for sighted users too, as the amount of
space in each browser tab or block on the task bar is very limited.
| | 01:07 | So with the most important information shown at the beginning
of the title, it's easier to know which page is which.
| | 01:13 | This is our visitor's page in the site.
| | 01:15 | So we're going to give it a title of visitors, and then town of Wardscott.
| | 01:20 | Click on the title field in the document toolbar.
| | 01:23 | Highlight over the default text untitled document,
and hit back space or delete to delete the text.
| | 01:29 | Type in visitors, then put pipe character, then town of Wardscott.
| | 01:38 | Another accessibility consideration with titles
is the character that you use as a separator.
| | 01:44 | Here we've used a pipe character.
| | 01:46 | In Jaws this is read out as vertical bar.
| | 01:50 | If you use special characters as a separator they
could be read as a long string of words by Jaws.
| | 01:55 | So stick with something simple, like the pipe character, a dash, or a dot.
| | 02:00 | If you do need to use a different type of character
test it in Jaws to see how it will be read.
| | 02:05 | With both our language and title setup,
our page is now ready for its content.
| | 02:10 | Next we'll add some real text to the page and look
at how to set the headings and paragraphs correctly.
| | Collapse this transcript |
| Setting headings and paragraphs| 00:00 | >> Marking up your text as headings and paragraphs is
one of the simplest changes you can make to a webpage
| | 00:06 | that has one of the greatest impacts on accessibility.
| | 00:09 | Headings are the primary way that you can add structure to your text.
| | 00:13 | They divide up the text into related pieces and provide
information on the hierarchy of that information.
| | 00:19 | Just as a sighted user can scan up and down the page to look for text that
sticks out visually and get a sense of what topics are covered on the page.
| | 00:27 | Screen readers can do the same sort of things if there are headings
in the markup as we saw earlier with JAWS you can bring up a list
| | 00:34 | of headings for a page and jump to each one of those.
| | 00:38 | Another advantage to using headings is that it easier to
keep them looking consistent through out the site using CSS.
| | 00:45 | Finally headings are looked at by search engines as an indication
of what words on the page are more important than others.
| | 00:51 | By putting the important topics of your page into headings your making
it easier for search engines to find your page for those words as well
| | 01:00 | as making the page more accessible to both sided and screen reader users
who can scan through the page and quickly get a sense of the content.
| | 01:07 | If you are following along with the exercise files open
the files visitors.doc from the chapter four folder.
| | 01:14 | The text in this document does not have any formatting applied to
it, this is ideal for pasting into Dreamweaver because it insures
| | 01:21 | that no excess formatting will be carried over into our webpage.
| | 01:25 | Remember we are trying to keep all the
visual formatting in the CSS not in the HTML.
| | 01:31 | Hit control A or command A to select all the text
on the page then control C or command C to copy it.
| | 01:39 | Go back to Dreamweaver highlight over all of the context in the main
content DIV then hit control V or command V to paste in the text.
| | 01:49 | By default Dreamweaver paste text from Word as paragraphs.
| | 01:54 | You can verify this by clicking in any of the
paragraphs of text that we just pasted in.
| | 01:59 | If you look at the tag selector at the
bottom of the document window you can see
| | 02:03 | that the current tag is a P tag meaning
this text is marked up as a paragraph.
| | 02:08 | You can also verify this in the property's
inspector by looking at the format menu,
| | 02:13 | again its set to paragraphs so we know that this text is correctly set.
| | 02:17 | What you do want to check however is that the text hasn't been
pasted in as one big paragraph but that each chunk of text
| | 02:23 | on the page is a distinct paragraph with its own opening and closing tag.
| | 02:28 | An easy way to do that in design view is to try to place your cursor
in the blank spaces in each line, if you are able to do so then
| | 02:36 | that means the chunks of text are being separated with break
elements not with the margins on each individual paragraph.
| | 02:43 | Let's check this page, scroll up to the top try to place
your cursor underneath the word visitors on the blank line.
| | 02:51 | We're not able to click there because visitors
is a separate paragraph from the text below.
| | 02:56 | That space is not actually a blank line but simply a margin
gap, we'll try to do this after the first paragraph as well
| | 03:03 | and again we can't click there, that's what we want to happen.
| | 03:07 | Scroll through the rest of the page and try to click between each of the
paragraphs, you'll see that you can't place your cursor in those gaps
| | 03:16 | because Dreamweaver has correctly preserved
the paragraphs in the Word document.
| | 03:21 | If you also have headings set up in your Word document
Dreamweaver will also paste in those same headings.
| | 03:26 | This is really useful if your content providers are using
headings correctly, but if there not using them correctly
| | 03:32 | in the source document you may not want Dreamweaver to preserve them
so you can change how it paste in text by going edit and then clicking
| | 03:43 | on paste special, you'll see that you have that
you have four options listed under paste as,
| | 03:49 | the default option is text with structure this is why Dreamweaver
pasted in the text with paragraphs intact and if we have any headings
| | 03:57 | in our Word document those would have also
been preserved when we pasted in the text.
| | 04:02 | If a word document has a lot of excess formatting that you need to get
rid of an easy way is to simply paste it in as text only, click cancel.
| | 04:11 | Now we need to change some of the pieces of
text on this page from paragraphs into headings.
| | 04:16 | We'll use this doing the format menu on the properties inspector.
| | 04:20 | First let's scroll up to the top of the document.
| | 04:23 | Most pages have only one main topic so you will usually only have
one heading one or H1 tag, all others will be sub headings of this.
| | 04:32 | Usually you will set your H1 to be the title of
your page, on this page our title is visitors.
| | 04:39 | Highlight over that text then go down to the property inspector and
click on the arrow of the format window, select the option heading one,
| | 04:49 | the appearance of the text changes to reflect the default
settings of the H1 tag, we'll customize that later.
| | 04:55 | We now need to set the sub headings.
| | 04:57 | Scroll down and select the words Lake Wordscott, this is a sub
heading of our titles visitors, so go down to the format menu
| | 05:07 | on the property inspector, click on the
menu and select heading two from the list.
| | 05:13 | Again the text changes because of default formatting, we need
to decide if the next piece of text on the page is a sub heading
| | 05:21 | of that H2 Lake Wordscott or if it is a
subheading for the title of the page visitors.
| | 05:27 | Basically when you are deciding what headings to set on your page
you are going to be thinking about your page as an outline document.
| | 05:34 | If this is an outline downtown Wordscott would come underneath
the heading of visitors, so this should also be a heading to.
| | 05:41 | Highlight over downtown Wordscott click on the format
menu in the properties inspector and choose heading two.
| | 05:48 | Scroll further down the page and highlight over events, click
on the format menu and choose heading two for this text as well.
| | 05:57 | If we read the text underneath events you can see that there
are basically two sections annual events and upcoming events,
| | 06:03 | both of these are sub sections of the events
header so these should be H3 elements.
| | 06:09 | If we highlight over annual events and choose heading three from the
format menu, you will see that the entire paragraph changes its appearance.
| | 06:17 | This is because that entire chunk of text
was marked up as a single paragraph.
| | 06:22 | Annual events was not a separate paragraph from the
text below so before we set it as a heading we need
| | 06:28 | to make sure that it's a completely separate paragraph.
| | 06:32 | Go up to edit and select undo text format to
remove the formatting that we just applied.
| | 06:37 | Next place your cursor at the start of the line below the
annual events text and hit backspace to remove the line break
| | 06:45 | between annual events and the next sentence then hit enter or return.
| | 06:49 | This creates a new paragraph and keeps the annual events text separate.
| | 06:54 | Now we can highlight over annual events and go
to the format menu on the properties inspector
| | 06:59 | and select heading three and only that piece of text is affected.
| | 07:03 | We need to do the same thing for the up coming events heading.
| | 07:07 | Place your cursor on the start of the line below the upcoming events text,
| | 07:10 | hit backspace to remove the line break and
then enter a return to create a new paragraph.
| | 07:16 | Highlight over up coming events, go to
the format menu and select heading three.
| | 07:23 | If we scroll down the page we'll see that
we've now formatted all of our headings.
| | 07:28 | Scrolling back up the page we can see that the font sizes
of each of the headings differs based on there level.
| | 07:34 | This is default formatting that we'll talk about how to change in a later
movie but first we are going to set a couple more headings on this page.
| | 07:41 | You can also use headings as labels for the main sections of your pages.
| | 07:46 | This allows screen readers users to quickly jump to a particular section.
| | 07:50 | It may also help sighted users make better sense out of
the page if the interface is complicated or different
| | 07:57 | from standard visual conventions that most are use to.
| | 08:00 | We are going to use the sidebar of this page for our section navigation.
| | 08:04 | So we can add a header to this DIV that provides that information.
| | 08:08 | Highlight over the sidebar one content text that
is already there and type in section navigation.
| | 08:17 | With your cursor still in that text if
you look down at the properties inspector
| | 08:21 | at the format setting you will see that
it is currently set to a heading three.
| | 08:25 | We are going to set it as a heading two since it's one of the major
sections of the site just under the main topic if the entire page.
| | 08:33 | So highlight over the text section navigation then go back down
to the format menu in properties inspector and choose heading two.
| | 08:42 | We can also delete the paragraph text in this section.
| | 08:45 | We'll add the content for the actual section navigation in a later chapter.
| | 08:51 | Highlight over the paragraph text and hit delete the other
section of the page we may want to label is the footer.
| | 08:58 | Scroll down to the bottom of the page and place
you cursor in front of the copyright notice,
| | 09:05 | hit enter or return to create a new paragraph above that existing text.
| | 09:11 | On that new paragraph line type footer then highlight over this text and
using the format menu in the properties inspector select heading two.
| | 09:24 | These sections will then show up in the list of headings that a
screen reader user may bring up in order to navigate the page.
| | 09:30 | They'll immediately be able to tell where to go if they are looking for
the section navigation or if they are looking for the footer in order
| | 09:36 | to get copyright information or link to a privacy policy.
| | 09:40 | Again we'll later talk about how to style these headings, even how to
remove some of them from view so they are available to screen readers
| | 09:47 | but not to sighted users but for now we've created the base markup
that is so important for creating the structure of our page.
| | Collapse this transcript |
| Styling headings| 00:00 | >> We now have real, structured text on
the page using paragraphs and headings.
| | 00:05 | But the default text size of the headings is
pretty large compared to the main body text size.
| | 00:10 | The default size and spacing of heading text is often what
deters people from using headings properly or even at all,
| | 00:18 | but using the concept of separation of content and
presentation we can keep our headings in the HTML
| | 00:25 | and just use CSS to change their default appearance.
| | 00:28 | If you're following along with the exercise
files, we're working on the file visitors.html.
| | 00:34 | It's in the 04_04 folder of the chapter four exercise files.
| | 00:39 | The first style that we're going to add to our
headings and paragraphs is controlling their margins.
| | 00:44 | Go to the CSS styles panel and click on the
new CSS rule at the bottom of the panel.
| | 00:50 | It looks like a piece of paper with a plus sign on it.
| | 00:53 | This opens the new CSS rule dialogue box.
| | 00:57 | For selector type, choose advanced.
| | 01:00 | The selector that's currently shown is based on wherever your
cursor was in the page when you clicked on the new CSS rule button.
| | 01:08 | Delete that text.
| | 01:11 | The selector that we're going to write is a group selector.
| | 01:14 | That simply means that it styles a number of elements at one time.
| | 01:17 | In the selector field type H1, H2, H3, H4,
H5, H6, P. This rule will style all the levels
| | 01:24 | of headings from one to six as well as the paragraph element.
| | 01:32 | For the define in option choose this document only then click okay.
| | 01:39 | This brings up the CSS rule definition box.
| | 01:45 | The property that we want to change, margin,
is listed under the box category.
| | 01:54 | So click on box under the category listing on the left side.
| | 02:03 | On the right hand side under the listing
for margin, uncheck the same for all box.
| | 02:08 | In the top box, type zero.
| | 02:11 | This is removing the default top margin on
all of our headings and all of our paragraphs.
| | 02:16 | They'll still be spaced out from each other by the
default bottom margin that all of these elements have.
| | 02:21 | But removing the top margin enables us to control
the spacing between each of them more precisely.
| | 02:27 | Once you've typed zero in the top box, click okay.
| | 02:30 | This is the only property that we're going to add to this rule.
| | 02:33 | The new rule now shows in the CSS styles
panel and its properties are listed below.
| | 02:39 | The appearance of the page hasn't changed yet, because
bottom margins still exist on all of these elements.
| | 02:46 | Now we can start editing those bottom
margins and changing how the headings look.
| | 02:50 | Click on the new CSS rule button at the bottom of the CSS styles panel.
| | 02:55 | For selector type this time, click on the tag button.
| | 02:59 | In the Tag Select menu below, click on the
arrow and scroll down the list to select H1.
| | 03:10 | Keep this document only checked for the define in option, then click okay.
| | 03:16 | Once again, go to the box category of the CSS rule definition dialogue box,
| | 03:21 | in the margin section on the right side of
the box, uncheck the same for all checkbox.
| | 03:27 | In the bottom field, enter .5.
| | 03:31 | In the Select menu, below that field, choose M as the value.
| | 03:37 | As we saw when we made an elastic layout, the M is a relative unit
of measurement that corresponds to the size of text characters.
| | 03:45 | By setting the margin in Ms, we're ensuring that no matter
what text size the user has, the space will be proportional.
| | 03:52 | If we were to set a pixel size that margin gap would
never adjust no matter what font size the user had.
| | 03:59 | If the user had a very small font size it might look
too big, whereas if they had a very large font size,
| | 04:05 | it might not be enough spacing to make the text easy to read.
| | 04:08 | Now let's go to the type category of the dialogue box.
| | 04:12 | Click on type under the category listing on the left hand side.
| | 04:16 | Click on the arrow in the font field and choose
Georgia, Times New Roman, Times Serif from the list.
| | 04:24 | This sill set our font to Georgia if it's available on the user's machine.
| | 04:28 | If not, the browser will continue going through the list
of fonts we've specified until it finds one it can use.
| | 04:34 | For weight, select bold.
| | 04:37 | In the size field, enter 170.
| | 04:40 | And then for the unit, choose percent.
| | 04:45 | This means the H1 text will be 170% of the base font size set on the page.
| | 04:52 | Again, by using a relative unit, we're ensuring that no
matter what the user's font size is, things stay proportional.
| | 04:59 | Finally, click in the color field, type #308594.
| | 05:07 | This color value is the same turquoise used in the logo for the website.
| | 05:11 | Now click on okay to accept all of these rules.
| | 05:15 | You can see that the appearance of the H1 has changed now.
| | 05:18 | Let's next create rules for the H2 and H3
tags that we have on this page as well.
| | 05:24 | Click on the new CSS rule button in the CSS styles
panel, choose the tag option for selector type.
| | 05:31 | Click on the arrow of the Tag menu and scroll down to select H2.
| | 05:39 | Keep this document only checked, then click okay.
| | 05:43 | Let's set the same color that we used for the H1, so type #308594.
| | 05:52 | For the font size, type 110, and in the Unit menu, choose percent.
| | 05:58 | In the Weight menu, choose bold.
| | 06:03 | Click on the arrow of the menu next to
the case option and choose uppercase.
| | 06:09 | Now let's go to the box category of the dialogue box.
| | 06:13 | Click on box in the category list.
| | 06:15 | In the margin section of the screen, uncheck
same for all and in the bottom box type in .3.
| | 06:22 | In the Unit menu, choose Ms. Next, click on the border category.
| | 06:29 | We're going to create a border beneath our H2 text.
| | 06:32 | Since we only want it on the bottom, uncheck the
three same for all boxes shown on the screen.
| | 06:39 | Click on the arrow of the bottom menu listed
under the style heading, choose solid.
| | 06:45 | Under width, type one and leave pixels selected as the unit of measurement.
| | 06:52 | Finally, in the color box, type #D5DDDD.
| | 06:58 | Now that we have a border set on our H2, we might want to add a little
bit of padding between the bottom of the text and where the border starts.
| | 07:08 | So go back to the box category, uncheck the
same for all box under the padding heading.
| | 07:15 | In the padding bottom box, type .1 and
choose Ms as the unit of measurement.
| | 07:24 | With all of these properties set, click okay.
| | 07:27 | Scroll down the page to see our H2s.
| | 07:30 | You can see that now the text is all in uppercase, the
color has changed and there's a border beneath each H2 tag.
| | 07:40 | The last heading that we need to style for this page is the H3,
so click on the new CSS rule button in the CSS styles panel.
| | 07:48 | For selector type, choose tag.
| | 07:51 | In the Tag menu, scroll down and select H3.
| | 07:57 | Keep this document only select and click okay.
| | 08:01 | In the Font menu at the top of the CSS rule definition dialogue
box, choose, once again, Georgia, Times New Roman, Time Serif.
| | 08:10 | In the Weight menu, choose bold.
| | 08:12 | In the size box, type 110 and choose percent as the unit of measurement.
| | 08:22 | This is the same size that we used for our H2 tags.
| | 08:26 | Generally you'll want each heading higher up the hierarchy to have
a larger font size to make it visually clear what that hierarchy is.
| | 08:34 | In this case, though, the H2s have their text completely capitalized.
| | 08:39 | That's going to make them appear larger
and have more emphasis than our H3 tags.
| | 08:44 | Finally, in the type category, click inside the color box and type #308594.
| | 08:54 | Next, go to the box category.
| | 08:57 | Underneath margin, uncheck the same for all box.
| | 09:01 | In the bottom box, under margin, type zero then click okay.
| | 09:07 | Scroll down the page to see our H3 elements.
| | 09:12 | You can see that there is no longer any space between
the bottom of each H3 and the paragraph that follows it.
| | 09:19 | Each of the elements are still distinct from one another in the HTML,
but we've used CSS to remove the margin and change the visual style.
| | 09:27 | This gives you just a few options for how you can style headings.
| | 09:31 | It's clear that they don't have to be huge or ugly, just
make sure that you keep a good structure of headings
| | 09:36 | in your markup, then add on layer of CSS styling for sighted users.
| | 09:40 | An additional change that you might want make for sighted users is removing
the page section and labels from their view, such as the section navigation
| | 09:48 | and footer headings that we currently have in our page.
| | 09:51 | In the next movie we'll use CSS to accomplish this as well.
| | Collapse this transcript |
| Hiding section headings from sighted users| 00:00 | >> Even with improvements that CSS has made to the appearance to
the headings on our page you may want to hide the section navigation
| | 00:07 | and footer headings from view but still
have them accessible to screen readers.
| | 00:12 | You can make elements invisible using CSS in a way that will still
cause the text of those elements to be read by screen readers.
| | 00:20 | The most obvious CSS to use for this is setting the display
property to a value of none, this makes the element invisible
| | 00:28 | and leaves not empty space behind but many screen readers
including JAWS won't read text that is styled with display none.
| | 00:37 | An alternative way to keep content on the page
but out of sight is to move it off the screen.
| | 00:42 | There are a variety of ways to move something off the
screen and some work in more screen readers than others.
| | 00:50 | A pretty reliable way is to use one of the methods called left positioning.
| | 00:55 | This is where you use CSS properties to move
the element all the way off the left side
| | 01:00 | of the screen including absolute positioning margin text indent.
| | 01:05 | We're going to use absolute positioning with a really big
negative left margin as our off left positioning technique.
| | 01:12 | Click on the new CSS rule button in the CSS styles panel.
| | 01:18 | Choose class as the selector type.
| | 01:20 | We're going to make a class that can be reused on multiple elements on our
page in this case the section navigation heading and the footer heading.
| | 01:29 | Highlight over the text that is placed in
the text field by default and delete it.
| | 01:34 | Then type in .offleft this is the name of our class that will
later apply to the section navigation and footer headers.
| | 01:45 | For the define in option keep this document only selected, click okay.
| | 01:52 | This brings up the CSS rule definition dialog box.
| | 01:55 | First go to the positioning category listed on the left side of the box.
| | 02:01 | Click on the arrow in the type field and choose absolute.
| | 02:06 | Absolute positioning is a way of taking an element
and pinning it to a specific spot on the page.
| | 02:11 | When you make something absolutely positioned it
is no longer in the flow of the document that means
| | 02:17 | that the other elements around it act as if it doesn't exist.
| | 02:21 | We use absolute positioning here so that the text that follows
these headings will not leave room for the headings above them
| | 02:28 | but instead act as those headings aren't even there.
| | 02:31 | Next click on the box category, under the margin section on
the right side of the screen, uncheck the same for all box.
| | 02:40 | In the left field under margin type a hyphen for a negative
sign, then 9000 leave pixels selected at the unit of measurement.
| | 02:51 | Using a negative margin makes the element move
in the opposite direction that it usually would.
| | 02:56 | In this case it will move 9000 pixels to the left edge of the screen.
| | 03:01 | The exact number is not important, the point is to use a very large value
so that even if someone has a really large font size and thus the text
| | 03:11 | of section becomes very long it still will not show up on the screen.
| | 03:16 | Click okay to accept these rules.
| | 03:18 | The new off left rule is now listed under the all rules pane
of the CSS styles panel and its properties are shown below.
| | 03:27 | We haven't yet applied this class to anything on the page so click
on the section navigation heading on the left side of the page,
| | 03:35 | highlight over the text and then go down to the properties inspector.
| | 03:41 | Click on the Style menu, a list is shown with the
name of classes that are currently in our CSS.
| | 03:48 | The last one listed off left is the style
that we just created, select that style.
| | 03:54 | As soon as we select that class it is applied to
H2 element and it's no longer visible onscreen.
| | 04:01 | Now let's apply it to the footer heading as well.
| | 04:04 | Scroll down the page and select over the footer heading text.
| | 04:10 | In the properties inspector open the Style menu and choose off left.
| | 04:16 | Again the heading immediately disappears and the
space that it once occupied is no longer there.
| | 04:22 | To verify that this is going to work correctly lets preview the page.
| | 04:27 | Click on the globe icon in the document toolbar
to bring up the Preview and Browser menu.
| | 04:33 | Select preview and firefox and you will be asked if
you want to save the changes to the page, click yes.
| | 04:39 | The section navigation heading is now missing from the side bar area.
| | 04:46 | Scroll down the page, the footer heading is also gone from the footer.
| | 04:52 | What we really want to know though is whether the
headings are still there to be read by a screen reader
| | 04:57 | so let's open up JAWS and see how it handles the page.
| | 05:01 | Go to your Start menu and choose JAWS from the list of programs.
| | 05:07 | >> Digital Voice: JAWS 40 minute mode visitors
vertical bar town of Wordscott -Mozilla Firefox.
| | 05:12 | >> After JAWS reads the title of the page it stops speaking and
waits for us to tell it what is should read next to bring up a list
| | 05:20 | of headings in the page us the keyboard shortcut insert an F6.
| | 05:25 | I'm going to press those keys now.
| | 05:26 | >> Digital Voice: Heading list dialog.
| | 05:28 | Heading list new section navigation:2 one of eight.
| | 05:32 | To move the items use the arrow keys.
| | 05:35 | >> You can see that the first heading listed
is section navigation, one that we have hidden.
| | 05:41 | So it is still there to be read by JAWS.
| | 05:44 | The footer heading is also still listed at the bottom of this
heading list, to just there quickly simply press the F key.
| | 05:52 | >> Digital Voice: F footer:2
| | 05:55 | >> Pressing any letter will jump you to the
next heading that starts with that letter.
| | 05:59 | Now that we have the footer heading selected we can press
the enter key to move directly to that heading in the page.
| | 06:06 | >> Digital Voice: Enter footing heading level two.
| | 06:09 | >> To get JAWS to read on from this point in the document
hit the key combination insert and the down arrow.
| | 06:15 | >> Digital Voice: Heading level two footer
copyright 2007 town of Wordscott all rights reserved.
| | 06:21 | >> So as you can see the headings were still there to be
used by screen reader's users to navigate around the page.
| | 06:27 | So fare we've looked at how to style heading color, font size,
margins and even how to make them hidden for sighted users.
| | 06:35 | Next we'll talk about more general principals
for making sure your text stays readable.
| | Collapse this transcript |
| Styling text for readability| 00:00 | >> So far in this chapter we have talked a lot about
screen readers and improving accessibility for there users.
| | 00:06 | This is not because any disability is more important than another
but primarily because screen reading is such a different experience
| | 00:13 | from other types of browsing that it can require
more accommodation and changes to our pages.
| | 00:19 | In this and the next movie however we'll be focusing
on issues that have no bearing on screen reader access,
| | 00:25 | how to make the appearance of our text easier to read.
| | 00:29 | There are many web users who are not blind and do not
use screen readers but have other visual impairments
| | 00:35 | or simply poor vision and may find text hard to read.
| | 00:37 | In this movie we will focus on the sizing
and spacing of text for readability.
| | 00:43 | If you are following along in the exercise files we're working on the
file visitors.html in the 04 06 folder of the chapter four exercise files.
| | 00:53 | We're going to set a base font size for this page.
| | 00:57 | The size units that we choose for our text should always be relative units.
| | 01:01 | Those are units that have no set dimensions but change
in size based on each platform, browser and user setting.
| | 01:08 | The two main relative units for text are percentages and em's.
| | 01:12 | We've talked about the em unit earlier as being
relative to the size of the text characters.
| | 01:17 | One em equals whatever the current font size is, so if the
user has a font size set to 16 pixels and you set the font
| | 01:26 | on your webpage to on em, he or she will see 16 pixel text.
| | 01:31 | Percentages are relative to the font size of the parent element.
| | 01:36 | The parent element is simply the HTML tag that is
wrapping around the current tag that you are in.
| | 01:41 | If there is no parent element, for instance you are on the body tag
| | 01:45 | or if the parent element has no font size set the percentage
is simply relative to the users browsers default size.
| | 01:52 | Once again setting 100 percent would simply equal their default setting.
| | 01:57 | That makes em's and percentages pretty interchangeable.
| | 02:01 | You can use whichever one makes more since to you.
| | 02:04 | Leavening the text set as 100 percent or one em is the most accessible
option because if the user has configured their size to their preferences,
| | 02:13 | you are respecting their preference and not making
the text smaller than they can or prefer to read.
| | 02:18 | In reality though very few users ever change their browser or system font
size simply because they don't know they can and most clients aren't going
| | 02:26 | to be happy with how large text is if you leave it at the default.
| | 02:30 | Not to mention you as a web designer might not be too happy
about it, so the compromise is to set text to a lower size.
| | 02:37 | But to keep accessibility in mind don't make it too
small and make sure that you keep it in relative units.
| | 02:43 | If you use an absolute unit such as pixels to size the text,
internet explorer users won't be able to change the text size,
| | 02:51 | all other browsers allow pixel text sizes to be scaled but it is still
good to pick a percentage of em value instead of an arbitrary pixel value
| | 02:59 | that could end up being really far off from
what a user has set for him or herself.
| | 03:04 | With that in mind let's choose a smaller font size for our main body text.
| | 03:09 | We want to pick a measurement that will be
roughly the same between different browsers.
| | 03:15 | Each one is going to have to round the value that we choose.
| | 03:18 | Open up your system calculator, on windows go to the start menu, click
on all programs, then click on accessories and choose calculator.
| | 03:30 | The default font size on most systems and therefore
the size that most users will have set is 16 pixels.
| | 03:37 | Let's see what font size we would end up with
if we chose a percentage value of 90 percent.
| | 03:42 | Type in 16 and multiply it by .9, we get 14.4, there's no
way for the browser to make texts that contain fractions
| | 03:54 | of pixels so it's going to have to round this number.
| | 03:57 | Every browser will round in a different way so we'd like
to get the value as close as possible to a whole number.
| | 04:04 | Let's try 88 percent, hit clear then type 16 times .88.
| | 04:13 | That gives us 14.08.
| | 04:17 | This is the closest we are going to get to a whole
pixel value so this is probably a good value to pick.
| | 04:23 | Close the calculator and go back to Dreamweaver, in the CSS styles
panel click on the body rule at the top of the all rules pane.
| | 04:33 | In the properties listed below you'll see
that the font property is currently being set.
| | 04:38 | The first values listed for font is 100 percent, this is the font
size we are now going to change to 88 percent, click on the number
| | 04:46 | and the text field becomes editable, you may need to scroll
back over to the front of the field to see 100 percent.
| | 04:53 | Highlight over and type 88, make sure you leave the percentage mark.
| | 04:59 | Hit enter or return to accept the value, you'll see that all the
text has now changed size because we set the size of the heading text
| | 05:06 | in percentages as well, it also scales down proportionally.
| | 05:10 | Another change we can make to the text that affects it readability
is the amount of white space between each of the lines of text.
| | 05:17 | We've already modified the margins on the headings to improve the
spacing between the chunks of text, but now let's increase the space
| | 05:24 | in between all lines of text on the page using the line height property.
| | 05:28 | We'll set this on the body rule as well.
| | 05:31 | With the body rule still selected in the CSS styles panel click
on the add property link in the properties area of the panel,
| | 05:40 | type in line but then click the arrow on the
menu to bring up a list of CSS properties.
| | 05:47 | Dreamweaver already highlighted line height for us.
| | 05:51 | Click on that property name and your cursor is
now in a new box for you to enter the value.
| | 05:56 | Type in 1.6 this means that each line of text will be 1.6
times the height of a single line of text away from each other.
| | 06:06 | The next box is asking us to set a unit.
| | 06:09 | We actually don't want to set a unit for the line
height property, by leaving off a unit we ensure
| | 06:15 | that it will always be 1.6 times whatever font is set wherever on the page.
| | 06:20 | So leave it set to multiple.
| | 06:22 | You can see in the design view that there is
now extra space in between the lines of text.
| | 06:28 | This white space makes the text easier to read.
| | 06:31 | So we now addressed the accessibility aspects of sizing and spacing text.
| | 06:35 | Lets next look at how color of text affects it readability.
| | Collapse this transcript |
| Ensuring proper color contrast| 00:00 | >> The size of the text and its ability to resize is not the
only aspect of its style that effects how easy it is to read.
| | 00:08 | The amount of contrast its color has compared
to the background color is also very important.
| | 00:13 | Let's look at how color contrast is measured, see if our page has
sufficient color contrast so far and make changes where necessary.
| | 00:21 | Color contrast is not specifically mentioned in
section 508, but it is part of WCAG 1.0 and 2.0.
| | 00:29 | in WCAG 1.0 the standard states ensure that foreground and background
color combinations provide sufficient color contrast when viewed
| | 00:37 | by someone having color deficits of when
viewed on a black and white screen.
| | 00:41 | No actual measurement is given in the standard so we
have no way of knowing what sufficient contrast means.
| | 00:48 | There are a couple of ways of measuring color
contrast that are currently being proposed.
| | 00:53 | WCAG 2.0 sets a luminosity ratio that must be met.
| | 00:56 | It states that the contrast ration of text and background must
be at least five to one, except if the text is pure decoration.
| | 01:04 | For larger scale text, which is text that is 18 points or larger, or if
it's bold, 14 points or larger, it could have a ratio of three to one.
| | 01:14 | Another working group within the W3C, the Accessibility Evaluation and
Repair Tools, or AERT, developed their own way of testing color contrast
| | 01:23 | by looking at the difference in brightness and the difference in color.
| | 01:27 | AERT recommends a difference in brightness of greater
than 125 and a difference in color of greater than 500.
| | 01:35 | It's not important to know the actually algorithms used to measure color
contrast in both of these standards as we can use the analyzer tools
| | 01:42 | that we downloaded and bookmarked in an earlier chapter to test this.
| | 01:47 | Remember also that neither one of these are
recommendations yet, so you don't have to comply with them,
| | 01:53 | but they are useful to look at so they give us concrete numbers
to test with and get an idea if our text is pretty high contrast
| | 02:00 | or pretty low contrast and we can start preparing
for whatever standard is ultimately adopted.
| | 02:06 | If you're following along with the exercise
files, open the page visitors.html in Firefox.
| | 02:12 | It's in the 04_07 folder of the chapter four exercise files.
| | 02:17 | This is the same page that we've been working on throughout this chapter.
| | 02:20 | Let's take a break from styling this page to check our
existing styles and see if they meet color contrast guidelines.
| | 02:27 | We can use the color contrast analyzer extension that
we previously downloaded into Firefox to test this.
| | 02:34 | To access the tool, right click if you're on Windows
or control click if you're on a MAC, on the page.
| | 02:40 | This brings up a Context menu.
| | 02:43 | Scroll down and select color contrast analyzer.
| | 02:46 | You have the option of testing against both
of the guidelines that we just talked about.
| | 02:50 | Let's choose all tests.
| | 02:52 | This opens a new tab with the results of our test.
| | 02:56 | Every text element on the page is analyzed for
its contrast between foreground and background.
| | 03:01 | The names of the elements that were tested are
listed along the left side of the results table.
| | 03:06 | You can also see a sample of the foreground
and background colors used for each element.
| | 03:11 | Any elements that do not pass all three of the test
will have a yellow highlight to their row in the report.
| | 03:18 | The details of which tests we passed and failed
are given in the last three columns of the table.
| | 03:24 | It passes the luminosity contrast ratio tests.
| | 03:28 | It also passes the difference in brightness test.
| | 03:31 | But, if fails the difference in color test.
| | 03:34 | However, it's very close to the guideline value of 500, so we might not
have to change the color values too much in order to pass this test.
| | 03:42 | Scroll down the page to see all of the results.
| | 03:45 | The second row from the bottom is for the heading within the footer.
| | 03:50 | We're not going to worry about passing or failing
its test since it is not visible on the screen.
| | 03:56 | Other than that heading, most of these headings are pretty
close to the values needed to pass, so let's go into Dreamweaver
| | 04:04 | and change our color values just a little bit to see
if we can make the contrast a little bit greater.
| | 04:09 | I have the same file, visitors.html, open in Dreamweaver.
| | 04:15 | Open the CSS styles panel and scroll through the list of styles at the top.
| | 04:23 | Choose the H1 rule.
| | 04:25 | We need to modify its color, so click on the color value.
| | 04:29 | Highlight over the numbers that are currently
being used and delete them then type 195F6E.
| | 04:37 | This color is also from the logo of the site,
the darker color used in the flowers of the logo.
| | 04:42 | Hit enter or return to accept this value.
| | 04:45 | You can see that our H1 text is now a little bit darker.
| | 04:49 | Go back into the CSS styles panel and click on this color again.
| | 04:53 | Hit control C or command C on your keyboard to copy the value
then click on the H2 rule above, now select its color value
| | 05:03 | and hit control V or command V to paste in the new value.
| | 05:07 | Finally, select the H3 rule above.
| | 05:11 | Click on its color value and again press control V or
command V then press enter or return to accept the value.
| | 05:20 | Scroll down the page in design view to see the change in our headings.
| | 05:25 | The color isn't too far off from what it was set to before,
but it might be enough to help us pass all three tests.
| | 05:34 | Go to the File menu and save the page.
| | 05:38 | Then go back to Firefox, click on the tab where the visitor's page is still
open and hit the reload button for it to show the new changes to the page.
| | 05:51 | We can now run the color contrast analyzer again.
| | 05:54 | Right click or control click on the page and select
color contrast analyzer from the menu then all tests.
| | 06:03 | This time you can see that the only row
highlighted in yellow is the header and footer.
| | 06:08 | Since this is not visible, we don't need to worry about it.
| | 06:11 | We've passed all the other tests for all the other
text on the page, so our page is now at a point
| | 06:17 | where it has the basic structure and styles
for the text in place and tested.
| | 06:22 | There are a number of other HTML elements related to text
that we can add to the page to enhance its accessibility.
| | 06:29 | In the next few movies we'll go over the HTML for
creating emphasized text, quotations and lists.
| | Collapse this transcript |
| Creating text emphasis| 00:02 | >> Adding emphasis is not just about making certain words and phrases
stand out visually, it should be a semantic markup practice as well.
| | 00:11 | Emphasized words tell your users which words are
more important and enhance the meaning of your text.
| | 00:17 | There are two HTML elements that you can use for
emphasizing text, the M tag and the Strong tag.
| | 00:23 | The HTML element named M is completely different from the
unit of measurement named M that we talked about earlier.
| | 00:31 | The HTML M element is used to markup pieces of text you want to emphasize.
| | 00:36 | The strong element is used to markup pieces
of text you want to strongly emphasize.
| | 00:42 | There's no official guidance on what makes something emphasized
versus strongly emphasized, so it's up to you to decide which to use.
| | 00:49 | You can use both or you could just pick
one and use that throughout your site.
| | 00:53 | The important thing is to just be consistent in which
ones you use and how you use them to markup text.
| | 00:59 | Using consistent HTML elements throughout your site for the same purpose
will also help you keep your style consistent for these elements as well.
| | 01:06 | Let's use Dreamweaver to add the M and Strong elements to our page.
| | 01:10 | If you're following along with the exercise
files, we're working on visitors.html,
| | 01:15 | which is in the 04_08 folder of the chapter four exercise files.
| | 01:19 | In Dreamweaver, you use the B and I buttons on the properties
inspector to set text as strong or emphasized, respectively.
| | 01:29 | In previous versions of Dreamweaver, the B and I buttons on the
property inspector would add B and I tags for bold and italic,
| | 01:39 | but those are presentational HTML elements that
don't actually tell browsers what the text is.
| | 01:44 | Strong and M have the same default appearance as B and I, so strong
will be bold and M will be italic, but they carry more information.
| | 01:54 | Let's first add an M element to the page.
| | 01:56 | Highlight over the word perfect at the top of the page,
| | 02:01 | click on the I button in the properties inspector
to apply the M element to this piece of text.
| | 02:07 | You can see in design view that it has now become italic.
| | 02:11 | But if we look down at the tag selector below the document
window, we can see that the tag being used is M, not I.
| | 02:19 | Again, this is a more semantic tag that
carries more information than the I tag did.
| | 02:24 | Now let's add a strong tag.
| | 02:26 | Highlight over the word renowned in the
third sentence of the first paragraph,
| | 02:31 | click on the B button in the properties inspector
to apply the strong element to this text.
| | 02:37 | Again, you can see that the text is now bold, but looking
at the tag selector, the tag being used it strong,
| | 02:44 | not B. We can use CSS to override these
defaults, just like we did with heading.
| | 02:50 | Click on the new CSS rule button at the bottom of the CSS styles panel.
| | 02:55 | Click on tag for selector type.
| | 02:58 | Click on the arrow of the Tag Select menu
and scroll down to select strong as the tag.
| | 03:07 | Leave this document only selected for the define in option.
| | 03:14 | Click okay.
| | 03:15 | Let's keep the strong tags bold by clicking on the
Weight menu and choosing bold from the options shown.
| | 03:23 | But let's also choose a color for our strong tags.
| | 03:26 | Click on the color picker icon next to the color label.
| | 03:30 | Let's select a bright red for the color.
| | 03:32 | Choose the color CC0000 in the middle of the color palette.
| | 03:38 | Click okay to accept these rules.
| | 03:41 | If we now click off of the strong text so that it's no longer
highlighted, you can see that it has applied the red color to the text.
| | 03:48 | By setting this color in the CSS instead of in FONT tags or
other presentational markup, we're ensuring that a variety
| | 03:57 | of devices will know what this text is and
can present it differently to their users.
| | 04:02 | If we are consistent about using the strong tag throughout
the site to emphasize text, we now have a central CSS rule
| | 04:09 | that will ensure that all of them are visually consistent.
| | 04:12 | This will help sighted users make better sense of the page.
| | 04:16 | So we've seen how to use the strong and M elements
to add more semantic information about your text.
| | 04:21 | Next, we'll continue adding semantic with the blockquote HTML element.
| | Collapse this transcript |
| Indicating quotations| 00:00 | >> The example page that we've been working on has
a quotation from the Mayor of Wardscott on it.
| | 00:04 | The proper HTML element for a quotation is the blockquote element.
| | 00:09 | Since the default appearance of a blockquote is indented, it quickly
became abused by web designers as a way to easily indent a block of text.
| | 00:17 | Using a semantic element for presentational purposes
in this way violates the concept of semantic markup.
| | 00:24 | If we reserve the use of blockquotes for text that is truly a
quotation, web devices can convey that information to their users.
| | 00:31 | If you're following along with the exercise files, open the file
visitors.html from the 04_09 folder of the chapter four exercise files.
| | 00:40 | In design view, scroll down to see the entire quote.
| | 00:43 | It's the second paragraph on the page.
| | 00:45 | Highlight over all of its text then go to the insert menu.
| | 00:53 | Scroll down and select HTML.
| | 00:56 | From that menu, select text objects.
| | 00:59 | Finally, in this last menu, select blockquote.
| | 01:03 | As you can see, the text is now indented on both sides.
| | 01:06 | As with the other elements that we've been working
with, we can change this style to suit our design.
| | 01:11 | Click on the new CSS rule button at the bottom of the CSS styles panel.
| | 01:16 | Click on the tag option by selector type.
| | 01:19 | From the Tag Select menu, choose blockquote.
| | 01:24 | Keep this document only selected by the define in option and click okay.
| | 01:29 | Let's make our quoted text bold.
| | 01:31 | So select the Weight menu and choose bold.
| | 01:35 | Let's also change the font.
| | 01:37 | On the Font menu at the top of the dialogue box, click on the arrow
and scroll down and select Georgia, Times New Roman, Times Serif.
| | 01:46 | As one other option, let's change the line height.
| | 01:49 | Click on the line height box and type 1.8.
| | 01:53 | Click on the arrow of the Value menu next to that
box and scroll down to the bottom to select multiple.
| | 01:59 | This will ensure that our line height value has no
unit set so that it will work with multiple font sizes.
| | 02:05 | Click okay.
| | 02:07 | You can see that the indented style of the blockquote still remains.
| | 02:11 | We didn't override this in our CSS rule.
| | 02:14 | We simply added more rules to it.
| | 02:16 | We changed the font family, the weight and the line height.
| | 02:20 | Another option you have with blockquotes is to add an
attribute that specifies where the quotation came from.
| | 02:25 | This is the cite attribute and its value is always a URL.
| | 02:29 | This particular doesn't come from any other page, but let's look at how you
would add the cite attribute to quotations that are from another source.
| | 02:37 | Before we can assign a cite attribute to the blockquote, we need
to make sure that we have the entire blockquote tag selected.
| | 02:43 | Look in the tag selector bar at the bottom of the document window.
| | 02:47 | The tag that is currently highlighted is the P tag.
| | 02:50 | This text was previously marked up as a paragraph.
| | 02:53 | When we added the blockquote, it simply wrapped around that paragraph.
| | 02:56 | This is perfectly valid HTML.
| | 02:58 | You can have many paragraphs within a single blockquote.
| | 03:01 | So we don't need to remove that paragraph, but do click
on the tag immediately before it, the blockquote tag.
| | 03:07 | With the entire blockquote element now selected, go to the tag
inspector panel, click the arrow beside its name to open that panel.
| | 03:15 | This panel allows you to easily add attributes
that are available for the selected HTML element.
| | 03:21 | Click the plus sign by the general label.
| | 03:23 | The only attribute listed is cite, because this is
the only blockquote related attribute that exists.
| | 03:30 | Click in the box next to cite.
| | 03:32 | A text field will appear where you can
type in a URL to another page on the web.
| | 03:37 | Beside this text field are icons that allow you to either point or browse
to a file that's on your local system as the source of the blockquote.
| | 03:45 | Again, since this quotation did not come from
another source, we don't need to set anything here.
| | 03:50 | But this is yet another piece of information that
web devices can make available to their users.
| | 03:56 | For instance, when JAWS encounters a blockquote,
it announces that it is a blockquote and then says
| | 04:01 | where the citation is from if you do set a cite attribute.
| | 04:04 | Go ahead and close the tag inspector.
| | 04:08 | So, we've seen that the blockquote element carries a lot of information
that can be conveyed to difference devices and to different users.
| | 04:15 | It shouldn't be used for purely presentational formatting, but
instead only when there is quoted text that needs to be indicated.
| | 04:21 | Next we'll talk about how to add further
information to your page using HTML lists.
| | Collapse this transcript |
| Creating basic lists| 00:00 | >> Lists are another element in HTML that add structure to your text and
provide information on how pieces of information relate to each other.
| | 00:08 | They can be incredibly important to screen reader users.
| | 00:11 | When a list is marked up correctly, many screen readers will announce
when it comes to the list and say how many items are in the list.
| | 00:18 | The user can then decide whether to skip over the list or not.
| | 00:21 | If text is only given the appearance of being in a
list, but not actually marked up as one in the HTML,
| | 00:27 | the user will not be told when the list starts and will have no idea
how much longer they have to sit through the reading of the list.
| | 00:33 | If you're following along with the exercise
files, open visitors.html in Dreamweaver.
| | 00:39 | It's located in the 04_10 folder of the chapter four exercise files.
| | 00:44 | In design view, scroll down the page to the events section.
| | 00:49 | There's currently a block of text that is made to look
like a list but has not actually been marked up as one.
| | 00:55 | The three items under the sentence Wardscott's Annual Events
include, just have dashes written in the text to make it look
| | 01:02 | like a list and line breaks at the end of each line.
| | 01:05 | This text should be changed to an unordered list.
| | 01:08 | An unordered list is used to markup a series of information
where the order of the items in the list is not important.
| | 01:15 | It's rendered by default with bullets.
| | 01:17 | You create an unordered list in Dreamweaver in the properties inspector.
| | 01:21 | The button showing three bulleted lines
turns selected text into an unordered list.
| | 01:27 | The button to its right shows number list items.
| | 01:30 | This is used to make an ordered list, which marks up a
series of information where the order of items is important.
| | 01:36 | It usually shows a progression or sequence and by default it's
rendered with numbers or other sequential markers such as letters.
| | 01:43 | Before we click the unordered list button to change the
selected text into a list, we need to make some changes to it.
| | 01:50 | Place your cursor before the text Wardscott Heritage Festival.
| | 01:54 | Use the backspace key to remove the dash at the beginning
of that line as well as the line break between the sentence
| | 02:01 | that precedes it then hit enter or return to create a new paragraph.
| | 02:05 | Repeat this process for the next two lines.
| | 02:08 | Remove the dash, remove the line break and
then hit enter to create a new paragraph.
| | 02:17 | This is the ideal starting point to create a list in Dreamweaver.
| | 02:21 | Highlight over these three new paragraphs.
| | 02:24 | Now you can click the bulleted icon on the
properties inspector to create an unordered list.
| | 02:30 | Dreamweaver changes each paragraph into
a list item within the unordered list.
| | 02:35 | Let's see how screen reader may handle this list.
| | 02:38 | Click on the globe icon in the document toolbar at the top of the window.
| | 02:43 | Select preview in Firefox from the menu.
| | 02:46 | You'll be asked to save the page, so click yes.
| | 02:49 | You can scroll down the page and see our bulleted list.
| | 02:56 | Now let's launch JAWS and see how it handles the list.
| | 02:59 | If you're on a MAC, you can use the voice over screen reader to
read this page, but keep in mind that it doesn't currently announce
| | 03:05 | when you're coming to a list or how many items are in the list.
| | 03:09 | To launch JAWS, go to your Start menu
and click on JAWS in your programs list.
| | 03:16 | >> Digital Voice: JAWS 40 minute mode.
| | 03:18 | Desktop. To move between items press the arrow keys.
| | 03:21 | Page has 8 settings and no links.
| | 03:23 | Visitors vertical bar Town of Wardscott heading level
two section navigation.
| | 03:27 | >> I just pressed the control key to stop
JAWS from reading the entire page.
| | 03:32 | What we're interested in at this point is how it reads the list.
| | 03:35 | To jump directly to the list press the L key on your keyboard.
| | 03:39 | I'm going to do that now.
| | 03:40 | >> Digital Voice: List of three items.
| | 03:42 | >> As you heard, JAWS announces that it
is a list and how many items are in it.
| | 03:47 | If we are interested in hearing this list, we should press insert and
the down arrow to make JAWS read from this point on the page onward.
| | 03:54 | If the list was very long and we didn't want to read it, we should press
the D key on the keyboard to move to the next different type element.
| | 04:01 | In other words, the next element on the page that is not a list.
| | 04:05 | So we've just created a basic unordered list
and seen how it can be used by a screen reader.
| | 04:10 | Next we'll change the visual style of the list using CSS.
| | Collapse this transcript |
| Styling lists| 00:01 | >> As we talked about earlier with headings the default appearance
of certain HTML elements can deter people from using them correctly.
| | 00:08 | If your not using real list because you need
custom image bullets or other unique styles.
| | 00:13 | It doesn't take much CSS to do that formatting
and keep your HTML clean and semantic.
| | 00:20 | Let's change the appearance of the list we created in the last movie.
| | 00:23 | If you are using the exercise files then the
name of the page is visitors.html and its located
| | 00:29 | in the 04 11 folder inside the chapter four exercise files.
| | 00:34 | Let's create a new CSS file by clicking on the new
CSS rule button at the bottom of the CSS panel.
| | 00:41 | In the new CSS rule dialog box choose tag as the selector type.
| | 00:47 | In the Tag Select menu click on the arrow and scroll down the list to
choose UL, this will make the rule affect all unordered list on the page.
| | 01:00 | Keep this document only selected in the define in option, then click okay.
| | 01:05 | The CSS rule dialog box appears lets start
with some very simple styles for the list.
| | 01:14 | Click on the list category on the left side of the dialog box.
| | 01:19 | Then click on the Type menu.
| | 01:22 | You'll see a number of options for standard bullet types.
| | 01:25 | The default bullet for unordered list and most browsers is disc.
| | 01:30 | Let's choose square, don't make any other
changes at this point but just click okay.
| | 01:36 | In design view scroll down the page, the list
is now indicated by small square bullets.
| | 01:47 | We can see in the CSS styles panel that the name of the CSS
property that controls the bullet type is called list style type.
| | 01:55 | This is the same property that you would use to
change the list marker type on an order list as well,
| | 02:01 | say for instance if you wanted to change from numbers to letters.
| | 02:05 | Now that we know how to make basic changes to our list styles lets
look at some more unique things that we can do to style the list.
| | 02:12 | Click on the UL rule in the all rules listing o the CSS styles panel then
click on the pencil icon on the bottom of the panel to edit the style
| | 02:22 | by bringing up the CSS rule definition dialog box again.
| | 02:26 | It opens with the list category by default the same category
selected by default, the same category that we were on before.
| | 02:33 | Select the Type menu again but this time choose none.
| | 02:38 | This turns off all bullets on the list.
| | 02:40 | We're going to use a background image instead to create the bullet.
| | 02:44 | You'll see under the Type menu that there's a field for bullet
image, while you can use that field to set an image as a bullet
| | 02:51 | for your list it doesn't allow you any type of precise
positioning of that image and relationship to the list text.
| | 02:59 | If we instead use a background image for the bullet on the list we
have all the related background properties to control its appearance.
| | 03:07 | Before we add that image though we need to change the default margin and
the padding on the list, this makes sure that all browsers are starting off
| | 03:16 | from the same baseline so that we can create the proper spacing
and make sure our list text overlap our background bullet image.
| | 03:24 | So click on the box category and the CSS definition dialog box.
| | 03:30 | Under padding keep the same for all box checked and then enter zero in the
top field Dreamweaver fills in a value of zero for the rest of the sides.
| | 03:40 | Under margin uncheck the same for all box, set
the top margin to zero, the right to zero as well
| | 03:48 | and the bottom box type 1.2 and for its unit select em's.
| | 03:57 | This ensures that sufficient space is left between
lines of text no matter how big the font size is.
| | 04:03 | Finally for the left value type 20 and leave the unit set to pixels.
| | 04:08 | The amount of space to the left and right of this element
does not need to scale proportionally with the text
| | 04:13 | so that is why we are choosing pixels here instead of em's now click okay,
| | 04:18 | you'll see that the list now has no bullets
but it still is indented on the left side.
| | 04:24 | The bullet background image needs to be
added to each individual list itself.
| | 04:29 | So we need to create a new rule for the LI element.
| | 04:33 | Click on the new CSS rule icon on the bottom of the CSS styles panel.
| | 04:39 | Choose tag for the selector type then in the Tag
menu scroll down and select LI form the list of text,
| | 04:51 | keep this document only selected for the define in option and click okay.
| | 04:56 | In the CSS definition rule dialog box choose the box category.
| | 05:01 | Under padding uncheck the same for all box and
type zero for the top, right and bottom fields.
| | 05:10 | In the left field type 16 and leave pixel set as the unit of measurement,
this value creates empty space on the left side of each list item.
| | 05:20 | This is where the background image will be
positioned by setting the padding on the left side
| | 05:25 | of the list item to be at least as big as the background image.
| | 05:29 | We're ensuring that it will never overlap that image.
| | 05:32 | Under margin for all checked and then enter zero in the top field.
| | 05:38 | Now click on the background category of the dialog box,
here's where we can finally choose our background image.
| | 05:44 | Click on the browse button, under look in navigate
to the exercise files folder on your system.
| | 05:52 | Go to the chapter four folder.
| | 05:55 | Then chose the 04 11 folder inside that double click on the images folder
from the list of images shown click on bullet_flower then click okay.
| | 06:10 | In the repeat field back in the CSS rule
definition dialog box chose no repeat as the values.
| | 06:19 | Just make sure the background image does not tile
throughout the list item, it only shows once.
| | 06:24 | For the horizontal position enter zero, this means we want to the back
ground position to be all the way to the left side of the k=list item,
| | 06:32 | choose percent as the unit of measurement simply because that's the
unit of measurement we're going to use for the vertical position box.
| | 06:39 | Click in that box now and enter 50 then choose percent
from the unit of measurement field beside of it.
| | 06:48 | 50 percent will keep the bullet vertically
centered with the list item text, now click okay.
| | 06:54 | The bullet image that we chose now shows beside each list item.
| | 07:00 | You can use background images on list items
in this way anytime you need a custom bullet.
| | 07:05 | In the next chapter we will continue working with list but take
the styles up a notch to turn list into navigation bars and menus.
| | Collapse this transcript |
|
|
5. Creating NavigationUsing lists for navigation| 00:01 | >> In the last chapter, we learned how to create HTML lists
and saw how useful they can be too many screen reader users
| | 00:08 | who can often jump directly to them or skip over them.
| | 00:12 | In this chapter, we'll continue working with lists over several movies
to create navigation elements for the example site we've been developing.
| | 00:19 | We'll also go over creating accessible links and fly out menus.
| | 00:24 | If you're following along with the exercise files, open the page
visitors.html from the folder 05_01 in the chapter five exercise files.
| | 00:34 | We're going to add a navigation bar to this page so that we can
start building other pages in the site and linking them all together.
| | 00:40 | Go to Dreamweaver's insert toolbar at the top of the screen.
| | 00:44 | Click on the layout tab.
| | 00:46 | Click the insert DIV tag button, which is immediately
to the right of the button labeled, expanded.
| | 00:52 | This brings up the insert DIV tag dialogue box.
| | 00:55 | From the Insert menu, choose before tag.
| | 01:00 | Then in the adjacent menu, select DIV ID sidebar 1.
| | 01:05 | In the ID box, type name then capital NAV.
| | 01:10 | Now click the new CSS style button.
| | 01:13 | This brings up a new dialogue box asking you to create a new CSS rule.
| | 01:18 | We'll first create some styles for this new DIV then
go back to the insert DIV box to add it to the page.
| | 01:24 | Leave the selector type of advanced chosen and leave
the selector name of main NAV in the selector field.
| | 01:32 | Also, keep this document only selected
in the define in option, then click okay.
| | 01:37 | In the CSS rule definition dialogue box, first choose the color option.
| | 01:44 | Click on the color picker and choose white.
| | 01:47 | Next, click on the background category of the dialogue box.
| | 01:50 | Click in the field to type a background color.
| | 01:53 | Type #272910.
| | 01:57 | We're also going to set a background image on our main navigation DIV.
| | 02:01 | Click the browse button beside the background image field.
| | 02:04 | This brings up a dialogue box where we can select the image to use.
| | 02:08 | If you're using the exercise files, browse to that location
on your machine then choose chapter five, then 05_01,
| | 02:19 | then the images folder and then choose the mainnav_bg_image file.
| | 02:25 | Click okay.
| | 02:26 | Back in the CSS rule definition dialogue box, click on the Repeat menu and
choose repeat X. Finally, in the Vertical Position menu, choose bottom.
| | 02:37 | This will take the background image that we've
added and repeat it across the page horizontally.
| | 02:42 | It will pin it to the bottom of the DIV so that as the text grows
bigger, the background color that we've set will fill in the extra room
| | 02:48 | above the background image if it becomes too
small to fill the new height of the main NAV DIV.
| | 02:54 | Let's set one more style for this DIV.
| | 02:56 | Click on the border category of the dialogue box and
uncheck all of the three same for all checkboxes.
| | 03:03 | We're just going to set a border on the top of the box, so in the
top box, underneath style, click on the menu and select solid.
| | 03:12 | In the top box under width, type 1 and leave
pixels selected as the unit of measurement.
| | 03:19 | Under color, click on the color picker for the top option and select white.
| | 03:26 | Now click okay.
| | 03:29 | We're taken back to the insert DIV tag dialogue box.
| | 03:33 | That's because we still haven't added this DIV
to the page, we've just created its styles.
| | 03:37 | We've already told Dreamweaver where we want the DIV to be added
to and what it's ID should be, so now we can click on okay.
| | 03:46 | The new DIV is added to the page with placeholder content.
| | 03:49 | We're going to place a list with the main
areas of the site into this new DIV.
| | 03:53 | In the exercise files, open the file mainnav.doc
from the chapter five folder.
| | 03:59 | Select all of the content in this document then hit
control C or command C on the keyboard to copy the text.
| | 04:08 | Return to Dreamweaver.
| | 04:10 | We want to make sure that this text pastes in with its structure intact.
| | 04:14 | If you're not sure if your copy of Dreamweaver is set to do
this by default, go to the edit menu and choose paste special.
| | 04:23 | Here we can choose to paste in the text with its structure.
| | 04:27 | Click okay.
| | 04:29 | Let's go into the code view to make sure that
Dreamweaver pasted in the content correctly.
| | 04:33 | Click on the code view button in the document toolbar.
| | 04:36 | We're taken to the point in the document of the main NAV DIV.
| | 04:40 | The first element what pasted in was an H2 element.
| | 04:44 | This labels the section as the main navigation section, just like
we did for the section navigation for the footer areas of the site.
| | 04:51 | We next have a UL element, an unordered list, but you can see
that there's an extra UL tag at the beginning of this list.
| | 04:59 | We don't want that here so delete it.
| | 05:01 | Highlight over and just delete.
| | 05:04 | Now the structure is as we need it.
| | 05:06 | We have a main NAV DIV, a heading and an unordered list.
| | 05:11 | Click on the design view button.
| | 05:13 | Now we need to add links to each of these items.
| | 05:16 | Click on the link field on the properties inspector.
| | 05:20 | Type index.html.
| | 05:22 | Next, highlight over residence.
| | 05:27 | Then click in the link field and type residence.html.
| | 05:34 | Highlight business and type business.html for its link.
| | 05:42 | Highlight over government and type government.html for its link.
| | 05:51 | Highlight over visitors and type visitors.html for its link.
| | 06:00 | Highlight over departments and type departments.html for its link.
| | 06:06 | And finally, highlight over newsroom and type newsroom.html for its link.
| | 06:16 | We now have a main navigation area with a heading to label it as
such and then a series of links to the main areas of the site.
| | 06:26 | Since the main links of the page are made with a list, screen readers
can easily jump over the entire list and get straight to the next block
| | 06:33 | of content, but this definitely doesn't look like a NAV bar yet.
| | 06:38 | Next, we'll add the CSS to transform the appearance
of this list into a standard type of NAV bar.
| | Collapse this transcript |
| Creating a horizontal navigation bar| 00:01 | >> In the last movie we created the structure of a NAV bar.
| | 00:05 | Now we'll add the CSS to make it look like a NAV bar for sighted users.
| | 00:10 | If you're following along with the exercise files, open the page
visitors.html from the 05_02 folder of the chapter five exercise files.
| | 00:19 | We'll continue to edit it in Dreamweaver.
| | 00:21 | First let's add the off left class to the main
navigation heading so that we can move it off the screen
| | 00:27 | as we did earlier with the section navigation and footer headings.
| | 00:31 | Highlight over the text.
| | 00:32 | In the properties inspector click on the Style menu.
| | 00:36 | From the options show, choose the off left class.
| | 00:41 | The main navigation heading has now disappeared.
| | 00:44 | Remember, it's still in the source so that it can be read by screen
readers, text browsers and other devices that do not use CSS.
| | 00:51 | Now to start making this look like a NAV bar, we first want to remove
the default list styles so it will no longer look like a regular list.
| | 00:59 | In the CSS styles panel, click on the new CSS rule button at
the bottom of the panel, choose advanced as the selector type.
| | 01:08 | In the selector field, highlight over the default text
that is shown and delete it then type #mainNAV UL.
| | 01:20 | This selector targets the UL element that is within our mainNAV DIV.
| | 01:26 | Keep this document only selected for the
define in option and then click okay.
| | 01:32 | The CSS rule definition dialogue box opens.
| | 01:35 | Here we're just going to remove default list styling so click
on the box category in the left side of the dialogue box.
| | 01:42 | Leave the same for all box under padding
checked and enter zero in the top field.
| | 01:49 | Under margin, leave the same for all box checked
as well and again, enter zero in the top field.
| | 01:55 | Next, click on the list category of the dialogue box, choose
the Type menu and scroll down to the bottom and choose none.
| | 02:06 | This removes any bullets that might appear on the list.
| | 02:09 | Now click okay.
| | 02:11 | Next, we need to make the list items stop stacking
on top of each other and instead sit side by side.
| | 02:17 | We're currently using the float property on the sidebar of the page.
| | 02:21 | It moves it off to the left and allows
other content to sit beside it on the right.
| | 02:26 | If we float every single list item, they will all line up together
on a single line instead of tacking one on top of another.
| | 02:34 | Click on the new CSS rule button at the bottom of the CSS styles panel.
| | 02:38 | In the new CSS rule dialogue box, leave
advanced checked as the selector type.
| | 02:43 | In the selector field, delete the default
text that is shown and type #mainNAV LI.
| | 02:51 | This selector targets all of the list items within the mainNAV DIV.
| | 02:59 | Leave this document only selected and click okay.
| | 03:02 | As with the UL element, we first want to remove the
default list styling, so click on the box category.
| | 03:11 | Leave both the same for all boxes checked under padding
and margin and in both of the top boxes, enter zero.
| | 03:21 | Above the margin section of the screen, you can see a Float menu.
| | 03:25 | Click on the arrow of that menu and you'll
see that you options are left, right and none.
| | 03:31 | Choose left.
| | 03:33 | Next, let's remove the flower bullet background image from these
LI's and add a new background image for them in the NAV bar.
| | 03:40 | So click on the background category of the dialogue box then
click on the browse button beside the background image field.
| | 03:47 | In the select image source dialogue box, browse to the location of
the exercise files on your computer, choose the chapter five folder
| | 03:59 | and the exercise files then click on the
05_02 folder then click on the images folder.
| | 04:07 | Choose the image named mainNAV_divider.jpg then click okay.
| | 04:15 | In the Repeat menu, back in the CSS rule
definition dialogue box, choose no repeat.
| | 04:22 | This background image is simply a divider line and
we only want it to show one time on each list item.
| | 04:28 | In the Horizontal Position menu, choose right
and in the Vertical Position menu, choose top.
| | 04:34 | This will position the divider line background
image on the right side of every list item text.
| | 04:40 | Now click okay.
| | 04:41 | You can see that now the list items are appearing side by side,
but the dark brown background on the mainNAV DIV has disappeared.
| | 04:49 | This is because floats are removed from the flow of the document,
meaning other content around them essentially doesn't know they exist.
| | 04:56 | With the list items floated, it's as if no content now exists
inside the mainNAV DIV, so this DIV collapses to zero height.
| | 05:04 | To fix this, we need to add an element to the bottom of the DIV
below the floated list items that is set to clear the floats.
| | 05:11 | This will make the mainNAV DIV expand down to contain this item.
| | 05:15 | Dreamweaver pre-made layouts comes with a class named clear
float that is already available to use for this purpose.
| | 05:22 | Let's go into code view.
| | 05:24 | So click on the code button in the document toolbar.
| | 05:27 | We're taken to a spot in the code showing a mainNAV DIV.
| | 05:30 | Immediately above it in the code is the header DIV.
| | 05:33 | Inside the header DIV is a <BR> for line break
that has a class of clear float set on it.
| | 05:39 | Highlight over this break element and go to the Edit menu
and select copy then place your cursor after the </ul> tag
| | 05:49 | in the mainNAV DIV and hit enter or return to go to a new line.
| | 05:53 | On that new line, again go to the Edit menu and select paste.
| | 05:58 | Since this break element is not floated, the mainNAV DIV
now has some content within it that it can expand to contain
| | 06:05 | and show the background below the floated list items.
| | 06:08 | Click the design button on the document tool bar to go back to design view.
| | 06:12 | You can see that the background has now returned.
| | 06:15 | Next, let's add the styles to the links inside the list.
| | 06:18 | Click on the new CSS rule button at the bottom of the CSS styles panel.
| | 06:22 | Leave advanced selected as the selector type.
| | 06:25 | In the selector field, delete the default text
that is shown and type #mainNAV A. This selects all
| | 06:35 | of the A elements or the links inside of the mainNAV DIV.
| | 06:40 | Leave this document only selected for the define in option and click okay.
| | 06:45 | We want these links to not act like regular
text links but more like buttons.
| | 06:50 | So we want a large area around the text
to be clickable, not just the text itself.
| | 06:54 | To do this, we can change the A elements
from being inline elements to block elements.
| | 07:00 | Block elements are things like DIVs, paragraphs and lists where
every item starts on a new line and stacks one on top of each other.
| | 07:08 | Inline elements are things like the A tag, the M tag, the strong
tag, where the element sits in the same line with other elements.
| | 07:17 | Click on the block category in the dialogue box.
| | 07:20 | The last option on the screen is a display menu.
| | 07:23 | Click on the arrow next to that menu and choose block, the third item down.
| | 07:28 | Next, let's expand the space around each of the
A elements to expand the clickable area of each.
| | 07:34 | So click on the box category in the dialogue
box, uncheck the same for all box under padding,
| | 07:40 | in the top box type six, leave pixels selected as the unit of measurement.
| | 07:45 | Also type six into the bottom field under padding.
| | 07:48 | This adds six pixels of space on top and below each A element.
| | 07:52 | In the right field enter 16.
| | 07:55 | leave pixels selected.
| | 07:57 | And then in the left field enter the same value of 16 pixels.
| | 08:01 | Next, we want to get rid of the default blue
link color and their default underlines.
| | 08:06 | Click back on the type category of the dialogue box.
| | 08:10 | Click on the color picker next to the color field and select white.
| | 08:16 | There are five checkboxes shown for setting
the decoration type of the element.
| | 08:21 | Click on none.
| | 08:22 | This removes the default underline of the links.
| | 08:26 | Click on okay.
| | 08:28 | The links are nicely padded and spaced out from each other.
| | 08:31 | The finishing touch that we're going to
add is a rollover effect on the links.
| | 08:36 | We can use the hover pseudo class in CSS to make the link's
background color change when the mouse passes over it.
| | 08:43 | In order to make the effect happen for keyboard users when
they tab to the link, we'll also add the focus pseudo class.
| | 08:50 | The focus state of a link is basically when it is selected
and when you tab to a link you're giving it focus.
| | 08:57 | Click on the new CSS rule button at the bottom of the CSS styles panel.
| | 09:02 | Leave advanced selected as the selector type and delete the
default text shown in the selector field, type #mainNAV A:hover.
| | 09:12 | Since we want to set the same styles for focus, we can group
that selector with this selector by inserting , #mainNAV A:focus.
| | 09:29 | Finally, in order to make this rollover work in Internet
Explorer, we'll add one more selector to this group.
| | 09:44 | Type , #mainNAV A:active.
| | 09:49 | Internet Explorer doesn't use the same pseudo class of focus that
the other browsers do, but instead uses a pseudo class of active.
| | 10:01 | Setting all three of these pseudo classes at once covers all of our bases.
| | 10:05 | Click okay to bring up the CSS rule definition dialogue box.
| | 10:10 | All that we're going to do on rollover is change the
background color, so click on the background category.
| | 10:17 | Place your cursor inside the background color box and type #4F3B18.
| | 10:24 | This is simply a lighter shade of the brown
that's currently being used on the NAV bar.
| | 10:33 | click okay to accept the rule.
| | 10:35 | We're not going to see the rollover effect until we look
in a browser, so let's go ahead and preview in Firefox now.
| | 10:44 | Click on the globe icon in the document
tool bar and choose preview in Firefox.
| | 10:48 | When asked to save the changes to the page, click yes.
| | 10:52 | You can see that we now have what looks like a standard NAV bar.
| | 10:57 | if we hover over the links you can see
that the background color of each changes.
| | 11:04 | Let's also try tabbing to the links.
| | 11:06 | Simply hit the tab key on your keyboard.
| | 11:08 | This will take you to the first link on the page, in this case, home.
| | 11:12 | It adds a dotted outline around the link, the
default style for focus, and also a brown background.
| | 11:19 | Continue to hit the tab key and you can see
how you continue to move through the links.
| | 11:24 | To activate any of these links, you would
simply press the enter key on your keyboard.
| | 11:30 | Close the Firefox page now.
| | 11:33 | Let's also check the page in Internet Explorer
7 to make sure it's working there as well.
| | 11:38 | Click on the globe icon in the document tool bar
back in Dreamweaver and choose preview in IExplore.
| | 11:47 | In Internet Explorer 7, the background is not showing in the NAV bar.
| | 11:52 | this makes the links almost invisible until we mouse or
tab over them, so we definitely want to fix this issue.
| | 11:58 | Close the Internet Explorer window and return to Dreamweaver.
| | 12:02 | Internet Explorer has a proprietary CSS property called has layout.
| | 12:06 | Frequently CSS rules will not work until has layout has been set as well.
| | 12:12 | The way we can set has layout is by setting
a width or another dimension on our DIV.
| | 12:17 | in the CSS styles panel, select the mainNAV rule.
| | 12:20 | If you scroll down within the properties pane, you'll see that
we're not currently setting any dimension on this element.
| | 12:26 | On the bottom of the pane is the add property link.
| | 12:29 | Click on this.
| | 12:30 | Type in width.
| | 12:31 | Then click on the box next to this field, type 100, and in the
unit of measurement menu next to this field, select percent.
| | 12:39 | This won't change the appearance of the DIV in any
other browsers since all DIVs are 100 percent wide
| | 12:46 | by default, but it should fix the problem in Internet Explorer.
| | 12:50 | Let's preview again to make sure.
| | 12:52 | Click on the globe icon in the document
toolbar and choose preview in IExplore.
| | 12:58 | Click yes to save changes to the page.
| | 13:00 | Now when the page is brought up, you can see that the background is there.
| | 13:07 | the same rollover effect also works.
| | 13:10 | So we've seen that we can use CSS to take a simple list and
turn it into a horizontal navigation bar with rollover effects.
| | 13:17 | Next we'll learn how to style a list to look like
another type of common layout element, the Vertical menu.
| | Collapse this transcript |
| Creating a vertical navigation bar| 00:02 | >> Up until this point, our example site has had nothing in
the side bar except for the hidden section navigation heading.
| | 00:09 | Let's add that section navigation menu now.
| | 00:12 | We'll once again use a list and style it using
CSS to appear like any other vertical menu.
| | 00:18 | Let's continue working on the same page, visitors.html, in Dreamweaver.
| | 00:23 | If you're using the exercise files, this page is saved
in the 05_03 folder of the chapter five exercise files.
| | 00:31 | We also need to open the file sectionnav.doc
from the chapter five exercise files folder.
| | 00:37 | Go to that Word document now.
| | 00:40 | This is the list of links that we're going to add to our vertical menu.
| | 00:44 | Select all of the content in the page.
| | 00:46 | Hit control C or command C to copy the text.
| | 00:50 | Go back to Dreamweaver and open visitors.html page.
| | 00:55 | Click inside the side bar DIV, which is outlined with a dotted
line, then hit control V or command V to paste in the list.
| | 01:04 | Let's go into code view to make sure the list pasted properly.
| | 01:08 | Click on the code button in the document tool bar.
| | 01:11 | Scroll up so that you can see the entire HTML.
| | 01:14 | Again, we have an unordered list with a series of list items.
| | 01:18 | Once again, an extra UL element has been
pasted in, so just delete this line.
| | 01:25 | While we're in code view it would also be good to add in an extra DIV that
wraps around both the section navigation heading and the list below it
| | 01:33 | to make sure that they always stay grouped together in case we later
add more content into this side bar below the section navigation.
| | 01:41 | Place your cursor before the opening H2 tag and hit enter or
return to create a new line, type an opening <DIV ID="sectionNAV">.
| | 01:48 | Now let's put in the </DIV> after the </UL>.
| | 01:53 | Hit enter or return to go to a new line.
| | 01:57 | As you begin typing </DIV> and put in the slash,
Dreamweaver will finish the closing tag for you.
| | 02:07 | Now let's go back into design view by clicking
on the design button in the document tool bar.
| | 02:16 | We need to create the links on each of these items.
| | 02:19 | Highlight over history of Wardscott.
| | 02:22 | In the link field of the properties inspector, type history.html.
| | 02:30 | Highlight over where to stay and for the link type stay.html.
| | 02:39 | Highlight over what to do and see and for the link type see.html.
| | 02:46 | Highlight over where to eat and drink and for the link type eat.html.
| | 02:55 | Highlight over how to get here and for the link type gethere.html.
| | 03:03 | Finally, highlight over visitor's bureau and for the link type bureau.
| | 03:14 | Now we can begin adding styles to the div, the list and the links.
| | 03:18 | Click on the new CSS rule button at the bottom of the CSS styles panel.
| | 03:22 | Leave advanced selected for the selector type.
| | 03:26 | Clear out the default text in the selector field and type #sectionNAV.
| | 03:32 | Leave this document only selected for the define in option and click okay.
| | 03:39 | First let's set the margin and padding of this DIV.
| | 03:42 | Click on the box category.
| | 03:44 | Under padding uncheck the same for all box.
| | 03:47 | In the top field enter 20, in the right enter zero, in
the bottom field enter 14 and in the left enter zero.
| | 03:59 | Leave pixels set as the unit of measurement for all of these fields.
| | 04:04 | Uncheck the same for all box under margin as well.
| | 04:08 | In margin's fields enter zero in the top field, fifteen in the
right field, zero in the bottom field and fifteen in the left field.
| | 04:21 | The margin gives us space around the DIV on each side.
| | 04:26 | The passing gives use space inside the DIV.
| | 04:29 | Now click on the background category.
| | 04:31 | Click inside the background color field and type #EEF0E3.
| | 04:40 | We're also going to set a background image so click on
the browse button beside the background image field.
| | 04:46 | In the select image source dialogue box, browse to the
location of the chapter five exercise files on your computer,
| | 04:54 | click on the 05_03 folder then on the images folder,
select the sectionNAV_bg image and click okay.
| | 05:04 | Back in the CSS rule definition dialogue
box, choose repeat X from the Repeat menu.
| | 05:10 | In the Vertical Position menu, choose bottom.
| | 05:15 | Now click okay.
| | 05:16 | We now have a block for our section navigation menu.
| | 05:19 | In order to make this menu appear as if it's coming
directly out of the bottom of the mainNAV bar,
| | 05:25 | let's remove the top padding that is currently set on the side bar DIV.
| | 05:29 | In the CSS styles panel, scroll up in the
all rules pane, select the sidebar one rule.
| | 05:37 | In its properties, shown below, click on the padding
declaration, then click on the trash can item
| | 05:42 | at the bottom of the panel to remove all of the padding.
| | 05:45 | Now the section navigation DIV is starting
directly at the top of the sidebar.
| | 05:53 | Let's continue styling the list and the links.
| | 05:56 | Click on the new CSS rule button at the bottom of the CSS styles panel.
| | 06:00 | Keep advanced selected as the selector type.
| | 06:03 | Clear out the default text in the selector field and enter #sectionNAV UL.
| | 06:10 | Click okay.
| | 06:13 | Click on the box category in the CSS rule definition dialogue box.
| | 06:19 | Leave both of the same for all checkboxes
checked and enter zero for both the top fields.
| | 06:27 | We're just removing the default list spacing.
| | 06:30 | Click okay.
| | 06:32 | Next, click on the new CSS rule button at
the bottom of the CSS styles panel again.
| | 06:38 | Leave the advanced selector type chosen and in the selector
field, clear out the default text and type #sectionNAV LI.
| | 06:48 | Click okay.
| | 06:51 | Go to the box category, again leave the same for
all checkboxes checked under both margin and heading
| | 06:57 | and enter zero in both top fields for margin and heading.
| | 07:01 | Next, click on the background category.
| | 07:05 | You want to remove the default background image
of the flower bullet from this particular list.
| | 07:10 | So click inside the background image field and type none.
| | 07:15 | This will override the previous style
and get rid of that image from this list.
| | 07:20 | Finally, click on the border category.
| | 07:22 | Uncheck all of the three same for all checkboxes.
| | 07:26 | In the bottom field under style, select the menu and choose solid.
| | 07:32 | In the bottom field under width, enter one and
leave pixels selected as the unit of measurement.
| | 07:39 | And in the bottom field under color, type #D5DDDD.
| | 07:46 | Now click okay.
| | 07:51 | Next, let's add a style for the links themselves.
| | 07:54 | Click on the new CSS rule button at the bottom of the CSS styles panel.
| | 07:59 | Leave advanced selected as the selector type.
| | 08:02 | Clear out the default text in the selector
field and enter #sectionNAV A. Click okay.
| | 08:12 | As with our horizontal menu that we made earlier, we want the
full area of each link to be clickable, not just its text.
| | 08:19 | So click on the block category, in the Display menu click
the arrow and scroll down to select block as the option.
| | 08:28 | Now let's add some spacing between the links.
| | 08:30 | Click on the box category.
| | 08:33 | Uncheck the same for all box under padding.
| | 08:35 | For top enter 4, for right, 10, for bottom 2, and for left 16.
| | 08:44 | Leave pixels selected as the unit of measurement for all of these fields.
| | 08:47 | Finally, click back on the type category.
| | 08:51 | In the color box type #257483.
| | 09:01 | Then check the none box under decoration.
| | 09:04 | Now click okay.
| | 09:05 | Our last step will be to add rollover effects
as we did with the horizontal navigation bar.
| | 09:11 | Click the new CSS rule button at the bottom of the CSS styles panel.
| | 09:15 | Leave advanced selected as the selector type and
clear out the text within the selector field.
| | 09:21 | Type #sectionNAV A:hover, #sectionNAV A:focus, #sectionNAV A:active.
| | 09:25 | As we talked about earlier, this makes the rollover
effect work for both mouse users and keyboard users.
| | 09:34 | Leave this document only selected and click okay.
| | 09:38 | This time, instead of changing the background color
for the rollover, we'll change the text color.
| | 09:50 | Click in the color field and type #272910.
| | 09:56 | Now click okay.
| | 09:58 | Let's preview the page in a browser to see how it will work.
| | 10:05 | Click on the globe icon in the document
tool bar and choose preview in Firefox.
| | 10:11 | When asked to save the changes to the page, click yes.
| | 10:17 | Try moving your mouse over the items in the left navigation menu.
| | 10:24 | You can see the color change, but let's also try tabbing to them.
| | 10:34 | First we're going to have to tab through
all of the links in the main navigation bar.
| | 10:40 | So hit tab on your keyboard until you move to
the first link in the section navigation menu.
| | 10:48 | You'll see a dotted outline around the
first link and the text color will change.
| | 10:53 | If you continue to hit tab, you'll move
through each of these links in order.
| | 10:57 | Close Firefox and lets again check this page in Internet Explorer.
| | 11:02 | Click on the globe icon in document tool
bar and choose preview in IExplore.
| | 11:08 | This time there are not problems with the menu in Internet Explorer.
| | 11:12 | It looks and works the same as it did in Firefox.
| | 11:16 | So we've learned how to style a list to look both
like a horizontal NAV bar and a vertical menu.
| | 11:22 | We've been using lists in this way because they're the correct
semantic markup for a series of links and provide additional structure
| | 11:29 | to help screen reader users skip sections
of the page they aren't interested in.
| | 11:33 | Another important tool to help screen reader users get to
the content they want quickly is the skip navigation link.
| | 11:40 | We'll talk about that next.
| | Collapse this transcript |
| Adding skip navigation links| 00:02 | >> Both section 508 and WCAG guidelines recommend
providing a way for users to skip over groups of links.
| | 00:09 | Sighted users can scan the page with their eyes
to find the information that they want quickly.
| | 00:14 | Users with screen readers and other assisted devices do not have
this visual scanning ability they are going to have to hear the logo
| | 00:22 | and navigation read out to the each time
they access another page in our site.
| | 00:27 | We've seen that grouping links into list can make it easier
for screen reader users to jump pass an entire nav bar.
| | 00:33 | However not all screen readers maybe familiar with this
function if it is even exist in there screen reader.
| | 00:41 | The voice over screen reader on the MAC doesn't currently
announce list or offer any special way to jump past them.
| | 00:47 | The inability to skip repetitive links can also be a problem with
mobility impairments who use the keyboard to navigate instead of a mouse.
| | 00:55 | Imagine you have a form on your page that a user wants to fill out, a
keyboard user can't just use his or her mouse over the first field click
| | 01:03 | in it and start typing, instead the user has to tab trough all
the links until he or she finally arrives at the first form field.
| | 01:12 | So this is where what is called a skip navigation link comes in.
| | 01:17 | this is simply a normal link that is placed at the top of your page and
is linked to the spot further down your page where the content starts.
| | 01:26 | When a user encounters this link he or she can follow it
directly to the content or ignore it if he or she wants
| | 01:33 | to use the nave bar or the other content at the top of the page.
| | 01:36 | If your following along with the exercise files open visitors.html
in Dreamweaver from the 04 05 folder in the chapter 5 exercise files,
| | 01:47 | we are going to add a DIV with skip navigation
links in it at the top of our page.
| | 01:52 | Go to the insert toolbar and click on the layout tab, then click on the
insert DIV tag button just to the right of the button labeled expanded.
| | 02:01 | In the insert DIV tag dialog box click on the arrow
of the insert menu and choose after start of tag
| | 02:09 | and then in the adjacent menu select DIV ID header, this will
place out new DIV immediately inside the top of the header DIV.
| | 02:18 | In the ID box type skipLINKS then click the new CSS style button to bring
up the new CSS rule dialog box, choose advanced as the selector type,
| | 02:31 | leave the default text that Dreamweaver puts in the
selector field a pound sign and then skipLINKS intact
| | 02:37 | and also leave this document only selected
for the define in option, click okay.
| | 02:43 | The only change we are going to make at this point is positioning the DIV.
| | 02:48 | We're going to give it a value of absolute.
| | 02:51 | As we talked about earlier with our off left positioning method absolute
positioning pins an object to a particular point on the page and takes it
| | 03:00 | out of the flow so that it doesn't interfere
with any of the content around it.
| | 03:04 | We don't want out skipLINKS to push our logo further down in the header
DIV, so we want to get it out of the flow by using absolute positioning.
| | 03:11 | Click on the positioning category in the CSS rule definition dialog box,
in the type menu click the arrow and select absolute, now click okay.
| | 03:22 | We're back at the insert DIV tag dialog box.
| | 03:25 | We've already chosen the settings for this DIV so click okay.
| | 03:28 | The DIV is now added to the top of the page with placeholder content.
| | 03:33 | It didn't move the logo down because it is absolutely positioned.
| | 03:37 | We now need to add our links inside this DIV, if you are
using the exercise files open document skipLINKS.doc in Word.
| | 03:45 | There are actually two skip navigation links listed in this document.
| | 03:50 | One is going to skip the user directly to the main content.
| | 03:53 | This is where the user might want to go most of the time.
| | 03:57 | But they may also want to go straight to the section
navigation if they are looking for a particular link.
| | 04:02 | So we're also going to offer them a skip to section navigation link.
| | 04:07 | Both of these links will let them bypass the main navigation bar.
| | 04:11 | Highlight over all of the content in the document and hit control
C or command C on your keyboard to copy it, go back to Dreamweaver.
| | 04:21 | Highlight over the placeholder in the skipLINKS DIV and hit control
V or command V on your keyboard to paste in the new content.
| | 04:30 | Now click on the code button in the document tool bar.
| | 04:34 | We want to make sure that the content pasted in correctly.
| | 04:37 | We do have a list and two list items as we wanted.
| | 04:41 | But again we have an extra UL tag at the
start, so delete this line of HTML.
| | 04:46 | Now click on the design button in the document toolbar.
| | 04:49 | We need to link each of these pieces of text to the appropriate
spots furthers on the page that we want them to go to.
| | 04:56 | We don't need to create new anchor elements on the page to do this.
| | 05:00 | Instead we can link directly to any ID attribute on any page.
| | 05:04 | Our main content DIV has an ID of main content set on it.
| | 05:08 | So in order to jump to that DIV all we need to do is link to that ID.
| | 05:13 | Highlight over the text, skip to main content.
| | 05:16 | In the link field of the properties inspector type #mainCONTENT this
is just like creating a link to an anchor on the page but it saves us
| | 05:30 | from having to add an additional HTML element to our source.
| | 05:35 | Now highlight over the skip to section text in the skipLINKS DIV.
| | 05:40 | in the link field of the properties inspector type #sectionNAV
this will jump us directly to the section DIV inside the side bar.
| | 05:54 | Now we can begin styling these links.
| | 05:59 | Click on the new CSS rule button at the bottom of the CSS styles
panel, leave advance chosen as the selector type and delete the text
| | 06:07 | in the selector field, type in #skipLINKS UL click okay.
| | 06:15 | In the CSS rule definition dialog box chose the box category.
| | 06:22 | Leave the same for all boxes checked under both padding and
margin and enter zero in the top fields for both of these.
| | 06:32 | Now click ok.
| | 06:33 | Next let's style the list items, click on the new
CSS rule button on the bottom of the styles panel.
| | 06:41 | Leave advanced selected at the selector type and
clear out the default text in the selector field,
| | 06:47 | type #skipLINKS LI leave this document only selected and click okay.
| | 06:56 | We want each of the list items to sit side by
side instead of stacked on top of each other.
| | 07:01 | To do this we can use the float property as we did before but this
is going to interfere with some styles that we will add later.
| | 07:08 | So another option is to set the display property to inline.
| | 07:12 | As we talked about earlier, blocked display items stack on top of
each other where as inline items sit on the same line as each other.
| | 07:20 | So click on the block category on the CSS rule definition dialog box,
in the display box click the arrow and scroll down to select inline.
| | 07:30 | Next go to the box category, leave the same for all box
checked under margin and enter zero in the top field.
| | 07:38 | For padding uncheck the same for all box.
| | 07:41 | Now that the list items have a display value of inline, they will
butt right up against each other so we need to add some padding
| | 07:48 | between them, we'll add it on the left side of each list item.
| | 07:51 | In the left box under padding type .5 and in
the unit menu next to that field select em's,
| | 08:01 | this will make sure that at largest text sizes the spacing between the
items will also grow to be larger to make sure that it is still readable.
| | 08:08 | Finally click on the background category, we just need to remove the bullet
flower image, so click in the image background field then click okay.
| | 08:23 | Next let's style the links, click on the new CSS
rule button on the bottom of the CSS styles panel.
| | 08:29 | Leave advanced selected at the selector type and
clear out the default text in the selector field,
| | 08:35 | type #skipLINKS A leave this document only selected and click okay.
| | 08:44 | All we are going to do here is change the
color from the default blue to white so click
| | 08:48 | on the color picker next to the color
field and chose white then click okay.
| | 08:54 | The links will now work and are styled but we could position
them in a better place in the heading to make them more readable.
| | 09:01 | Right now there position is conflicting
with the photo we have in the header.
| | 09:05 | Let's position them on the right side of the screen at the bottom over
the water area of the header photo which has a more solid background.
| | 09:14 | In order to position the links relative to the header we
first need to set a positioning value on the header itself.
| | 09:20 | In the CSS styles panel scroll up in the
all rules pane select the header rule.
| | 09:30 | Click on the add property link in the property pane, type
in position and in the field next to it and select relative,
| | 09:42 | this tells any elements that are within the
header and that are absolutely positioned
| | 09:46 | that they should base their positioning
off of the header not off of the body tack.
| | 09:50 | Now we can edit the rule for the skipLINKS DIV to change its positioning.
| | 09:54 | Scroll down in the CSS styles panel in the all rules pane and
select the skipLINKS rule, click on the add property link,
| | 10:05 | type right and in the field next to it type 10 and in
the final field select pixels as the unit of measurement.
| | 10:15 | When you hit enter to accept the style you will see the skip
navigation links jump over to the right side of the screen.
| | 10:22 | To move them to the bottom, click on property type in bottom in the field
next to it type in 10 and leave pixels selected as the unit of measurement.
| | 10:34 | Now the links jump to the bottom to the header DIV, we
may also what to make their text size a little smaller.
| | 10:41 | Click on the add property link and type font-size and in the field next
to it type in 80 and in the unit of measurement menu select percent.
| | 10:54 | Our skip navigation links are now at the bottom of our header
where they are a little easier to read on top of the header photo.
| | 11:01 | We haven't changed the HTML thought so there is still the first thing that
a user will encounter when reading straight through the source of the page.
| | 11:08 | Let's see how they work by previewing in a browser.
| | 11:11 | Click on the globe icon in the document
toolbar and choose preview in firefox.
| | 11:16 | Click yes to save the changes to the page.
| | 11:20 | Now click on the skip to main content link, you'll see that we
jumped on the page just as we would any other in page link or anchor.
| | 11:29 | So these skip navigation links add yet another way for users to
get around the page quickly without annoyance and frustration.
| | 11:36 | Many people are hesitant to by them however because they don't
like how they appear or they are retrofitting an existing page
| | 11:43 | and don't have a good place to put them at the top
of the page without drastically changing the design.
| | 11:48 | It is possible to hide skip navigation links
from sighted users view in certain conditions.
| | 11:53 | So we'll talk about the implications of this as well as how to do it next.
| | Collapse this transcript |
| Hiding skip navigation links| 00:01 | >> If you can it is best to leave your skip NAV links visible.
| | 00:05 | Remember that sighed keyboard users rely on them as well and hidden skip
NAV link does them little good because although it will be the first thing
| | 00:13 | that they tab to they will not know that they tabbed
to anything because the link will be invisible.
| | 00:19 | However I know that some clients may refuse to let you put a
visible skip NAV link at the top of there site or you may be working
| | 00:26 | on accessibility features to an existing page and don't have a good
place to put the skip NAV link that fits with your existing design.
| | 00:34 | Hiding the link or links is one way you can improve the
accessibility at least part way and not disturb the design.
| | 00:41 | If you are following along with the exercise
files, open visitors.html in Dreamweaver,
| | 00:47 | its located in the 0505 folder of the chapter five exercise files.
| | 00:52 | We can use the same off left positioning technique that we are currently
using on the main navigation, section navigation and footer headers.
| | 01:00 | To pull the skip NAV links off the left side of the page and out of view.
| | 01:04 | In the CSS styles panel scroll through the alt rules
listings to the bottom and select the skip LINKS A rule.
| | 01:13 | Click on the add property link in the properties pane type position and
then in the menu adjacent to that click the arrow and chose absolute.
| | 01:24 | Click on add property again and type margin-left in the field
to the right type -9000, leave pixels selected as your unit
| | 01:37 | of measurement, hit enter or return to accept the rule.
| | 01:41 | To see if this has worked we need to preview it in a browser.
| | 01:44 | Click on the globe icon in the document toolbar and choose
preview in Firefox, click yes to save the changes to the page.
| | 01:52 | As you can see the skip NAV links are no longer visible.
| | 01:56 | There's a compromise approach that we
could take to hiding the skip NAV links.
| | 02:00 | We could hide it from visual users but
make it visible when it is tabbed to.
| | 02:05 | This would help keyboard users who are left out
when we moved the skip NAV link off of the screen.
| | 02:10 | Close Firefox and return to Dreamweaver.
| | 02:14 | When you tab to a link it receives focus so we need to add CSS
rules that move the A element back on screen when it receives focus,
| | 02:23 | click on the new CSS rule button on the bottom of the CSS styles panel,
leave advance selected as the selector type and clear out the default text
| | 02:31 | in the selector field, type #skiplinks A:focus, #skiplinks A:active.
| | 02:40 | Leave this document only selected for the define in option and click OK.
| | 02:54 | We first need o change he left margin value back to a positive
number to get the links to appear on screen when they receive focus.
| | 03:01 | Click on the box category, uncheck the same for all box under margin and
in the left field type 50 and leave pixels as the unit of measurement.
| | 03:15 | Next we need o make the A elements block elements and give them a width
| | 03:20 | because absolute positioning makes every
word with in the link wrap to a new line.
| | 03:24 | We want them all to be on a single line for each link.
| | 03:27 | So in the width field enter 11 and in the
unit of measurement beside it choose M's.
| | 03:35 | This will let the width adjust to the font size of the user, then click
on the block category select the display menu and choose block, click OK.
| | 03:48 | When the skip LINKS are tabbed to and appear back on the screen
we can no longer have them appear on the right side of the screen
| | 03:55 | because we have no way of knowing the correct margin value to make
them appear there, so we need to remove the absolute positioning rules
| | 04:03 | from the skip LINKS DIV that we used in the previous movie.
| | 04:06 | In the CSS styles panel choose the skip
LINKS rule from the listing of all rules.
| | 04:12 | Click on the bottom property and click on the trash can to delete it,
then the position absolute property and the trash can to delete it,
| | 04:22 | and finally click on the on the right
property and the trash can icon to delete it.
| | 04:27 | Next we'll modify the style for the skip LINKS list item rule.
| | 04:31 | Click on the skip LINKS LI rule in the all
rules listings of the CSS styles panel.
| | 04:38 | Click on the add property link type position and then
in he menu next to it choose absolute as the value.
| | 04:48 | This will make it so that as each link displays on
he page one by one they each take up the same spot.
| | 04:55 | Next click on the display in line deceleration
then the trashcan icon at the bottom of he panel
| | 05:00 | to delete it, it's no longer needed with our new styles.
| | 05:05 | We also can delete the padding left property.
| | 05:08 | So click on that and then the trash can icon.
| | 05:11 | This should be all the changes we need.
| | 05:13 | So let's preview in Firefox.
| | 05:16 | Click on the globe icon in the document
toolbar and choose preview in Firefox.
| | 05:21 | Click yes to save changes to the page.
| | 05:23 | As we saw before the links are not visible however let's
try tabbing to them, hit the tab key on your keyboard,
| | 05:30 | the first link skip to main content immediately
appears with the focus dotted outline around it.
| | 05:37 | Hit the tab key again, now the skip to section navigation link
takes its place, since we no longer have focus on the skip
| | 05:45 | to main content link it has again disappeared so
we only see on skip link on the page at a time.
| | 05:52 | Just as before we can hit enter or return on the
keyboard to active that link and jump down the page.
| | 05:59 | While this is not an ideal scenario hidden skip navigation links at
least keep the links present in the HTML for screen readers to access.
| | 06:07 | And using the CSS from this movie you've seen that you can
make the hidden links available to keyboard users as well.
| | Collapse this transcript |
| Proper link text and title attributes| 00:01 | >> We now have both our main navigation and section navigation menus set
up, but most pages will have links within the text of the page as well.
| | 00:09 | Users frequently jump from link to link when they encounter a new page.
| | 00:13 | Screen reader users can use this by bringing up a listing
of all the links in a page using keyboard commands.
| | 00:20 | Sighted users can use their eyes to jump from link to link on
a page looking for the different link color and underlining.
| | 00:28 | But if the links aren't set up properly, the screen
reader's links listing will not be of much use to them.
| | 00:34 | For instance, there may just be so many links on the page that it makes
it impractical to even use the links listing as a navigation method.
| | 00:41 | If the link text doesn't match the topic of the
linked page, this will confuse the screen reader user.
| | 00:47 | A sighted user can look at the text around the link to
get more information about where the link will take them.
| | 00:53 | A screen reader user can do this as well by leaving the links listing and
going back to reading the page, but it will take them much longer to do so.
| | 01:00 | This is also a problem when the link text is vague,
for instance it just says click here or read more.
| | 01:06 | Again, the screen reader user will not know where they're going to go
to, so they'll have to go into reading the page, get back to that link,
| | 01:13 | read to the text around it before they can decide whether that's
the link that they're looking for and that they want to go to.
| | 01:19 | If the same text is repeated for multiple links in the page, the
screen reader user would have to hear that read to them many times
| | 01:25 | in the links listing and again would not
be able to determine which link was which.
| | 01:30 | So if possible, write your link text so that it is
meaningful and can make some sense out of context
| | 01:36 | and so that it is unique from other links on the page.
| | 01:39 | This is not always possible, but for the majority of cases the text
can be written to make the link text more meaningful and clear.
| | 01:46 | Let's look at an example of problematic link
text from our site that we have been working on.
| | 01:51 | If you're following along in the exercise
files, open index-before.html in Firefox,
| | 01:58 | it's located in the 05_06 folder of the chapter five exercise files.
| | 02:03 | This page is the home page of the site we've been working on.
| | 02:06 | If we scroll down the page we can see all the text.
| | 02:09 | The orange links stand out visually, but
because the text of so many of them is repeated,
| | 02:15 | sighted users will have to take more time
to locate the link they are looking for.
| | 02:19 | For instance, we have the text click here, click here,
underneath the elections 2008 heading at the bottom of the page.
| | 02:28 | And if we scroll back u p to the top of the page, you'll see the same link
text, click here and click here in the first two paragraphs of the page.
| | 02:37 | In the sidebar, we have a number of links to news stories, but each
of them is linked with the same text, read more, read more, read more.
| | 02:45 | This is even more problematic for screen
reader users than for sighted users.
| | 02:49 | To quickly see the list of links in the page, we can use the
Fangs extension for Firefox that we downloaded earlier.
| | 02:56 | Right click or control click on the page to bring up the Context
menu and click on the view Fangs option in the menu.
| | 03:03 | In the new window that opens click on the links list tab.
| | 03:08 | At the top of the list are the skip navigation links that
we added earlier followed by the main navigation links.
| | 03:15 | But then you can see that we have a series of
read more, click here and other unclear link text.
| | 03:21 | Close the Fangs window now.
| | 03:23 | Now let's look at how that text can be improved.
| | 03:25 | Open the file index-after.html in the 05_06
folder of the chapter five exercise files.
| | 03:33 | This is the same page with the same content, but some of the text has been
slightly rewritten to make the link text be more clear and meaningful.
| | 03:41 | In the first paragraph we now have a link that says schedule of free
performances and another that says buy discounted tickets to rides.
| | 03:48 | Both sited and screen reader users can quickly identify these links.
| | 03:53 | In the sidebar, we've simply removed the read more links
and instead linked the title of each of the news articles.
| | 03:59 | Again, this is the clearest text that will tell the user
exactly what they are going to get if they choose this link.
| | 04:04 | We haven't changed the links that say English
and Spanish in the third paragraph on the page.
| | 04:09 | These are still a little vague if they were seen by a screen reader,
| | 04:12 | but rewriting them to include more words would
probably be problematic for sighted users.
| | 04:18 | So let's open this page in Dreamweaver.
| | 04:20 | In design view, scroll down the page, click on the English link.
| | 04:29 | We can set a title attribute on this link
to provide extra information about it.
| | 04:34 | Open the tag inspector panel then click on
the plus sign by the CSS/accessibility option.
| | 04:40 | You'll see a field for title.
| | 04:43 | Let's type in PDF flier English version.
| | 04:49 | Next, click on the link for Spanish then go into
the tag inspector panel and select the title field.
| | 04:58 | Type in PDF flier Spanish version.
| | 05:04 | Now go to file > save and return to Firefox.
| | 05:12 | Reload the page to save the changes.
| | 05:14 | If we hover over the English and Spanish links, a tool
tip will come up with the content of the title attribute.
| | 05:21 | This extra information could also be accessed by screen readers, however
it's not guaranteed that a screen reader user will hear this text.
| | 05:30 | They can change the settings in their screen reader
to have title attribute text read to them or not.
| | 05:35 | But in many screen readers, the default option is to have it not read out.
| | 05:40 | If a screen reader user encounters a link that they find confusing,
they can use a key combination to bring up the title attribute,
| | 05:47 | even if their default setting is to not read those attributes.
| | 05:51 | Even so the title attribute is not going to be read every time.
| | 05:55 | So make sure that you use it sparingly, write the clearest link text
that you can and make sure that any information that is truly essential
| | 06:03 | for understanding the page is on the page
as regular text for everyone to read.
| | Collapse this transcript |
| Opening new windows| 00:00 | >> Web designers can designate whether they want a link to
open in the same browser window that the user is currently in
| | 00:06 | or whether they want the link to open in a new window.
| | 00:08 | Setting links to open in new windows is common for
linked pages that are not part of the current site.
| | 00:14 | The idea is that by leaving your own site open before sending users
off to another site you will make it easier for them to get back
| | 00:20 | to your site when they've finished at the other one.
| | 00:23 | The problem with this is that the main way that
people get back to sites they were previously on,
| | 00:27 | the browsers back button, does not work in the new window.
| | 00:30 | Opening new browser windows from links within a webpage
is primarily a usability issue, as it affects all users,
| | 00:37 | but it does have accessibility implications as well.
| | 00:39 | New windows can be especially problematic for screen reader users, as
the screen reader may not tell them that a new window has been opened.
| | 00:47 | If the user then tries to use the keyboard command to go
back to the previous page, he or she will be unable to do so.
| | 00:53 | Unlike sighted users, they can't see they grayed
out back button or the new window in their task bar
| | 00:58 | for the additional clues that they're now in a new window.
| | 01:00 | This is another one of those areas unfortunately where
you may have to make a trade off between the business
| | 01:06 | or marketing concerns of the site and accessibility.
| | 01:08 | If you must open links in new windows, try to keep
it to a minimum and alert users to it beforehand.
| | 01:14 | If you're following along with the exercise files,
open the file index.html in Dreamweaver that's located
| | 01:21 | in the 05_07 folder of the chapter five exercise files.
| | 01:26 | Let's say that all of these links to new stories opened in new windows.
| | 01:29 | One way that we can tell users about this beforehand would be to simply
put a sentence stating that at the top of the news article listing.
| | 01:36 | Place your cursor at the end of the news heading and hit enter or return
to start a new line, then type in all stories open in a new window.
| | 01:50 | You could then style that text to make it a little smaller
and less obvious, but at least it would still be on the page.
| | 01:56 | Of course, a screen reader user who is
using their links list to navigate the page
| | 02:00 | and not reading all of the text would not be able to see this text.
| | 02:03 | If you could include the notice about the new window
within the link itself, that's even more helpful.
| | 02:09 | Scroll down the page in Dreamweaver.
| | 02:14 | Let's say that this link to outdoor water
restrictions opens in a new window.
| | 02:18 | We can simply place our cursor at the end of the link and
type in parenthesis and type link opens in new window.
| | 02:28 | This way, the notice of the new window is tied directly to the link and
will be included in the listing of links accessed by a screen reader.
| | 02:36 | It's possible to hide this text from the view of sited users
using the same off left positioning technique from earlier movies.
| | 02:43 | Highlight over the space before the parenthesis
text all the way to its end.
| | 02:51 | Then right click or control click on the
selection and select the quick tag editor option.
| | 02:57 | You can then wrap an additional tag around this text.
| | 03:01 | We'll have used the span tag since it's a generic element that
we can use whenever there isn't a better semantic element to use.
| | 03:08 | Type in span then hit enter or return.
| | 03:11 | When we now click in the area of the link
that contains the notice about the new window,
| | 03:16 | we can see in the tag selector that there is a span around this text.
| | 03:20 | Click on the span tag in the tag selector then go to the style menu in the
properties inspector below, choose off left from the list of classes shown.
| | 03:33 | Now click back in design view.
| | 03:35 | The diagonal lines that you see is Dreamweaver's
method of indicating margins.
| | 03:39 | Remember that our off left class assigns a very
large negative left margin to the chosen element.
| | 03:45 | Let's see how this looks in a browser.
| | 03:47 | Click on the globe icon in the document
tool bar and choose preview in Firefox.
| | 03:53 | Click yes to save the page.
| | 03:57 | Scroll down the page.
| | 03:58 | You can see that the outdoor water restrictions
link no longer has the parenthesis text showing.
| | 04:06 | It's still there to be used by screen reader users.
| | 04:09 | Ideally you'd keep this notice visual so that it could benefit sited users
as well, but this is another compromise technique that you could use,
| | 04:16 | so again, try to keep opening new windows to a
minimum so that the user can decide whether they want
| | 04:21 | to open a new window, tab or use the same window from before.
| | Collapse this transcript |
| Accessibility limitations of fly-out menus| 00:00 | >> A common type of navigation menu that we haven't yet created in this
chapter is the fly out menu, also called a drop down or rollout menu.
| | 00:07 | This is the menu where each of the items displays a submenu
of links when you hover over the item using your mouse.
| | 00:13 | They're popular because they allow you to add a lot of links to the
page without having to find spaces for all of them to show at all times
| | 00:20 | and they decrease the number of clicks it
takes to get to a page buried in the site.
| | 00:24 | Whatever the reason a fly out menu is chosen over a
traditional menu, they pose a number of accessibility problems.
| | 00:30 | This is another topic that overlaps heavily with usability,
so we'll focus just on the issues with fly out menus
| | 00:36 | that cause particular problems for people with disabilities.
| | 00:39 | One problem is that they require a lot of fine
motor control in order to operate them properly.
| | 00:44 | You have to move the mouse in just the right sequence and without shaking
in order to not accidentally mouse off the item and cause the submenu
| | 00:51 | to close or to trigger another item that you didn't want.
| | 00:54 | It's especially hard to use vertical fly out menus
where the menus appear to the right of each item.
| | 00:59 | Another problem is the huge number of links that are in fly out menus.
| | 01:03 | Screen readers and keyboard users will have
a huge amount of content to tab through.
| | 01:07 | Skipped navigation links can help them get past the fly out menu,
| | 01:10 | but what about when the user doesn't want to
skip it, but wants to get to an item in it.
| | 01:15 | If the item is near the end of the fly out menu they're going to
have a lot of tabbing to do before they can finally get to it.
| | 01:20 | It's also worth noting that the huge number
of links you're adding to each page with a fly
| | 01:24 | out menu will increase your page weight,
download times and bandwidth usage.
| | 01:29 | It can also negatively impact your search engine rankings by lowering
your keyword density and moving your main content further down the page.
| | 01:37 | Another accessibility problem with these menus is that the sub
menus may appear outside the visible range of the user's device.
| | 01:44 | This is especially true if the user has a very
narrow window or if they're using a screen magnifier
| | 01:50 | and they're only seeing a very small area of the screen at one time.
| | 01:53 | The sub menu may be completely overlooked or it may be seen, but the
user is not able to access it because in order to do so they'd need
| | 02:01 | to scroll horizontally and as soon as they do that they have to take
the mouse off of the top level item and the sub menu would vanish.
| | 02:08 | Finally, many menus are not designed to
work without a mouse, JavaScript, or CSS.
| | 02:14 | There are ways to make a fly out menu that
will work without a mouse, JavaScript or CSS,
| | 02:20 | but these menus are even more complicated
to produce than other fly out menus.
| | 02:24 | Again, this may be an area where you have to compromise some
degree of accessibility in order to meet other site requirements.
| | 02:31 | If that's the case, it's important to test any
menu system t5o make sure that it works at least
| | 02:36 | in these four basic scenarios for minimum accessibility.
| | 02:40 | The first scenario is using a mouse with JavaScript on.
| | 02:43 | This is basically what all fly out menus are designed
to work with, so you shouldn't have any problems here.
| | 02:49 | The second scenario is using a keyboard with JavaScript on, and
this scenario the user should be able to tab to each top level link
| | 02:56 | and that should show the submenu for that
link, which they can then tab through as well.
| | 03:01 | The third scenario is using a mouse with JavaScript off.
| | 03:04 | Here the user should either be able to click on top level links that
will take them to new pages with all the links of a sub menu shown.
| | 03:11 | Or the menu should be expanded by default to show all of the lengths.
| | 03:15 | The fourth scenario is using a keyboard with JavaScript off.
| | 03:18 | Here the user should be able to tab to the
top level links, but not the sub menu links.
| | 03:23 | This is because without JavaScript, the submenus
will not show then they tab to the top level links.
| | 03:29 | That means they'll be tabbing through invisible links
and will not know what they currently have selected.
| | 03:34 | Another option is for the menu to expand to show all of the links.
| | 03:38 | If you're following along with the exercise files,
open the page spry-menu.html in Firefox that's located
| | 03:46 | in the 08_08 folder of the chapter five exercise files.
| | 03:50 | This is a fly out menu created with Dreamweaver CS3s spry menu widget.
| | 03:55 | It creates all of the CSS and JavaScript for you.
| | 03:58 | Let's see how it holds up to our four scenarios.
| | 04:01 | The first was using a mouse with JavaScript
on and it of course works in this scenario.
| | 04:07 | The second was using a keyboard with JavaScript on.
| | 04:10 | So hit the tab key on your keyboard.
| | 04:12 | The first top level item in the list is highlighted.
| | 04:15 | Hit the tab key again.
| | 04:17 | Now none of the links are highlighted.
| | 04:19 | What has happened is that the focus of the tabbing has moved on to
the next link, which is the first item in the item one sub menu.
| | 04:27 | So we're able to select the links in the sub menus, but we
can't see what we have selected to know if it's what we want.
| | 04:33 | Hit tab three more times on your keyboard.
| | 04:36 | Finally on the last tab, we're back to item two being highlighted.
| | 04:41 | We had to tab through all of the invisible links in the first sub
menu before we could get on to the second top level item in the menu.
| | 04:48 | You can see how confusing and frustrating
this would be for a keyboard user.
| | 04:53 | So already the spry menu has failed.
| | 04:55 | Let's continue testing the next two scenarios.
| | 04:58 | The third was using a mouse and JavaScript off.
| | 05:01 | In Firefox, we can use the web developer
tool bar to turn off JavaScript temporarily.
| | 05:06 | Click on the disable button in the tool bar,
select disable JavaScript and then all JavaScript.
| | 05:15 | Now when we mouse over the items, you can
see that the sub menus do not display.
| | 05:19 | This is fine as long as each of the top level links
goes to a real page with all of the same links
| | 05:25 | that the sub menu would have contained on it for the user to choose from.
| | 05:28 | However, web designers often don't create
these pages and don't link the top level links
| | 05:33 | to anything, instead just using them to trigger the sub menus.
| | 05:37 | If that was the case here, again the menu would fail.
| | 05:41 | Finally with JavaScript still off, let's use the tab
key again to see if we can tab through the menus.
| | 05:46 | Hit tab on your keyboard.
| | 05:48 | Our focus last time was on item two in the menu, so it picks up from there.
| | 05:52 | We now have item three selected, but hit tab again.
| | 05:56 | Once again we've tabbed on to an invisible sub menu item.
| | 05:59 | The menu works exactly the same with JavaScript on or off and
is still just as inaccessible to keyboard users in either state.
| | 06:06 | So you can see that there are a number of serious
accessibility problems that fly out menus pose.
| | 06:11 | For times when you do have to use them, we looked at how
to test and evaluate a fly out menu to see if it works
| | 06:16 | in the base scenarios necessary for a minimum level of accessibility.
| | 06:21 | Since spry menus don't pass these tests, we'll need to turn to
another fly out menu system that is more accessible to more users.
| | Collapse this transcript |
| Creating an accessible fly-out menu| 00:00 | >> In the last movie ware saw how inaccessible fly out menus
and be but if you must use one pick one that at least work
| | 00:07 | in the four basic scenarios that we tested the spy menu in.
| | 00:10 | there are several pre made fly out system that you can purchase online.
| | 00:15 | One menu system that works well in the scenario that
we talked about are available www.eazymenu.co.uk.
| | 00:24 | Go to that site now in your browser.
| | 00:25 | The fly out menu is provided by easy menu are free to use on a personal
or nonprofit site if you link that to the easy menu site or donate,
| | 00:33 | otherwise you can buy a license to use the menu system.
| | 00:36 | On the easy menu page scroll down, at the bottom of the
page there are two links one says grab the source code
| | 00:45 | and the other says online menu builder
click on the online menu builder link.
| | 00:52 | A new window will open with an alert that the
menu builder is still in development click okay.
| | 00:58 | When the online menu builder loads it will have three panes.
| | 01:05 | One at the top offers you a live preview of your menu as you build it.
| | 01:08 | Hover over the links in the live preview to see how this menu will work.
| | 01:13 | (Pause is speaking)
| | 01:22 | >> In the left pane of the window are all of the items in the menu.
| | 01:25 | Click on option one in the left pane, when you do, this items
properties will be loaded in the right pane for you to edit.
| | 01:33 | Highlight over the text option one shown in
the field and delete it, then type in home.
| | 01:40 | In the URL field clear out the default characters shown
and type index.html then delete the default tool tip
| | 01:50 | and access key values, we don't need those in our menu.
| | 01:53 | We are going to make sure that our menu is useable
and understandable without tool tips or access keys.
| | 02:00 | Once you've made all the changes you want to for
this item, click on the update this item button.
| | 02:07 | You'll see the text change in the left pane as
well in the top pane showing the live preview.
| | 02:12 | Now click on option two in the left pane.
| | 02:14 | In the label field in the right pane delete
the default text and type resident.
| | 02:22 | In the URL field clear out the default text and type resident.html then
clear out the tool tip and access key values and click update this item.
| | 02:37 | If you want to add a sub menu to any of the
items, simply select it first in the left pane
| | 02:43 | and then in the right pane click on the
add sub menu button, the third one down.
| | 02:51 | A new menu item will be created underneath the original menu item.
| | 02:55 | With this new menu item selected clear out its
default label text in the right pane and type housing.
| | 03:04 | In the URL field enter housing.html clear
the tool tip and click update this item.
| | 03:16 | Let's add one more item under residents, click back on residents in the
left pane and then click on the add sub menu item on the right pane.
| | 03:29 | In the label field for the new menu item type parks and recreation
| | 03:35 | for the URL type parks.html delete the tool
tip default text and click update this item.
| | 03:46 | When you have made all the changes that you want to the menu
click on the get code link in the top right corner of the window.
| | 03:52 | You are taken to a new page that shows the HTML for your menu.
| | 04:00 | This page also contains a link to download the script.
| | 04:04 | Click on that link, you'll be taken to a new page where you will be
asked to fill in your email address, after you enter your email address
| | 04:11 | in the field shown and click go the JAVA script
that controls the email we emailed to you.
| | 04:16 | Click back on the tab that shows you HTML code, click
inside this box and click control A or command A
| | 04:23 | to select all the HTML then hit control C or command C to copy it.
| | 04:28 | Now open Dreamweaver, inside Dreamweaver
go to the file menu and select new.
| | 04:34 | In the new document dialog box click on the blank page option in the first
column then select HTML as the page type and then none for the layout.
| | 04:46 | In the doc type menu choose HTML 4.01 strict and then click create.
| | 04:53 | In the new document click on the code button in the document toolbar,
highlight over all of the HTML shown and then hit control V or command V
| | 05:06 | to paste in the HTML that you copied from the ease menu website.
| | 05:13 | If you scroll through the HTML you can see that the fly out menus
are made with a series of list, this is the correct semantic markup.
| | 05:22 | If you want to change any of the links you
don't need to use the online menu builder again.
| | 05:27 | You can simply edit the HTML of this page.
| | 05:30 | If you scroll up to the top of the code view you'll see a reference to
a script names CSSmenu.js this is the file that will be emailed to you.
| | 05:38 | It is already linked in the head of this
page so as long as you place the JS file
| | 05:43 | in the same directory where you saved this page it will work correctly.
| | 05:47 | If you save it in a different directory make
sure to update the path in this script tag.
| | 05:52 | Because of licensing restrictions we can't include
the easy menu files in your exercise files.
| | 05:57 | But once you've used the online menu builder
and had the JAVA script emailed to you,
| | 06:01 | you should have the same page that we are going to show you know.
| | 06:06 | Back in Firefox I have open the fly out menu that we created in the
online menu builder with the JAVA script that was emailed to me attached.
| | 06:15 | We already know that it works in the mouse JAVA script on
scenario so let's try the keyboard JAVA script on scenario.
| | 06:21 | Once you have received your own copy of the
script and have a working version of the menu,
| | 06:26 | load it in Firefox as well and click on your tab key on your keyboard.
| | 06:30 | The first link home is highlighted, hit tab again,
residents is highlighted and the two links that we added
| | 06:36 | under it housing and parks and recreation are shown.
| | 06:39 | Click tab again the focus moves to the first link underneath residents
so you can see that this menu is working correctly with the keyboard.
| | 06:48 | We're able to tab to all of the top level links and
see the sub menus as we tab through them as well.
| | 06:53 | Click off the menu to close the sub menu.
| | 06:56 | Now click on the disable button in your web developer toolbar.
| | 07:01 | Select disable JAVA script and then select all JAVA script.
| | 07:05 | Now try using your mouse on the menu.
| | 07:07 | None of the sub menus show but you can
click on the links to the top level pages.
| | 07:14 | Again in order for this to be accessible you need to make sure that you
link the top level links to real pages not just to a pound sign in order
| | 07:22 | to trigger a sub menu and the pages you link them to need to have links to
all the sub menu items written as plain text accessible links on the page.
| | 07:31 | What about with a keyboard, will the menu
continue to work when we tab with JAVA script off?
| | 07:37 | Go ahead and click the tab key to find out.
| | 07:39 | My mouse last passed over the resident's link so it
picks up from there and selects the option three link,
| | 07:45 | click tab again and the focus moves on to option four.
| | 07:49 | Remember in the spry menu that the focus disappeared
because it began tabbing through the invisible sub menus,
| | 07:55 | in this menu however when JAVA script is unavailable and the sub menus
can no longer be opened you can also no longer tab through the sub menus,
| | 08:03 | this is a far better scenario then having
to tab through invisible menu items.
| | 08:07 | Again though the only way that this can be accessible is if you link
the top level pages to real pages with all the sub menu links available
| | 08:15 | from there, so this menu passes in the four minimum scenarios
for accessible fly out menus, it uses a semantic list structure
| | 08:23 | that you can easily change and you can fully
customize the look of the menu using CSS.
| | 08:28 | There are other menu options available that you may want to look at
| | 08:32 | but hopefully this gives you an idea of
how a more accessible menu should operate.
| | Collapse this transcript |
|
|
6. Working with ImagesProper ALT text for navigation images| 00:00 | >> For those not yet familiar with web accessibility
the first thing they think of is alt tags on images.
| | 00:06 | There's actually no such thing as an alt tag but it's true that images
must be provided with alternative text and that failure to do so is one
| | 00:14 | of the biggest problems for screen reader users and
other people or devices that don't use images on the web.
| | 00:20 | Both the section 508 and WCAG guidelines specify that
text equivalents should be provided for every non text element.
| | 00:29 | The primary requirement that this is met is
through the alt attribute on the image element
| | 00:35 | but its not the only way as we'll talk about in this and later movies.
| | 00:41 | Also note that the standard is a text
equivalent not a description of the image.
| | 00:45 | The quality of the text you choose is just
as important as whether it's there or not.
| | 00:51 | We're going to look at a few different types of images and talk about
high quality text that would be appropriate for there alt attributes.
| | 00:59 | To practice adding alt text we are going
to work on the file government.html.
| | 01:03 | If you are following along with the exercise files, this page
is located in the folder 0601 of the chapter six exercise files.
| | 01:12 | The first image on this page is the logo image.
| | 01:16 | If we look down in the properties inspector and look
inside the alt field you will see that it is blank,
| | 01:21 | that means that it currently has no alt attributes set.
| | 01:24 | We need to give it alternative text so that screen reader users
and other who are not browsing images such as text browser users,
| | 01:32 | people who are on very slow dial up connections or small screen devices
such as cell phones and PDA's will be able to tell what the image is.
| | 01:41 | We don't want to describe to image its not important to
our users what the visual characteristics of the logo are.
| | 01:48 | We also don't want to say logo in the alt text.
| | 01:51 | That again is the description and it's not
important for our users to know that it's a logo,
| | 01:56 | rather they need to know the information that the information conveys.
| | 02:00 | The purpose for the is image is to identify the site as being
about or by the town of Wardscott so click inside the alt field
| | 02:07 | in the properties inspector and type town of Wardscott.
| | 02:13 | In general an image of text ought to have
the same text set for its alt attribute.
| | 02:18 | For example if you had graphic buttons being used for links you
would use the alt attribute services on the services button.
| | 02:26 | You wouldn't use the text services button
or services image for the alternative text
| | 02:31 | if you just use the same text that is shown on the face of the button.
| | 02:35 | Alt test is especially important when the image has a link surrounding it.
| | 02:40 | In these cases the alt text effectively
becomes the link text and as we talked
| | 02:45 | about earlier its very important for our
link text to be clear and meaningful.
| | 02:49 | Scroll down the government page in Dreamweaver.
| | 02:55 | There is a table at the bottom of the page with a number of DOC and
PDF icons that are met to link to public meeting minutes documents.
| | 03:04 | Each one of these images needs to have alt text
explains what the user will get by clicking on the icon.
| | 03:11 | So click on the first icon, go down to the properties inspector and click
inside the alt field, type word doc town council 5/31/08 meeting minutes.
| | 03:33 | So here for the alt text we used a description of where the link points to,
| | 03:43 | this is the general practice you should follow
for any images that are being used for navigation.
| | 03:50 | Now lets click on the first PDF icon then go down to
the properties inspector and click in the alt field.
| | 03:56 | Here we'll type PDF of town council 5/31/08 meeting minutes.
| | 04:10 | You would follow this process on through
the page for each one of these icons.
| | 04:16 | Again note that we haven't described what these images look like or
put the word image, icon, graphic, anything of that nature inside
| | 04:24 | of there alt text instead we've described what the purpose of the images.
| | 04:30 | So follow these guidelines for creating text equivalents
for your images whenever they convey information.
| | 04:36 | Sometimes though images are not conveying information rather they
are decorative, other times the image is conveying information
| | 04:44 | but that information is given elsewhere on the page.
| | 04:48 | In these situations it can be harmful to
accessibility to put text in the alt attribute.
| | 04:54 | We'll talk about that next.
| | Collapse this transcript |
| Proper ALT text for decorative images| 00:00 | >> In the last movie we talked about how important it is to use alt
text that conveys the purpose of information than an image is providing.
| | 00:09 | But there are some times when it can actually
harm accessibility to add alt text to our images.
| | 00:15 | Note that the section 508 with WCAG
guidelines just require a text equivalent,
| | 00:20 | that text equivalent doesn't have to be inside the image itself.
| | 00:23 | The point is to make sure that screen reader
users get all of the information sighted users do.
| | 00:29 | So if the information the image conveys is also conveyed
in the test else where on the page you met the requirement.
| | 00:36 | If you were to repeat the equivalent in an alt attribute
the screen reader user would have to hear it twice
| | 00:43 | which is unnecessary and would probably be very frustrating.
| | 00:47 | Let's look at an example.
| | 00:48 | If you are following along with the exercise
files open residents.html in Dreamweaver,
| | 00:54 | it is located in the 0602 folder of the chapter six exercise files.
| | 01:00 | Scroll down the page to see the entire image,
underneath the image is written the caption.
| | 01:07 | This is simply a regular paragraph element but note
that it's providing information about the image.
| | 01:13 | In this case the text equivalent is provided in this paragraph.
| | 01:17 | There is no need for us to repeat it inside the alt attribute image itself.
| | 01:23 | But the screen reader still needs to be told that the
image already has a text equivalent else where on the page.
| | 01:29 | This is done by including the alt attribute
on the image but leaving it value blank.
| | 01:34 | The screen read has nothing to read so it just
skips over the image which is exactly what we want.
| | 01:41 | Click on the photograph, you'll see on the alt field of
the properties inspector that no value is currently set,
| | 01:47 | that doesn't mean that the alt attribute has been set to empty as we want.
| | 01:52 | Where there is no content inside the properties inspector in Dreamweaver
it means that the alt attribute is missing from the image tag all together.
| | 02:02 | So click on the arrow in the alt field and choose the option empty.
| | 02:10 | When we choose this option Dreamweaver adds the alt
attribute to the image that keeps it value empty.
| | 02:17 | Let's see this by going into the code view.
| | 02:20 | Click on the code button in the document toolbar, the alt
attribute is now in the image tag but there is not content
| | 02:27 | between the quotation marks, this is exactly what we want to happen.
| | 02:31 | Another scenario where you would want screen readers to
skip over an image is if the image was purely decorative.
| | 02:38 | In those cases it is really just there for the sake of sighted users and
there is no text equivalent that you'd want a screen reader user to hear.
| | 02:46 | So we would again use an empty alt attribute.
| | 02:49 | Open the page index.html from the same exercise files folder.
| | 02:54 | We're going to add a decorative image to this page.
| | 02:58 | In design view place your cursor at the start of the first
paragraph of text, then go to the insert menu and choose image.
| | 03:07 | In the select image source dialog box browse for the location of
the exercise files on your computer, go to the chapter six folder
| | 03:17 | and then the 0602 folder and then the images folder
and chose the image named carnival.jpeg, click OK.
| | 03:27 | The image tag accessibility attributes dialog box appears.
| | 03:31 | This dialog box comes up because earlier we set our Dreamweaver preferences
to prompt us for accessibility on images, frames, media and forms.
| | 03:42 | If we had the images accessibility preference
unchecked we wouldn't see this field.
| | 03:47 | We could still add alt text to all of our images of course but this
serves for a good reminder to do so ever time we enter a new image.
| | 03:56 | We want the alt attribute to be blank so click on the
arrow in the alternate text menu and choose empty.
| | 04:03 | Don't worry about the long description field for right
now, we will cover that in a later movie, click OK.
| | 04:12 | The image is now added to the page, you can see in the properties
inspector page that the alt attribute has been set to empty.
| | 04:19 | Using empty alt attributes is especially important in old table based pages
| | 04:24 | because they frequently us spacer GIFs
or other images for formatting purposes.
| | 04:29 | You would give these images empty alt attributes,
never spacer images or anything along those lines.
| | 04:35 | Other examples of decorative images would include
images used for bullets or dividing lines.
| | 04:41 | This points to another advantage of CSS layouts, most of the decorative
images are kept in the style sheet so there's no needs to worry
| | 04:48 | about setting empty alt attributes on them,
but for all of the images you have in HTML
| | 04:54 | of the page an alt attribute should always be present on the tag.
| | 04:59 | The content of that alt attribute will depend on whether that
image is content, navigation or decoration and whether the content
| | 05:07 | of the image is conveyed in text elsewhere on the page.
| | 05:11 | If you have many old pages that you need to add alt text to
our next movie will go over so ways to speed up that process.
| | Collapse this transcript |
| Adding ALT text to an existing site| 00:00 | >> If you have sites you maintain that never have attributes added to
the images you may have a lot of work ahead of you since we've seen
| | 00:08 | that alt text really need to be tailored to each individual image
there is no way you can automate adding it to existing pages
| | 00:15 | but there are some tricks you can do in Dreamweaver
using find and replace that can speed it up quiet a bit.
| | 00:21 | If you're following along in the exercise files, open
oldpage.html from he 0603 folder of the chapter six exercise files.
| | 00:31 | This page imitates the home page of the site we have been working on
but it uses table base markup and spacer GIFs to create the formatting.
| | 00:39 | Go to the edit menu and choose find and replace.
| | 00:44 | In this example we will only be finding the text in the current page but
if you are trying to change the alt text throughout a site you will click
| | 00:53 | on the find in menu and choose entire current local site.
| | 00:58 | Again in this example keep it set on current document.
| | 01:02 | Next in search menu choose specific tag.
| | 01:06 | The fields in the dialog box change as soon as you select this option.
| | 01:10 | There is now a select menu next to the
specific tag option that we just chose.
| | 01:15 | Click on that menu, scroll down and chose the IMG element.
| | 01:22 | This will search for images but we but want to find
every image only images without alt attributes.
| | 01:30 | So in the menu under the specific tag option
click on the arrow and choose without attribute,
| | 01:36 | in the menu beside that click on the arrow and choose alt.
| | 01:42 | So now we are looking for images without alt attributes.
| | 01:46 | Again though we can't use the same alt text
for every image without an alt attribute,
| | 01:51 | so let's first look for all the spacer GIFs
and set all of there alt attributes to empty.
| | 01:56 | Although we know we're looking for the image spacer.gif we don't
know what the patch of the image will be on any page in our site.
| | 02:04 | Sometimes the path could be just spacer.gif
other times it could be images-spacer.gif or ..
| | 02:10 | /images/spacer.gif.
| | 02:14 | We need a way to find every source attribute that ends in spacer.gif.
| | 02:19 | So the solution is to use a regular expression.
| | 02:23 | This is a set of special characters that
let you find patterns within the test.
| | 02:27 | Click on the use regular expression at the bottom of the dialog box then
go back up and click on the plus button and then select the adjacent menu,
| | 02:38 | scroll down and select SRC for source, leave the equal option set and
then in the final box is where we'll need to type our regular expression
| | 02:49 | to find all of the spacer GIFs no matter what the path to them is.
| | 02:53 | In regular expressions a period stands for a single
character such as a letter, number or punctuation mark.
| | 03:00 | An asterisk means find the preceding character zero or more times.
| | 03:06 | So if we combine a period and an asterisk it
basically means match any character zero or more times.
| | 03:13 | By themselves these two characters would match
everything but if we add the name of the file
| | 03:18 | on the end spacer.gif the search will
yield every path that leads to that file.
| | 03:24 | So in this box type a period and an asterisk then spacer.gif.
| | 03:33 | Finally we need to tell Dreamweaver what
to do when it finds every spacer.gif.
| | 03:38 | Choose set attribute from the action menu.
| | 03:40 | In the adjacent menu click on the arrow and choose alt, leave the
final two fields blank so that the attribute will be kept empty
| | 03:50 | to denote it's an image that doesn't convey
any information and should be skipped over.
| | 03:55 | Now we can click on the replace all button.
| | 03:58 | The results panel shows all of the images that were affected.
| | 04:04 | You can see each one of them now has an
at attribute set with no content in it.
| | 04:09 | But we don't have to use this method just to find decorative images.
| | 04:13 | You can use the find and replace dialog box with
regular expressions to find all the instances
| | 04:19 | of the logo throughout the sight and to set its alt text correctly.
| | 04:24 | Open the edit menu again and choose find and replace, leave current
document selected and in the search menu choose specific tag.
| | 04:34 | The same values that we just used are retained.
| | 04:38 | This time we are going to be looking for all of the logo images so in the
field where dot asterisk spacer.gif is replace just the spacer.gif part
| | 04:48 | with logo.gif again this will find all of the logo images
throughout the site no matter what the path is to get to them.
| | 04:57 | This time we don't want the alt attribute to be blank so in
the two menu type town of Wardscott then click replace all.
| | 05:12 | Since we only searched in this document only one image was replaced but you
can see in the results panel that it now has the alt text correctly set.
| | 05:22 | If you are going to be reusing this search on multiple
sites it would be a good idea to save your settings.
| | 05:28 | Open up the edit menu and click on find and replace.
| | 05:32 | In the search menu choose specific tag.
| | 05:35 | All of our settings are still retained, if we wanted to save them to use
again later we should click on the floppy disc icon to save the quarry.
| | 05:46 | The file folder icon folder beside it allows
us to load a quarry that we already saved.
| | 05:51 | So although adding alt attributes to an
old site is going to require some time
| | 05:57 | and work you can speed it up considerable
using Dreamweaver find and replace.
| | 06:03 | Next we'll look at another type of alt text, this time for image maps.
| | Collapse this transcript |
| Adding ALT text to image maps| 00:01 | >> Another type of image that is common on older pages is the image map
where multiple pieces of the same image are linked to different locations.
| | 00:09 | Image maps need alt text to but it's handled
a little differently than on regular images.
| | 00:15 | If you are following along with the exercise
files open imagemap.html in Dreamweaver,
| | 00:21 | it is located in the 0604 folder of the chapter six exercise files.
| | 00:26 | This is the same table based version of the
home page that we worked on in the last movie.
| | 00:32 | However in this move the navbar is not made up of individual
images but of one single images with multiple areas linked.
| | 00:41 | It's important for this image to have alt text
because it is conveying a lot of important information
| | 00:46 | but we can't give it an alt value of the
location of all of the links it contains.
| | 00:52 | Instead we would want alt text on each of the individual
areas of the image map so click on the navimage
| | 01:00 | and in the properties inspector click on the alt menu and select empty.
| | 01:05 | Now the navimage will be skipped over but we are going
to set alt text on the linked area within it instead.
| | 01:13 | Click on the first of those linked areas over the
text residents, the properties inspector changes
| | 01:19 | to show you where this area of the image map is linking to.
| | 01:22 | There is also a field for alt it is empty meaning
this area currently does not have any text set on it.
| | 01:30 | Click inside the alt field and type residents, note
that we haven't added any alt text to an image.
| | 01:37 | If we look in the text selector the tag that we are
currently editing is the area tag inside the map tag.
| | 01:45 | So its not just image elements that need alt
text but also area elements within image maps.
| | 01:52 | If you needed to add alt text to image maps throughout a site you
could again use Dreamweaver's find and replace to speed up the process.
| | 02:00 | Go to the edit menu in Dreamweaver and click on find and replace, leave
current document selected for the fine in option but if you were doing this
| | 02:13 | on a real site you would click on this
menu and choose entire current local site.
| | 02:19 | In the search menu choose specific tag, the values from the last
time we used the find and replace dialog box are still saved for us.
| | 02:30 | But this time we are going to have to make some changes.
| | 02:33 | The tag we are looking for this time is not the IMG tag it's the area tag.
| | 02:38 | So click on the arrow of the menu scroll up to the top of the list
and select area, we are still looking for tags without alt attributes
| | 02:51 | so the next set of menus should still say without attribute in alt.
| | 02:55 | in the next menu leave with attributes selected but we need to change
the source value that is currently selected in the adjacent menu.
| | 03:05 | Areas do not have SRC attributes instead they
have ATRIF attributes to point to there links,
| | 03:11 | so click on the arrow of that menu and select ATRIF from the list.
| | 03:16 | Next to the equals menu leave the period and asterisks in place.
| | 03:23 | As before we want to find this tag no matter what the path to its link is.
| | 03:28 | So just highlight over the portion of the text that says logo.gif
and type residents.html now this will look for any area tag
| | 03:39 | without an alt attribute that is linking to the file residents.html.
| | 03:44 | For action we need to keep the set attribute option selected in the
first menu, in the next menu also keep the alt attribute option selected.
| | 03:54 | In the final menu next to the word two we need to type
in the new text we want for each of these are tags.
| | 04:01 | Highlight over the existing text and type residents.
| | 04:07 | Make sure use regular expression is still checked.
| | 04:11 | Now click on replace all.
| | 04:13 | We will get zero results because we have already added
the alt text to the resident's area of this image map.
| | 04:20 | That lets us know that our search was functioning correctly.
| | 04:23 | It didn't match this area tag because it didn't
meet the requirement of have no alt attribute.
| | 04:29 | Let's try it with one more area tag, click on the business
area of the navimage in the design view of Dreamweaver.
| | 04:37 | You will see that it is linking to a file named business.html
| | 04:41 | and that it currently doesn't have an alt value
set, if we look in the properties inspector.
| | 04:46 | Go to the edit menu and select find and replace, leave current
document selected for find in and for search choose specific tag,
| | 04:56 | the only values that we need to change here is the ATRIF value that we
were trying to match against as well as the alt text we want to set.
| | 05:04 | So beside the equal menu highlight over just
the text that says residents and type business
| | 05:14 | so that now the full text of this field is period, asterisks business.html.
| | 05:20 | In the field below labeled two highlight
over the existing text and type business.
| | 05:31 | Now click replace all.
| | 05:33 | This time we did get a match because the business
are of this image map did not yet have alt text set.
| | 05:40 | We can see in the results panel that it does now.
| | 05:44 | So when dealing with image maps make sure that you do set an empty alt
attribute on the main image so that the screen reader will skip over it
| | 05:52 | but set meaningful alt attributes on each
of the are tags within the image map.
| | Collapse this transcript |
| Describing complex graphics| 00:00 | >> Sometimes the amount of information that an image conveys
is huge, much more then is useful in an alt attribute.
| | 00:07 | While there is no limit on the amount of characters you can
place is an alt attribute they are usually kept very short
| | 00:13 | so that screen users are not burdened by a tone of text
as well as users of small screen devices with images off.
| | 00:21 | Its not a good idea to place all of the data that a
chart, graph or diagram is conveying in an alt attribute.
| | 00:28 | Instead you can use the long desk attribute, this attribute contains
a URL to another page with a longer text equivalent of the image.
| | 00:37 | Let's look at an example of this that has
been added to the government.html page.
| | 00:42 | If you're following along with the exercise files it's
saved in the 0605 folder of chapter six exercise files.
| | 00:51 | Scroll down the page in the design view, we have a
large pie chart showing a lot of data on this page.
| | 00:58 | This is important information but it wouldn't
make much sense to put it all in an alt attribute.
| | 01:05 | Instead create a separate simpler page
with all of the data in it in a text form.
| | 01:11 | In the exercise files this page is named
budgetdescription.htm, open that in Dreamweaver now.
| | 01:18 | This page simply has the same data in a list.
| | 01:21 | There is a heading to the list identifying what the data
is and then after the data there is a link to go back
| | 01:28 | to the previous page, in this case the government page.
| | 01:32 | Scroll back up in design view.
| | 01:35 | You'll notice that this page does not have a navigation bar on it.
| | 01:38 | All it has is the logo, the data and the footer information.
| | 01:43 | This page should be simple so that a screen reader can go to it and
immediately get the data from the image that they couldn't read.
| | 01:51 | So how do connect that complex graphic with this simple page?
| | 01:55 | Go back to government.html, click on the pie chart graphic, we need
to add an alt attribute and a long desk attribute to this image.
| | 02:05 | In the properties inspector click in the alt field, we'll use the alt text
to alert a screen reader user that there is a longer description available,
| | 02:15 | type in this field chart of budget then in parenthesis type click for data.
| | 02:27 | Now we need to add the long desk attribute so that a
screen reader user can actually click on this image
| | 02:33 | and go to the description open the tag inspector panel.
| | 02:37 | If the general listing is open click on the dash next to it to
close it, then make sure that the CSS/accessibility list is open.
| | 02:48 | Click in the field beside the long desk label.
| | 02:51 | You will see two icons appear to the right of this field,
| | 02:54 | one to point to another file in your sight and
another to browse to another file in your site.
| | 03:01 | Let's click on the file folder icon to browse to another icon in the site.
| | 03:06 | The value of the long desk field should always be a page but
for some reason Dreamweaver wants you to insert an image.
| | 03:13 | Just ignore that it calls the dialog box that opens select image source.
| | 03:18 | Browse to where you have the exercise files saved on your computer
and go to the chapter six folder within the exercise files.
| | 03:25 | Then go to the 06_05 folder.
| | 03:30 | Because Dreamweaver thinks you are looking for an
image it has files of type pre filled with image files
| | 03:36 | and will not show you any HTML pages that you can choose.
| | 03:40 | So click on the files of type menu and choose all files.
| | 03:46 | Now the page budget description will show for you to select, click OK.
| | 03:51 | A link to the budget description file
is now basically embedded in the image.
| | 03:58 | A screen reader can then announce that link to its users and they
have the option of following it to hear the full description.
| | 04:05 | As with the title attribute it is not guaranteed that a
screen reader user will hear this announcement depending
| | 04:12 | on their own settings and they type of screen reader they are using.
| | 04:16 | Because of this it is best if you can add a real text link in the
page that screen readers can follow to see the full description.
| | 04:24 | This can also be useful to others such as people who would have a hard
time processing this graphic but could deal more easily with text.
| | 04:33 | They would also be able to enlarge the text if they were having trouble
reading the data in the graphic, so scroll down the page in design view.
| | 04:40 | At the end of the description there is a
paragraph of text that shows beneath the image,
| | 04:46 | click at the end of that paragraph and type view chart data as text.
| | 04:56 | Then select this text and go down to the link box in the
properties inspector, click the folder icon beside the field,
| | 05:05 | browse to the exercise files folder on your
computer and the chapter six folder within it.
| | 05:10 | Then go to the 0605 chapter and select
the budget description page then click OK.
| | 05:19 | Now screen reader users have two ways to get to that page,
through the long desk attribute or through the regular text link
| | 05:26 | and other users can also benefit from
the plain text description if the date.
| | Collapse this transcript |
|
|
7. Working with TablesUsing tables for data| 00:00 | >> Earlier we talked about why we shouldn't use tables for layout,
but instead use a layout created with DIVs and controlled by CSS.
| | 00:08 | However, that doesn't mean that we should never use tables at all.
| | 00:11 | They're the appropriate semantic element to use
anytime we have data that we need to present.
| | 00:16 | If we didn't use tables to markup data, we would
actually be decreasing the accessibility of our pages.
| | 00:22 | Data that has a two way relationship can be considered tabular data.
| | 00:27 | This means that if you place the data in a grid, each block would be
related to the blocks above and below it, as well as to each side of it.
| | 00:34 | By using this proper structure of a table, you can make
these relationships between pieces of information clear,
| | 00:40 | not just to sighted users, but to screen reader users as well.
| | 00:44 | If you're following along with the exercise
files, we have residents.html open in Dreamweaver.
| | 00:50 | It's located in the 07_01 folder of the chapter seven exercise files.
| | 00:55 | This is the same resident's page we were working on before.
| | 00:59 | But if we scroll down the page in design view, you'll see
that a table has now been added to the bottom of the page.
| | 01:05 | In Dreamweaver, the table cells are denoted with a dotted line.
| | 01:09 | This data is perfect for a table because it has
the two way relationship that we talked about.
| | 01:14 | All of the number values are related to each other.
| | 01:16 | By themselves, they could be considered a list of rainfall amounts.
| | 01:21 | The items in the first row of the table would also make up a list by
themselves of months, so the pieces of data are related across the rows.
| | 01:30 | But there's also relationships up and
down between the month and the number.
| | 01:35 | So even with this very simple example, you can see
how a table connects related pieces of information.
| | 01:41 | If we instead used a DIV for each of these table cells and then
floated each DIV to the left in order to make rows like we see here,
| | 01:49 | we might get the same visual appearance, but we wouldn't
have the connections in HTML that a table structure gives us.
| | 01:56 | When the table is built properly in HTML, a screen reader
can read off a heading cell before the data that it labels.
| | 02:03 | Sighted users have the ability to track across a
row or a column in the table to line up the values
| | 02:09 | and see visually what pieces of information are related to each other.
| | 02:13 | But a screen reader user does not have this ability unless
that information is in the HTML so that it can be announced.
| | 02:20 | Let's quickly look at the code for this table to
get a sense of how these connections are made.
| | 02:25 | Click inside the January cell then click on
the code button on the document tool bar.
| | 02:29 | You can see that we are not using standard
TD tags here, but instead TH tags.
| | 02:35 | We also have a scope attribute with a value of call.
| | 02:39 | There's also a caption element inside the table.
| | 02:43 | If we scroll down to see the second row of the
table, we'll see the more familiar TD tags.
| | 02:49 | So the changes that you need to make to your HTML are not
major, but in the next movie we'll talk about what each
| | 02:54 | of these pieces means and how you can add them to your tables.
| | Collapse this transcript |
| Creating header cells| 00:00 | >> In an earlier movie we looked at a page that
listed the values from a pie chart in text form.
| | 00:05 | If you are following along with the exercise file the
page is named budget-description.html and is located
| | 00:12 | in the 0702 folder of the chapter seven exercise files.
| | 00:17 | Currently the data is set in a list but it
would be better to mark it up as a table.
| | 00:22 | In design view place your cursor at the end of the text
2008 and press enter or return to start a new line,
| | 00:30 | then go to the insert menu, choose table, the table dialog box opens.
| | 00:37 | We need 11 rows in our table so type 11 into the rows field and type two
in the columns field, leave the table width blank and delete any value
| | 00:48 | that is shown in the border thickness, cell padding,
or cell spacing fields.
| | 00:52 | These are presentational attributes on the table
so we don't want to set them here but in CSS.
| | 00:58 | Next in the dialog box are a series of four
images labeled none, left, top and both.
| | 01:06 | This is referring to where you and table cells
to appear in the table you are about to insert.
| | 01:12 | We're going to put header cells at the
top of the table so click the top image.
| | 01:17 | Don't worry about the options listed under
the accessibility heading for now.
| | 01:21 | In this movie we are focusing on header cells so click OK.
| | 01:25 | An empty table is added to the page scroll down so you can see all of it.
| | 01:34 | Scroll back up we need to enter text for our header cells.
| | 01:38 | Click the first cell of the first row and column, type area of budget.
| | 01:46 | Then click in the second cell of the first row and type percentage.
| | 01:52 | You may notice that this text that we entered is bold, this is simply the
default style of heading cells we will talk about how to change them later.
| | 02:01 | In order to give us more room to see the table go down to the properties
inspector and click the arrow next to its label to collapse the panel.
| | 02:08 | Now we're simply going to drag the data out of the list and into our table.
| | 02:13 | Highlight over transportation then click on the highlighted
text and drag it into the second row for cell then highlight
| | 02:21 | for over 20 percent and drag it into the second cell in the second row.
| | 02:28 | Repeat this with the police data in the third row.
| | 02:33 | Delete the unused list items by highlighting over them and
hitting backspace, continue to highlight and drag the data
| | 02:41 | into the table and to delete list items as they become empty.
| | 02:49 | All of the data is now in our table.
| | 02:57 | Let's examine the code to see the pieces that make this a semantic table.
| | 03:02 | Click on the code button in the document toolbar.
| | 03:05 | Scroll up to where the start of the table code begins on line
27, after the opening table tag we have a TR tag for table row.
| | 03:15 | Inside the table row tag are two TH tags both
of them have a scope attribute set to call.
| | 03:21 | TH stands for table header, it's simply another type of cell just
like TD, but it denotes that it is heading other data in the table.
| | 03:29 | The scope attributes specifies what it is heading.
| | 03:32 | A value of COL means that it is heading the column and a value
of row would mean it was heading all the cells in its same row.
| | 03:41 | The other options for scope values are call group and row group,
if you had a cell that was part of a row span or COL span.
| | 03:48 | That is all there really is to creating data table relationships.
| | 03:52 | The HTML required isn't a lot but it can
make a big difference to screen reader users.
| | 03:57 | Next we'll talk about some other table
accessibilities features, captions and summaries.
| | Collapse this transcript |
| Adding table captions and summaries| 00:00 | >> We've seen how TH elements, table header cells, can tie
related pieces of related information in a table together.
| | 00:08 | Now let's look at the caption element and summary attribute of tables.
| | 00:12 | If you're following along with the exercise
files, open government.html in Dreamweaver.
| | 00:19 | It's located in the 07_03 folder of the chapter seven exercise files.
| | 00:24 | This page has not been changed from when we last worked on it.
| | 00:28 | You may remember that there was a table
of meeting minutes downloads on this page.
| | 00:33 | Scroll down in design view.
| | 00:34 | You'll see a table of four rows, but notice that there's
no row at the top of the table with table header cells.
| | 00:44 | Let's insert a new table with better structure into the page and
paste our data our of this old table into the new, improved one.
| | 00:52 | Click at the end of the paragraph preceding the
table and hit enter or return to start a new line.
| | 00:58 | Then go to the insert menu in Dreamweaver and click on table.
| | 01:03 | In the table dialogue box, enter 5 for the number of rows.
| | 01:08 | For the number of columns, enter 4.
| | 01:12 | Leave the table width, border thickness,
cell padding and cell spacing fields blank.
| | 01:18 | For the header option, choose the both image.
| | 01:21 | This will set TH cells on both the columns and rows of our table.
| | 01:27 | Under accessibility, click inside the caption field.
| | 01:31 | The caption is used to provide a brief description of your table.
| | 01:34 | It's basically its title or label.
| | 01:37 | In this field, type recent meeting minutes.
| | 01:43 | Don't select anything for the line caption option.
| | 01:46 | Again, this is a formatting issue that is better controlled in CSS.
| | 01:52 | Click inside the summary field.
| | 01:54 | A table summary can be used to provide even
more information than would fit in a caption.
| | 01:59 | There's no limit to the length of a caption, but you just want
it to be a brief, clear description of what the table is about.
| | 02:07 | If you think a more extended explanation of your table would be useful
to screen reader users, the summary attribute is where you can add that.
| | 02:16 | The icons in this table might make it a little bit confusing.
| | 02:19 | Having icons in a table to click and download
documents might be a little bit confusing
| | 02:24 | for screen reader users, so we will write a summary for this table.
| | 02:30 | Simply type a longer explanation of the purpose of the table.
| | 02:34 | ( Typing )
| | 03:05 | >> I've typed this table provides the minutes from the last four public
meetings to download in Microsoft Word DOC and Acrobat PDF formats.
| | 03:14 | Now click okay in the table dialogue box.
| | 03:18 | The empty table is added to the page with its caption above it.
| | 03:21 | If we scroll down you can see that the
summary is not displaying on the page.
| | 03:27 | It's not used by visual browsers, but it's there in the code if
the screen reader or other device wants to take advantage of it.
| | 03:35 | Now let's type our headings into the first row of the empty table.
| | 03:39 | Click inside the first cell of the first row type the text type of meeting.
| | 03:48 | Click inside the second cell and type date.
| | 03:53 | Then the third cell and type Microsoft Word.
| | 04:00 | Then the fourth cell, type acrobat PDF.
| | 04:13 | Now let's drag each of the meeting descriptions out
of their cells and into the type of meeting column.
| | 04:18 | Highlight over town council then click on the highlighted
text and drag it up into the first cell of the second row.
| | 04:27 | You'll see that it, too, is bold.
| | 04:29 | That's because we specified that we wanted headings
not only on the columns, but also on the rows.
| | 04:35 | The name of each meeting is really acting as a
label for the cells further along in the row,
| | 04:41 | so that's why we've chosen to make these cells headings as well.
| | 04:45 | Next highlight over zoning department in the old table, click
on it and drag it up to the first cell in the third row.
| | 04:54 | Then highlight over and drag town of Wardscott
public schools into the first cell of the fourth row.
| | 05:01 | And finally, highlight over town council in the old table and
drag it up into the first cell of the last row of the new table.
| | 05:09 | For the remaining cells, we can copy them into the new
table more quickly by clicking in the first date cell
| | 05:17 | and without releasing the mouse dragging
diagonally down to the last PDF cell.
| | 05:23 | This highlights all 12 of the remaining cells with the thick black border.
| | 05:28 | You can now release your mouse and hit control C or
command C on the keyboard to copy the block of cells.
| | 05:34 | Now you need to highlight over the same cells in the new table.
| | 05:38 | Click in the cell beneath the date header cell.
| | 05:41 | Keeping the mouse button pressed, drag diagonally
down towards the last cell in the table.
| | 05:48 | When the block of these 12 cells is highlighted with a thick
black border, you can release your mouse and now hit control V
| | 05:55 | or command V on the keyboard to paste in the old cells.
| | 06:01 | Now we can delete the old table.
| | 06:03 | Simply highlight over it and hit backspace or delete.
| | 06:07 | There's one more accessibility enhancement
we may want to make to this table.
| | 06:12 | Table heading cells can have the ABBR attribute added to them.
| | 06:16 | This stands for abbreviation and it provides
alternate text for the heading cells.
| | 06:22 | Usually that alternate text is shortened text.
| | 06:26 | The ABBR attribute is most useful in very large tables.
| | 06:30 | A screen reader may read out the content of a heading cell before
it reads out the content of the data cell that it is currently in.
| | 06:39 | So for instance, in this table, if the screen reader was in the cell
5/23/08 it might read date, town of Wardscott public schools, 5/23/08.
| | 06:50 | This can be very helpful, but it can also be
frustrating in a very large table if the text
| | 06:57 | of the heading cells is very long and
has to be repeated over and over again.
| | 07:02 | In these cases you would use the ABBR
attribute on the long table heading cell text.
| | 07:09 | The full text of the heading cell would still be read when the table
was first encountered, but when the heading is read out before the data
| | 07:16 | of individual cells, the abbreviated form would be used instead.
| | 07:21 | So click inside the type of meeting cell.
| | 07:24 | To select the entire cell go down to the tag selector at
the bottom of the document window and click on the TH tag.
| | 07:32 | Right click or control click on the TH tag listed
in the tag selector and select quick tag editor.
| | 07:40 | The full HTML of the currently selected tag is shown.
| | 07:44 | Place your cursor before its closing bracket and type a
space and immediately a menu of possible attributes appears.
| | 07:52 | The ABBR attribute is the first in the list.
| | 07:55 | Double click it and it is added to the cell.
| | 07:58 | For the value in between the quotation marks, type the word type.
| | 08:04 | Hit enter or return to accept the changes to the cell.
| | 08:08 | So what we've done here is set a shortened
version of this heading cell text.
| | 08:13 | Type of meeting would be read out when the table is first encountered,
| | 08:18 | while the abbreviation that we entered would
be all that was read before individual cells.
| | 08:24 | You don't have to use the ABBR attribute just for shortened text, however,
there may be times where you would want to use it to provide longer text
| | 08:32 | because that would be more understandable to screen reader users.
| | 08:35 | For instance, if you had a table with math symbols as headings, you
could use the ABBR attribute to type out the word that corresponds
| | 08:45 | with that symbol to make sure that the screen reader will read the
correct text even if it doesn't know what that specific symbol is.
| | 08:54 | So now we've looked at many of the HTML elements and
attributes that can make a table more accessible.
| | 09:00 | Next we'll talk about how to style tables so that you can use the
correct semantic markup, but keep it consistent with your design.
| | Collapse this transcript |
| Styling tables| 00:01 | >> We've seen how to create the structure of
data tables, now let's start styling them.
| | 00:06 | If you're following along with the exercise
files we're working on the page government.html,
| | 00:12 | which is in the 07_04 folder of the chapter seven exercise files.
| | 00:17 | Open the page in Dreamweaver and then click on
the new CSS rule button in the CSS styles panel.
| | 00:25 | Click on tag for the selector type.
| | 00:28 | In the tag menu, click on the arrow to bring up a
list of possible tags, scroll down to select table.
| | 00:41 | For the define in option, leave the selection in styles.css.
| | 00:47 | Previously we had been defining styles in the head of the
document, but once we created multiple pages on the site,
| | 00:54 | it made sense to move the styles into an external style sheet
that could be referenced by multiple pages throughout the site.
| | 01:01 | We're going to add our table styles to the central
style sheet so that all of the pages can share them.
| | 01:08 | Click okay.
| | 01:10 | Click on the box category in the CSS rule definition dialogue box.
| | 01:16 | Uncheck the same for all box under margin then place your
cursor in the bottom field under margin and type 1.3.
| | 01:26 | In the adjacent menu, choose M's as the unit of measurement.
| | 01:30 | The other property that we want to add to the table is actually not
available within the CSS rule definition dialogue box, so click okay.
| | 01:39 | Our new table rule is added and can be seen in the CSS rules panel.
| | 01:45 | Click on the add property link and type border-collapse.
| | 01:51 | In the adjacent property field type collapse as the value as well.
| | 01:59 | Hit enter or return to accept the property.
| | 02:02 | The border collapse property is only used on the table element.
| | 02:05 | What it does is get rid of the default gaps between table cells.
| | 02:10 | It also enables adjacent borders to be merged into each other.
| | 02:14 | For instance if you had two cells in a table and both of them had borders
set on all four sides, the borders would be doubled up in between them.
| | 02:24 | Setting the border collapse property to a
value of collapse keeps this from happening.
| | 02:31 | Next let's add a rule for the caption element.
| | 02:33 | Click on the new CSS rule button at the bottom of the CSS
styles panel, leave advanced selected for the selector type.
| | 02:42 | In the selector field delete the default text
that Dreamweaver has added and type TD, TH.
| | 02:52 | This is another group style.
| | 02:53 | It will affect all of the TD and TH tags at the same time.
| | 02:59 | Keep defined in styles.css selected and click okay.
| | 03:05 | Click on the box category in the CSS rule definition dialogue box.
| | 03:09 | Uncheck the same for all box under padding and
enter .2 in the top field and in the bottom field.
| | 03:18 | In the right field under padding enter
.4 and also enter .4 in the left field.
| | 03:27 | Now go to each unit of measurement menu and choose M's.
| | 03:38 | Next, click on the border category.
| | 03:42 | Leave all the same for all boxes checked.
| | 03:45 | Click in the top menu under style and select solid.
| | 03:50 | Under width type 1 and leave pixels selected as the unit of measurement.
| | 03:58 | Then click in the color field and type #D5DDDD.
| | 04:08 | Now click okay.
| | 04:10 | You'll see that there our styles.css file is now open.
| | 04:13 | When we began adding rules to it, Dreamweaver
automatically opened it in the background.
| | 04:19 | It has an asterisk beside it to denote that
it has been changed since it was last saved.
| | 04:25 | Click on that file now.
| | 04:26 | You'll see the last three rules that we have added.
| | 04:29 | Go to the File menu and choose save.
| | 04:33 | Then go back to government.html.
| | 04:35 | Let's preview it in a browser.
| | 04:40 | Click on the glove icon in the document
tool bar and select preview in Firefox.
| | 04:46 | Scroll down to see the whole table.
| | 04:48 | It reflects the styles that we just added.
| | 04:52 | You can see that the border is not doubled up between
adjacent cells but is one pixel in width throughout.
| | 04:58 | In this case, we chose not to style table heading cells any
differently than body cells, but their default styling of bold is still
| | 05:08 | in effect because we did not explicitly override it.
| | 05:11 | But you can style tables just as you would any
other element to fit into the design of your site.
| | Collapse this transcript |
| Applying header cells to complex tables| 00:00 | >> In more complex tables, the header information for a given
cell might not be in the same row or column as that cell
| | 00:07 | or the cell might have more than two headers that apply to it.
| | 00:10 | In these cases, you need to use the headers attribute instead of the
scope attribute to associate the data cell with its header cells.
| | 00:17 | You do this by assigning an ID to each of
the header cells and then listing the IDs
| | 00:22 | of the applicable header cells in the headers attribute of the TD tag.
| | 00:27 | Let's view an example of this sort of example in government.html.
| | 00:31 | If you're following along with the exercise files, this page is
located in the 07_05 folder of the chapter seven exercise files.
| | 00:39 | Open it in Dreamweaver's design view.
| | 00:41 | Scroll down the page past the meeting
minutes table that we worked on earlier.
| | 00:46 | A new table has been added to the page with the
caption of comparison of adopted budget amounts
| | 00:51 | and actual spending for transportation department 2004 to 2006.
| | 00:56 | If we look at one of the numbers in the table, say this number 15 in
the third row, we can see that it doesn't just have two heading cells.
| | 01:04 | The cell labeled dollars and millions is one of
its heading cells, so is the cell labeled actual.
| | 01:10 | But also the cell labeled 2006 - 2007 provides
heading information for the number 15 in this cell.
| | 01:18 | This is a case where TH cells and scope attributes of a row or column will
not adequately describe how this cell is connected to the others around it.
| | 01:27 | Sometimes these sorts of tables can be remade into a simpler form so that
every data cell does only have one row heading to one column heading.
| | 01:36 | But there are many tables far more complicated
and large than this example one that can be set
| | 01:41 | up in a way that would give each cell only two header cells.
| | 01:44 | This table already has some TH cells with scope set as you can
see with the bold formatting that is applied to our TH cells.
| | 01:52 | We want to keep the cells as TH cells and we want to keep
the scope attributes, but we'll just add on to it from there.
| | 01:59 | Let's look at the scope attributes for each
of the cells under the fiscal year column.
| | 02:03 | Click inside the first cell labeled 2006 - 2007.
| | 02:08 | Move down to the tag selector at the bottom of
the document window and click on the TH tag.
| | 02:13 | Now right click or control click on that tag and select quick tag editor.
| | 02:18 | You can see the full HTML for this TH cell.
| | 02:22 | We can see that it's standing three rows
and that it has its scope set to row.
| | 02:27 | However, this isn't correct.
| | 02:29 | It's not just heading one row, but the entire group of three rows.
| | 02:33 | So the value that we should use in the scope attribute is row group.
| | 02:37 | Place your cursor after row in the scope
attribute and add on the word group.
| | 02:43 | Now it's scope attribute more accurately describes what it is heading.
| | 02:47 | There's also a scope attribute value of call group.
| | 02:50 | It doesn't apply to this table, but that's also
an option that you can use in your own tables.
| | 02:55 | Let's make the same changes to the other fiscal year cells.
| | 02:58 | Click in 2005 - 2006 then right click or control click on
the TH tag in the selector and select quick tag editor.
| | 03:09 | Type row group in the scope attribute.
| | 03:13 | Then click on the 2004 - 2005 cell in the tag selector right
click or control click on the TH tag and select quick tag editor.
| | 03:25 | Again, type row group in the scope attribute.
| | 03:29 | Click outside the table.
| | 03:31 | The next change we need to make is changing each of the
items in the budget column to be table header cells as well.
| | 03:38 | We can see that they are header cells by clicking
in one of them and looking at the tag selector.
| | 03:43 | The current tag is TD.
| | 03:44 | The fact that their text is not bold is also a
clue that they currently aren't set as TH tags.
| | 03:50 | We'll use find and replace to quickly change all of
these cells to TH cells with the scope attribute of row.
| | 03:57 | First go to the code view by clicking on
the code button in the document tool bar.
| | 04:02 | Select over the entire TD cell with the text adopted in it,
including the opening TD tag, the text and its closing TD tag.
| | 04:10 | Then go to the Edit menu and select find and replace.
| | 04:15 | The HTML that was selected is automatically filled in the find field.
| | 04:20 | We want to leave find in current document
set and search source code set as well.
| | 04:26 | With the text in the find field selected, hit control C
or command C to copy and paste it into the replace field.
| | 04:36 | But then highlight over the D in the opening TD tag in the replace field
and type H scope="row" then highlight over the D in the closing TD cell
| | 04:48 | and type H. Uncheck the use regular expression
box if it's currently checked.
| | 04:54 | Now click on replace all.
| | 04:55 | In the results panel, we can see that all three cells that had the
text adopted in them have been changed to TH cells with a scope of row.
| | 05:09 | We'll repeat that for the remaining budget type cells.
| | 05:13 | Go to the Edit menu and click on find and replace.
| | 05:17 | Copy the text in the find field using control C or command
C and paste it into the paste field using control V
| | 05:24 | or command V. Change the text in the replace field to actual.
| | 05:32 | Change the adopted text in the find field to actual
as well and then highlight over all of the TH code,
| | 05:38 | including the scope attribute and its value and type TD.
| | 05:43 | Also change the closing TH tag to a closing TD tag in the find field.
| | 05:49 | Now click replace all.
| | 05:51 | Finally, repeat this for the cells labeled different.
| | 05:54 | Go to edit > find and replace, control C or
command C to copy the text in the find field,
| | 06:03 | control V or command V to paste the text into the replace field.
| | 06:09 | Highlight over the text actual in the replace field and type difference.
| | 06:15 | Highlight over the text in the find field and also type difference.
| | 06:20 | Then highlight over all of the TH code in the find field and type
an opening TD tag and a closing TD tag then click replace all.
| | 06:30 | So now we have all of the cells that are heading other cells correctly
marked up as TH cells with their scope attributes set correctly as well.
| | 06:39 | This gets the complex table closer to being fully accessible but we still
haven't added the ID and headers attributes that I mentioned earlier.
| | 06:47 | We'll continue to improve this table in the next movie.
| | Collapse this transcript |
| Adding id and headers attributes| 00:00 | >> In the last movie we began marking up a complex table with
better HTML to describe what each data cell was headed by.
| | 00:07 | But since each of the data cells in the table are headed
by three different cells, we really need to use the ID
| | 00:13 | and headers attributes to further enhances its accessibility.
| | 00:17 | If you're following along with the exercise files,
open the page government.html in Dreamweaver.
| | 00:22 | That's located in the 07_06 folder of the chapter seven exercise files.
| | 00:27 | Click on the code button in the document tool bar.
| | 00:30 | Scroll down in code view until you get to
the table that we're currently working on.
| | 00:35 | It starts on line 86.
| | 00:37 | Place your cursor inside your first TH tag
with the text fiscal year inside of it.
| | 00:42 | You can place your cursor immediately before the scope attribute.
| | 00:45 | What we're going to do is give each table header cell an ID then
in each of the data cells, we'll specify what ID's head that cell.
| | 00:54 | So with your cursor in the first TH cell, type ID="year".
| | 00:59 | You can give the ID attributes any value that you want, but you
probably want to give them meaningful names so that it will be easier
| | 01:10 | to identify the correct ID's for each of the data cells,
but also make them short names because you're going to have
| | 01:16 | to type them many times into the headers attributes of those data cells.
| | 01:21 | They don't have to be listed before the scope attribute
of the TH cells, but it's a good idea to put them first
| | 01:26 | because when you're adding the headers attributes to the
data cells, it makes scrolling back up the table to glance
| | 01:32 | at what the ID's you set earlier were easier since they'll all be in a row.
| | 01:36 | Now place your cursor in the second TH
cell and type ID="budget" and a space.
| | 01:42 | In the third TH cell type ID="dollars" and a space.
| | 01:55 | And in the fourth header cell of the first
row, type ID="percent" and a space.
| | 02:05 | The next row also starts off with a TH cell.
| | 02:11 | Click inside that TH cell immediately before the
rowspan attribute and type ID="2006" and a space.
| | 02:22 | Since this cell is a header cell, it needs an ID attribute set.
| | 02:25 | But it, too, has its own header, the fiscal
year cell that we labeled above.
| | 02:30 | So to identify that relationship we're going to use the headers attribute.
| | 02:34 | Type in headers="year" and a space.
| | 02:42 | This is telling the browser or other devices that the header for
this particular year is the fiscal year cell with the ID of year.
| | 02:50 | Now move on to the second TH cell in the second row.
| | 02:53 | Click before the scope attribute and type ID="ad06" and a space.
| | 03:02 | This cell is also being headed by other
cells, so it needs the headers attribute too.
| | 03:07 | Type in headers="budget 2006" and a space.
| | 03:17 | We've used two separate values separated by a space within the
headers attribute because this cell is headed by two separate cells,
| | 03:30 | the budget cell in the first row and the 2006 - 2007 cell in the same row.
| | 03:36 | You can include as many values as you need to inside
of the headers attribute, each one separate by a space.
| | 03:42 | The order that you write them is not important.
| | 03:44 | Now let's move on to a regular TD cell.
| | 03:47 | Click inside the first TD cell immediately before its closing bracket.
| | 03:51 | Enter a space then headers="dollars 2006 ad05".
| | 04:02 | Here we've specified that three cells are headers for this
cell, the dollars cell, the 2006 cell and the ad06 cell.
| | 04:17 | So you can see that this provides a lot more detail of explicit information
about how this cell is being headed than the scope attribute provides.
| | 04:27 | Let's apply the headers attribute one more time
to the final cell in the second row of our table.
| | 04:32 | Click inside the opening TD tag, before its closing
bracket and type space headers="percent 2006 ad06".
| | 04:46 | This cell shares two of the same headers cells as the one above it,
but its first header cell, percent, is different from the one above it.
| | 04:57 | Again, this is just providing very detailed explicit
information about the relationships in the table.
| | 05:03 | You can continue adding the ID and headers attributes to all
subsequent rows until every cell is linked to the others that label it.
| | 05:10 | Remember, you only have to use these attributes when you have a
complicated table that you can't remake into a simpler version
| | 05:16 | where scope can't directly tie each cell to
its single row header and single column header.
| | 05:21 | The HTML table elements and attributes that we've discussed in this
chapter can turn what may have been an incomprehensible heap of words
| | 05:28 | and numbers to a screen reader user into meaningful data
that many devices and people can correctly interpret.
| | Collapse this transcript |
|
|
8. Creating FormsUnderstanding form accessibility issues| 00:01 | >> Web page forms are a common and vital source
of interaction between your users and your site.
| | 00:06 | What may look like a very easy to understand and simple form to
use to a sighted user can be quite challenge to use for some people
| | 00:13 | with disabilities if certain features aren't set in the HTML.
| | 00:17 | People with mobility impairments might find it
impossible or difficult to set the cursor in a text field
| | 00:23 | and a blind person might not know what the fields of the form are for.
| | 00:26 | One of the things that makes form elements accessible to the
blind and visually impaired is labeling the form elements.
| | 00:33 | Most forms already have labels written beside the fields, but the problem
is that if there's nothing in the HTML to associate that piece of text
| | 00:40 | with the adjacent field, then it's just another
piece of text and the screen reader cannot know what
| | 00:46 | to tell the user to fill in when it comes to a particular field.
| | 00:50 | If you're following along with the exercise files,
open the file departments.html in a browser.
| | 00:56 | It's located in the 08_01 folder of the chapter eight exercise files.
| | 01:01 | This page contains a simple form.
| | 01:04 | It's very easy for sighted users to know
what to fill in each of these fields.
| | 01:09 | The proximity of these text labels makes a visual connection
clear, but there's nothing in the HTML to make that explicit.
| | 01:17 | Screen readers will often guess what the label for a field is.
| | 01:21 | But what if they guess wrong?
| | 01:23 | The variety of placements of labels makes that quite possible.
| | 01:26 | You'll see that the first three fields of this form have the
label placed off to the left of the field, name, email and phone.
| | 01:35 | Then we have a question above two radio buttons
and then their labels are placed off to the right.
| | 01:41 | Finally another label placed to the left.
| | 01:43 | And then a label placed above the field.
| | 01:46 | So without something in the HTML to tell a screen
reader what piece of text relates to what field,
| | 01:52 | it's going to have a very hard time helping
its users to fill out the form correctly.
| | 01:58 | Also, radio buttons such as these, as well as checkboxes can be
very hard to select for people who do not have fine motor control.
| | 02:07 | This form could be fixed quite easily by using the label element in HTML.
| | 02:12 | It should be wrapped around every piece of text that
describes the purpose of an adjacent form control.
| | 02:17 | Every form control should have a label.
| | 02:20 | And a label can only correspond with one form control.
| | 02:23 | The only form controls that don't need
labels are submit buttons and submit images,
| | 02:28 | as their descriptive text is contained in
their value and alt attributes, respectively.
| | 02:33 | Labeling form elements is essential to ensure that even a person
who cannot see the form can determine what each text field,
| | 02:40 | checkbox, radio button and other form elements are for.
| | 02:44 | In addition, a label element essentially
expands the clickable area of a field.
| | 02:49 | If a radio button or checkbox has a label beside it, you can
click anywhere in the label to select that button or checkbox.
| | 02:58 | Next we'll look at how to add labels to forms, both existing ones that
you need to retrofit and new ones that you're building from scratch.
| | Collapse this transcript |
| Labeling form fields| 00:01 | >> In the last movie, we learned how important it is for form
elements to be labeled so that all users can know what to fill
| | 00:07 | in each field and can do so without too much trouble.
| | 00:10 | In this movie we'll add labels to the form
in the departments page of our example site.
| | 00:16 | First let's talk about the different options for form labels.
| | 00:19 | They can either be implicit or explicit.
| | 00:21 | Implicit labels are wrapped around the form control that they label.
| | 00:26 | This keeps the HTML very simple.
| | 00:28 | But the problem is that this setup is
not supported in older screen readers.
| | 00:33 | It also makes it harder for you to style with CSS, as we'll see later.
| | 00:37 | Explicit labels are placed separately from the form control, either before
or after it, and they don't need to be right next to the form control.
| | 00:46 | The connection then is made by an ID attribute on the form field
itself and a for attribute with the same value for the label tag.
| | 00:56 | This method is well supported and gives your more
styling options with CSS, so let's use this label method
| | 01:03 | on the departments page form that we looked at in the last movie.
| | 01:08 | If you're following along with the exercise files,
open the page departments.html in Dreamweaver.
| | 01:14 | It's located in the 08_02 folder of the chapter eight exercise files.
| | 01:19 | This form does not currently have labels set on any of the fields.
| | 01:23 | Select over the text name in the first row of the table.
| | 01:27 | Now right click or control click on the
highlighted text and choose quick tag editor.
| | 01:33 | You'll be asked to wrap a tag around the highlighted text.
| | 01:37 | Type label or choose it from the menu of tags shown.
| | 01:42 | We also need to add a for attribute so then type a space, then for="name".
| | 01:49 | This is stating that we want this text to
label a field that has an ID attribute of name.
| | 02:01 | Click on the field beside the name label.
| | 02:03 | Now we need to give the field that ID attribute so that they are connected.
| | 02:08 | Right click or control click on the field next
to name and click on edit tag in the menu shown.
| | 02:14 | The tag editor dialogue box appears.
| | 02:17 | Click on the style sheet/accessibility category
on the left hand side of the dialogue box.
| | 02:23 | Click inside the ID field and type name.
| | 02:27 | Then click okay.
| | 02:29 | Let's go into code view to see how this has changed the HTML.
| | 02:33 | Click on the code button in the documents toolbar.
| | 02:36 | The input tag that we just edited will still be highlighted.
| | 02:40 | You can see that it has a name attribute set, which
is what is used by the form processing script.
| | 02:45 | Then it has a type attribute set, which
determines what type of attribute it is.
| | 02:49 | And then finally there's the ID attribute that we just added.
| | 02:53 | We've given it the same value as the name attribute,
but it doesn't have to have the same value.
| | 02:58 | For instance, we could have given it an ID of field-name.
| | 03:03 | If we did this we'd have to make sure that the for
attribute of our label tag had this same value.
| | 03:09 | This is a spot where the attributes must match.
| | 03:12 | The for attribute on the label must have the same
value as the ID attribute on the form control.
| | 03:19 | Go back to design view now by clicking on
the design button in the document tool bar.
| | 03:24 | Let's see how we would add a label when first inserting the form field.
| | 03:28 | Place your cursor in front of the phone text in the form table.
| | 03:32 | Go to the insert menu and choose table
objects, then choose insert row above.
| | 03:38 | Place your cursor inside the second cell of this new table row.
| | 03:42 | Then go to the insert tool bar and click on the forms tab.
| | 03:46 | Next, click the text field button, the second
button from the left, to insert a new field.
| | 03:52 | The input tag accessibility attributes box appears.
| | 03:56 | If we had not checked the form option under
Dreamweaver's accessibility preferences as we did
| | 04:01 | in an earlier movie, this dialogue box would not appear.
| | 04:05 | Instead, it would simply insert the text
field and not prompt you for a label.
| | 04:09 | You could still add a label yourself later, but
having this dialogue box servers are a good reminder
| | 04:15 | to always add a label every time you add a form field.
| | 04:19 | Click inside the label field first, type
address: space, now click back inside the ID box.
| | 04:29 | Here's where we need to set the value of the ID attribute.
| | 04:32 | Dreamweaver will also set it as the value of the
for attribute when it creates the label for us.
| | 04:37 | Type address.
| | 04:38 | Next, in the dialogue box, we need to choose a style of label tag.
| | 04:43 | The first option is to wrap with label tag.
| | 04:46 | We've talked about why this isn't ideal, so choose the
second option, attach label tag using for attribute.
| | 04:52 | The next option asks you where you want to position
the label, before the form item or after the form item.
| | 04:58 | Keep before form item selected.
| | 05:01 | Don't worry about the access key or tab index items for now.
| | 05:04 | We'll talk about them later.
| | 05:06 | Click on okay.
| | 05:07 | Let's go into code view to see the HTML that Dreamweaver created.
| | 05:11 | Click on the code button in the document tool bar.
| | 05:14 | The new field and its label are highlighted in HTML.
| | 05:19 | If we look at the for attribute of the label, we can
see that it matches the ID attribute of the input tag.
| | 05:25 | Now we simply need to move the label out of
this table cell into the first cell of the row.
| | 05:30 | Highlight over the entire label element
from its closing tag to its opening tag,
| | 05:36 | then press control X or command X on your keyboard to cut the selection.
| | 05:41 | Next, highlight over the content of the cell immediately above the one
we were just in then press control V or command V on your keyboard.
| | 05:50 | Now click on the design button in your document tool bar.
| | 05:52 | Our label element is now in the correct table cell.
| | 05:56 | So once our form has labels added to all of the fields,
it should be much more accessible to many more people.
| | 06:01 | Another accessibility enhancement we can
make is adding field set and legend elements.
| | 06:06 | We'll do that next.
| | Collapse this transcript |
| Adding fieldsets and legends| 00:01 | >> Once we have labels added to our forms, another
type of structure we can add is field sets and legends.
| | 00:06 | A field set groups a series of related form
elements, for instance field for street address, city,
| | 00:12 | state and zip code could all be grouped under mailing address.
| | 00:16 | You could create a field set that groups all of these elements
and give it an appropriate legend to describe that group.
| | 00:22 | The legend is essentially a heading for all of the items in the field set.
| | 00:26 | When a person using a screen reader comes to one of the
fields in a field set, the screen reader will also read
| | 00:32 | out the legend text before the label, such as mailing address city.
| | 00:37 | Using legends and field sets in addition to labels is especially important
when you have two groups of elements that are very similar except
| | 00:44 | for their groups type, such as a group of fields
for billing address and a group for mailing address.
| | 00:50 | You probably don't want to write billing address city, billing
address zip code and so on for every label in your form,
| | 00:56 | so providing a legend with that additional information lets you keep your
information simple for sighted users while still understandable to those
| | 01:03 | who can't see a heading for an entire group of fields.
| | 01:07 | If you're following along with the exercise files,
open the page departments.html in Dreamweaver.
| | 01:13 | It's saved in the 08_03 folder of the chapter eight exercise files.
| | 01:17 | This is the same form we were working on in the last movie,
but the remaining labels have been added to all of the fields.
| | 01:23 | Also, the single table that was holding together the entire form has
been split into multiple tables to make adding the field sets easier.
| | 01:31 | We're going to do that now.
| | 01:32 | Click inside the form, go to the insert tool bar at the top of
Dreamweaver and select the forms tab then select the field set button.
| | 01:41 | It's the fifth button from the right immediately
to the right of the button labeled ABC.
| | 01:45 | Click on that button.
| | 01:47 | A dialogue box opens asking you for the legend.
| | 01:51 | Type in contact information then click okay.
| | 01:57 | We now need to add the first table in our form into that field set.
| | 02:01 | Click inside the table then go down to the tag selector at
the bottom of the document window and click on the table tag.
| | 02:08 | Press control X or command X on your keyboard to cut the table.
| | 02:12 | Then place your cursor at the end of the contact
information legend and press enter or return.
| | 02:17 | Then press control V or command V on your
keyboard to paste the table into your field set.
| | 02:23 | Scroll down to the next table.
| | 02:25 | Place your cursor to the right of the second table.
| | 02:29 | In the insert tool bar again click the field set button.
| | 02:32 | Once again we're asking for a legend.
| | 02:34 | In the case of a grouping of radio buttons or checkboxes,
the question that precedes that groups should be the legend.
| | 02:41 | That's because the question is essential
for understanding the items below it.
| | 02:45 | You want to make sure that it gets read as well as the label
text for each of the individual radio buttons and checkboxes,
| | 02:51 | so you can put the question itself into the legend, so simply retype
the question do you prefer to be contacted via email or phone?
| | 03:02 | Then click okay.
| | 03:04 | Now we can delete this row of the table.
| | 03:07 | Click inside the table cell with the question listed then click the TR tag
in the tag selector then click on the code button in the document tool bar.
| | 03:15 | The entire row will be selected, so simply hit
backspace or delete on your keyboard to get rid of it.
| | 03:20 | Go back to design view by clicking on the
design button in the document tool bar.
| | 03:24 | Click inside the email and phone table and
then click the table tag on the tag selector.
| | 03:29 | Press control X or command X to cut the table, then
place your cursor at the end of the question legend,
| | 03:36 | hit enter and hit control V or command V to paste in the table.
| | 03:40 | We have one more field set left to add.
| | 03:43 | Click beside the final table then in insert
tool bar click on the field set button.
| | 03:48 | In the dialogue box enter your comments in the legend field then click
inside the table above, click on the table tag in the tag selector,
| | 03:57 | hit control X or command X to cut, place your cursor at the end of the your
comments legend, hit enter or return, and control V or command V to paste.
| | 04:06 | The last item in the form is the submit button.
| | 04:09 | It's not necessary to wrap a field set around this button.
| | 04:12 | If you did have several buttons that could be used on your form
though, you might consider wrapping them all in a field set.
| | 04:17 | We don't need to do that on this form so we've
finished adding all of the structure that we need.
| | 04:22 | It now has all of the extra pieces of HTML that it
can for accessibility, labels, field sets and legends.
| | 04:29 | But we can further improve its structure by removing the fields
from the tables that are currently being used for the form layout
| | 04:35 | and use CSS instead to control the forms formatting.
| | 04:39 | We'll cover how to do that next.
| | Collapse this transcript |
| Moving forms out of tables| 00:01 | >> We learned in earlier movies that tables should be reserved for tabular
data and that CSS should be used to control all the visual formatting.
| | 00:10 | This applies to our form as well.
| | 00:12 | When we talked about avoiding tables for layout, we discussed
how it's acceptable to use the table if it linearizes well
| | 00:19 | and you don't have other options, so it's not
imperative that you switch the form over to CSS layout.
| | 00:25 | However, if you do keep a form inside a table for layout,
do not add any of the table accessibility features we talked
| | 00:31 | about in the previous chapter, such as
TH header cells to your layout table.
| | 00:36 | However, if you do keep a form inside a table for layout,
do not add any of the table accessibility features we talked
| | 00:42 | about in the previous chapter, such as
TH header cells to your layout table.
| | 00:46 | These should only be used by data tables.
| | 00:48 | Screen readers like JAWS look for these features to try to determine if a
table is being used for layout or for data and they change what they read
| | 00:56 | out to the user accordingly, so always keep layout tables marked up
with plain TD table cell elements and no other special HTML markup.
| | 01:05 | Laying out your form with CSS is still the more accessible option.
| | 01:08 | Remember that CSS layouts can adjust more easily to different
devices and user settings, while tables remain stuck in rigid grids.
| | 01:16 | Someone using a very narrow screen or only
viewing a small area of the screen at a time
| | 01:20 | with a screen magnifier may have a harder
time filling out a table based form.
| | 01:25 | To layout our form with CSS, we'll first group each labeled field pair.
| | 01:29 | We'll use a list to do this as this form really is a list of questions.
| | 01:33 | If you're following along with the exercise files, open
departments.html in the 08_04 folder of the chapter eight exercise files.
| | 01:42 | We're going to add an ordered list, one to each field set.
| | 01:45 | We're going to have to start this out in code view because
Dreamweaver won't let us use the ordered list button
| | 01:50 | on the properties inspector inside a field set, but while still
in design view, click inside the first set so that we'll go
| | 01:57 | to the correct spot in the code when we switch over.
| | 01:59 | Now click on the code button in the document tool bar.
| | 02:02 | Your cursor should be after the first closing table tag.
| | 02:05 | Highlight over the entire paragraph element below the closing table
tag then type an opening OL tag, hit enter to go to a new line,
| | 02:14 | then type in an opening LI tag, and then close the OL tag.
| | 02:18 | Now click on the design button of the document tool bar.
| | 02:22 | You'll see the number one and our bullet flower image.
| | 02:24 | Now we can start pulling the labels and form
fields out of the table into our new list.
| | 02:29 | Click on the name label.
| | 02:31 | To make sure that we move the entire label element, not just its text,
click on the label tag in the tag selector then move your mouse back
| | 02:39 | over the highlighted name text and click and drag it down beside the one
| | 02:43 | and the bullet flower image then click on the
input field that went with the name label.
| | 02:48 | Click and drag this down beside the name label.
| | 02:51 | Place your cursor after this input field
and hit enter to start this next list item.
| | 02:56 | Click inside the email label then click
on the label tag in the tag selector.
| | 03:01 | Place your mouse back over the highlighted email text and
click and drag it down into the second list item them click
| | 03:07 | on its field and drag it down beside the email label.
| | 03:11 | We'll continue doing this for the rest of the table.
| | 03:14 | Now all of the fields are in the list.
| | 03:16 | Click anywhere inside the table then select the table tag
showing in the tag selector then hit delete on your keyboard.
| | 03:23 | We can repeat this process for each field set so
that each labeled field pair in an ordered list.
| | 03:29 | This gives the form a more semantic HTML structure.
| | 03:33 | Although it doesn't look that great right now, it's
still quite clear what label goes with which field.
| | 03:38 | Fortunately we can use CSS to improve its appearance for sighted users.
| | Collapse this transcript |
| Cleaning up a form's appearance| 00:01 | >> If you're following along with the exercise files, open departments.html
in Dreamweaver from the 08_05 folder of the exercise files.
| | 00:10 | This is the same page we worked on in the previous
movie, but all of the remaining tables have been removed
| | 00:15 | and all of the labeled field pairs are now in ordered lists.
| | 00:19 | With all the HTML pieces that the form set,
we can now begin styling our form with CSS.
| | 00:24 | We'll start by formatting the field sets and legends.
| | 00:28 | Click on the new CSS rule button at the bottom of the CSS styles panel.
| | 00:33 | In the new CSS rule dialogue box, choose tag as the selector type.
| | 00:38 | In the Tag menu, choose field set.
| | 00:40 | Keep define in styles.css selected.
| | 00:44 | Click okay.
| | 00:46 | For the field set, we simply want to work on its
margin and padding properties in order to iron
| | 00:51 | out inconsistencies between the browsers, so click on the box category.
| | 00:57 | Leave the same for all box checked under
padding and enter 0 in the top field.
| | 01:02 | Under margin, uncheck the same for all box.
| | 01:04 | Enter 0 in the top, right and left fields.
| | 01:09 | In the bottom field enter 1 and then choose M's as the unit of measurement.
| | 01:14 | This just provides space underneath each field
set to separate them out from each other.
| | 01:19 | Now click okay.
| | 01:20 | Next let's add a rule for the legend element, so click on the
new CSS rule button at the bottom of the CSS styles panel.
| | 01:28 | Choose tag as the selector type.
| | 01:30 | Then in the Tag menu scroll down and select legend from the list of tags.
| | 01:36 | Leave define in styles.CSS selected and click okay.
| | 01:40 | In the CSS rule definition dialogue box
click on the Weight menu, choose bold.
| | 01:45 | This will set the legend text apart from the label text, which it heads.
| | 01:49 | Then click on the box category, uncheck the same for all box under margin.
| | 01:54 | Enter 1 in the left field under margin and choose M's from the adjacent
menu for its unit of measurement this simply moves the legend text away
| | 02:03 | from the left side of the field set to make up for the
padding that we earlier removed from the field set.
| | 02:08 | Now click okay.
| | 02:10 | You can see that now the legend text is bold, but other
than that our form hasn't changed too much in appearance.
| | 02:16 | Let's start removing the list formatting.
| | 02:19 | Click on the new CSS rule button at the bottom of the CSS
styles panel, keep advanced selected for the selector type.
| | 02:26 | In the selector field delete the default text that
Dreamweaver has entered and type in field set OL.
| | 02:35 | This will select all of the ordered lists within all of he field sets.
| | 02:39 | Leave define in styles.css selected then click okay.
| | 02:44 | Click on the box category in the CSS rule definition dialogue box.
| | 02:48 | Leave the same for all box checked under padding and enter 1 in the top
field then choose M's from the adjacent menu for its unit of measurement.
| | 02:58 | Also leave the same for all box under
margin checked, but enter 0 in its box.
| | 03:04 | You are just adjusting default list spacing.
| | 03:07 | We also want to remove the numbering showing on the
lists, so click on the list category in the dialogue box.
| | 03:14 | Click on the arrow of the Type menu and select none.
| | 03:18 | This removes all list markers, in our case, numbers.
| | 03:21 | Click okay.
| | 03:23 | Let's scroll down the page in design view
a bit to see how the page is looking up.
| | 03:30 | The numbers are now gone from the list, but
we still need to get rid of the bullet image.
| | 03:35 | This was set earlier on our LI elements, so
we'll need to override it with a new rule.
| | 03:40 | Click on the new CSS rule button at the bottom of the CSS
styles panel, keep advanced chosen as the selector type,
| | 03:48 | delete the default text in the selector field, type field set LI.
| | 03:55 | Leave defined in styles.css selected and then click okay.
| | 04:00 | Click on the background category first.
| | 04:03 | Click inside the background image field and
type none then click on the box category.
| | 04:10 | Leave the same for all box checked under
padding and type 0 in the top field.
| | 04:15 | Under margin, uncheck the same for all box.
| | 04:18 | Enter 0 in the top, right and left fields.
| | 04:23 | In the bottom field type one and choose M's from the adjacent menu.
| | 04:28 | This bottom margin spaces out each label field pair from each other.
| | 04:33 | Now click okay.
| | 04:36 | Now the bullet images are gone and our form already looks a lot better.
| | 04:40 | It would be nice though if we could line up each of these text
fields in the first field set to make the form look a little cleaner.
| | 04:47 | We'll continue adding to the CSS to improve
the appearance of our form in the next movie.
| | Collapse this transcript |
| Aligning labels and fields using CSS| 00:01 | >> In the previous movie we began cleaning up the form's
appearance in CSS, but there are still some improvements
| | 00:06 | that we can make to the alignment of the labels and their fields.
| | 00:10 | Remember that we floated the items in the mainNAV
bar to get them to line up nicely side by side.
| | 00:16 | We'll use a similar technique here.
| | 00:18 | We'll float the label elements so that they'll
align better with their matching fields.
| | 00:23 | If you're following along with the exercise files, the page
we're working on is named departments.html and can be found
| | 00:30 | in the 08_06 folder of the chapter eight exercise files.
| | 00:34 | In the CSS styles panel click the new CSS rule button
at the bottom, choose tag for the selector type.
| | 00:43 | In the Tag menu, scroll through the lists and select label.
| | 00:49 | Keep define in styles.css selected then click okay.
| | 00:53 | In the CSS rule definition dialogue box click on the block category.
| | 00:59 | Click on the arrow of the Text Align and select right.
| | 01:03 | Next click on the box category.
| | 01:05 | We want the width of each of the labels to be consistent so
that their text fields will cleanly line up on their left side,
| | 01:12 | so click in the width field, type six and in the adjacent menu
choose Ms. We can't choose a pixel measurement for the label width
| | 01:22 | because we have no idea how large or small the user's font size is.
| | 01:26 | If we set the width in Ms though, it will adjust based on that font size.
| | 01:31 | Remember that one M is roughly equal to two characters.
| | 01:35 | So a width of six M's would give us about 12
characters before the text would start wrapping.
| | 01:39 | This is fine for the labels in our particular form.
| | 01:42 | When you're making your own forms, simply adjust
this width to fit the length of your longest label.
| | 01:49 | Next, uncheck the same for all box under padding.
| | 01:52 | Click in the right field and enter .5 and
then choose Ms from the adjacent menu.
| | 01:59 | This gives us a little bit of space between the
right side of the text label and its form field.
| | 02:05 | Finally, click on the float menu and choose left.
| | 02:09 | Now click okay.
| | 02:12 | Let's preview the page in a browser and see how it's doing.
| | 02:15 | Click on the globe icon in the document
tool bar and choose preview in Firefox.
| | 02:20 | A dialogue box will open saying that additional
files need to be saved for the preview to work.
| | 02:27 | What this is referring to is the fact that when we made a
change to the style sheet, Dreamweaver opened it up but did not
| | 02:33 | yet save it in case we wanted to undo the styles that we added.
| | 02:37 | Before we can preview departments.html Dreamweaver needs
to save styles.css, so click yes for it to save that file.
| | 02:46 | Now our preview opens in Firefox.
| | 02:48 | You'll see that all of the labels are nicely aligned on the right
hand side and all of the fields are nicely aligned on the left.
| | 02:56 | There's plenty of space between each field for it to remain readable.
| | 03:00 | Now let's scroll down the page and look at the other field sets.
| | 03:03 | Unfortunately, the labels and radio buttons are
very misaligned now in the second field set.
| | 03:08 | The third field set looks okay.
| | 03:10 | But this long label looks a little bit
awkward off to the left of its field.
| | 03:15 | What we can do is create special classes for these special cases.
| | 03:19 | The styles that we just added will work with a majority of the fields
in most forms, since most forms are heavily made up of text fields.
| | 03:28 | But for the cases where we want labels to be to the right of its
field, or for the cases where the label is long and we want it to be
| | 03:35 | above its field, we'll need to create special classes.
| | 03:39 | Close Firefox.
| | 03:41 | Click on the new CSS rule button at the bottom of the CSS styles panel.
| | 03:46 | We're going to create a special class any time we have a
question with multiple options using radio buttons or checkboxes.
| | 03:54 | We'll name this class options.
| | 03:56 | So delete the default text in the selector field and type
.options, but we don't need to style this class itself,
| | 04:05 | instead we need to style the label within this class.
| | 04:08 | That's because what we're trying to do here is
override the styles on the label tag that we just set.
| | 04:14 | So now let's specifically target labels that
we within items with the class of options.
| | 04:19 | So leave advanced chosen for the selector type.
| | 04:23 | And as a selector, after you've typed .options, type space label.
| | 04:31 | Leave define in styles.css selected and click okay.
| | 04:35 | We want to remove the floating and the right text
alignment, so first click on the block category.
| | 04:41 | Click on the Text Align menu and choose
left then click on the box category.
| | 04:47 | Place your cursor inside the width field and type auto.
| | 04:52 | This overrides the width that we previously set on the label element.
| | 04:57 | Auto simply means let the element be as wide as it needs to be.
| | 05:01 | This will allow the options beside radio buttons and
checkboxes to be as long or short as they need to be.
| | 05:08 | Since they're aligned with their radio buttons and
checkboxes cleanly on the left side of the text by default,
| | 05:15 | we don't need to worry about setting the
width for them to get them to nicely line
| | 05:18 | up like we did with labels that were to the left of text fields.
| | 05:22 | Next, select the float menu and choose none.
| | 05:26 | Again, we're simply overriding the float property
that was set on the label element earlier.
| | 05:32 | Now click okay.
| | 05:34 | We haven't yet applied this class in the page, so there
won't be anything to see in Dreamweaver or in a browser.
| | 05:40 | Before we apply the options class, let's create the
second class that we'll need for labels that are long
| | 05:45 | and need to be aligned over their fields instead of to the left.
| | 05:49 | Click on the new CSS rule button, leave advanced chosen as
the selector type and delete the text in the selector field.
| | 05:57 | These types of long labels are usually rather explanatory
in nature so I'm going to call the class explanatory.
| | 06:04 | Type .explanatory label.
| | 06:09 | Leave define in styles.css selected and click okay.
| | 06:14 | What we want to happen here is again remove
the float width and right text alignment.
| | 06:19 | But we also want to tell the label to sit on its own line above its field.
| | 06:24 | We can do that using the display block property.
| | 06:27 | Remember that block elements stack on top of each other.
| | 06:30 | Click on the block category in the CSS rule definition dialogue box then
click on the Display menu and choose block from the list of options.
| | 06:40 | Next click on the Text Align menu above and choose left.
| | 06:44 | Now click on the box category, type auto in the width
field, and select none in the Float menu, now click okay.
| | 06:54 | We now have our classes ready to apply.
| | 06:56 | Scroll down the page in design view.
| | 07:00 | Click on the email label of the first radio button,
then click on the LI tag shown in the tag selector.
| | 07:07 | Right click or control click on this tag and
select quick tag editor, then type space,
| | 07:13 | and a list appears of possible attributes you can add to this tag.
| | 07:17 | Class is as the top of the list, so double click on class and you'll then
be shown a new menu with classes defined in styles.css that we can choose.
| | 07:27 | Choose the options class.
| | 07:29 | Double click on the options class to choose it.
| | 07:32 | You can see that immediately the label jumps back up by the radio button.
| | 07:36 | Repeat this for the phone label of the second radio button.
| | 07:40 | Click inside that label then click on the LI tag in the tag selector.
| | 07:45 | Click inside the phone label then right click or
control click on the LI tag in the tag selector.
| | 07:51 | In the menu that appears choose quick tag editor, type a
space and double click on class from the menu that appears.
| | 07:58 | In the second menu then, double click on options.
| | 08:02 | We're done with our radio buttons, so
scroll the rest of the way down the page
| | 08:06 | and click inside the last label on the page for the large text area field.
| | 08:11 | Right click or control click on the LI tag in
the tag selector and choose quick tag editor.
| | 08:17 | Type space, double click on class from the menu and then this
time, double click on explanatory from the second menu that shows.
| | 08:26 | Again, the label immediately changes its alignment.
| | 08:28 | This time above the form field.
| | 08:31 | Go to file > save to save your page.
| | 08:35 | Then click over to styles.css to save this file as well.
| | 08:40 | Go to file > save.
| | 08:42 | Click back in departments.html.
| | 08:45 | We're now ready to preview in the browser.
| | 08:47 | Click on the globe icon in the document
tool bar and select preview in Firefox.
| | 08:53 | Our first field set hasn't changed in appearance.
| | 08:56 | Our second and third field sets are much improved.
| | 08:59 | Now the radio button items are nicely aligned with their labels.
| | 09:02 | And the long label in the third field set sits above the text area.
| | 09:08 | This is just the beginning of the styles
that you can apply to forms using CSS.
| | 09:13 | One thing to note about styling forms, however, is that the operating
system has some control over the appearance of form elements,
| | 09:20 | so you can't greatly alter the appearance
of the actual form controls themselves.
| | 09:25 | Although this may be a negative for branding purposes, it can be
a positive for accessibility because it keeps the form controls
| | 09:32 | from looking radically different than they do on other sites
do that users know how to interact with your form correctly.
| | Collapse this transcript |
| Indicating required fields| 00:00 | >> Most forms contain some fields that must be
filled out in order for the form to be submitted.
| | 00:06 | It's important to notify your users of which fields are required
before they fill out the fields so that they can do so correctly.
| | 00:13 | And of course you need to make sure this essential
information is provided to people with disabilities as well,
| | 00:24 | so make sure that you avoid using colors to indicated
fields that are required versus fields that are not.
| | 00:31 | Remember that not everyone is able to distinguish color.
| | 00:34 | People can also change the settings in their
browsers to change the colors you have set.
| | 00:38 | And of course screen reader users will not be able to see the color.
| | 00:43 | This means you should also avoid other visual formatting such as bold.
| | 00:47 | This probably has a greater chance of being understood by sighted users
but it's still not accessible to visually impaired and blind users.
| | 00:56 | They need to have something in the HTML that can be conveyed to them.
| | 01:00 | Another important consideration when indicating required fields is that you
want to notify your users of the requirement before they get to the field.
| | 01:09 | Remember that a screen reader will be reading things in order and also,
| | 01:13 | people using screen magnifiers are only seeing
a very small portion of the screen at a time.
| | 01:18 | If you place the indication of the required field after the field itself,
| | 01:23 | users of these devices will probably already have skipped past
the field and may never see the required filed indication.
| | 01:31 | An asterisk is frequently used to denote required fields in a form.
| | 01:35 | This has become so frequently used that it's basically a web convention
now and is rather well understood even by screen reader users,
| | 01:43 | so it's okay to use an asterisk, but make sure that
you still notify all users about what the symbol means.
| | 01:50 | Something to keep in mind, though, when using an asterisk is that it's a
very small character and may be hard for visually impaired users to see.
| | 01:59 | If you can design your form so that the actual word required could
be listed with every field, that's the most accessible option.
| | 02:08 | If you're following along with the exercise files
open the page departments.html in Dreamweaver.
| | 02:14 | It's located in the 08_07 folder of the chapter eight exercise files.
| | 02:19 | Let's mark some of the fields in this form as required.
| | 02:22 | We'll use an asterisk to do so.
| | 02:24 | So first, we'll put a message explaining
this in the paragraph that precedes the form.
| | 02:29 | Place your cursor at the end of the paragraph text and type required
fields are indicated by an then type *. Let's markup this entire sentence
| | 02:47 | with strong text because it's important
information that we want to emphasize.
| | 02:51 | Open the properties inspector if it's not
already open and click on the B button.
| | 02:57 | We can see in the tag selector that this applied strong text to our text.
| | 03:01 | Now scroll down the page, place your cursor at the
end of the name label text and type in an asterisk.
| | 03:08 | Highlight over this asterisk as well and click
on the view tag in the properties inspector.
| | 03:15 | It's important that the asterisks be placed inside of the label element.
| | 03:19 | This is because many screen readers have a special way
of moving through forms known as forms reading mode.
| | 03:25 | In this mode, the user can quickly jump from
field to field filling out the information.
| | 03:30 | When in this mode, the only text that is read to the
user are the text of the legend and label elements.
| | 03:37 | If you place text outside of the labels or legends in your form,
there's a chance that a screen reader user will never heard it.
| | 03:45 | So keep the indication of which fields are required inside the label.
| | 03:49 | W can see in the tag selector that the strong tag is inside of the label
tag, which is listed to its left to show that it's the parent element.
| | 03:59 | What if we wanted to provide even more
explicit text about which fields are required
| | 04:03 | to screen reader users who may not understand what the asterisk means?
| | 04:08 | We can again use the off left positioning method to create text that
will be read by screen readers but will not be seen by sighed users.
| | 04:17 | Click on the code button in the document tool bar to go into code view.
| | 04:21 | Place your cursor after the asterisk that we just
typed then type an opening span tab, a space,
| | 04:28 | and in the menu of attributes that appears, double click on class.
| | 04:32 | The class attribute is added and now we have
a new menu showing the available classes.
| | 04:38 | Double click on the off left class then move your
cursor outside of the closing quotation marks
| | 04:43 | and type the closing bracket for the opening tag of the span.
| | 04:47 | Now we can type the text required.
| | 04:51 | Now type the closing span tag.
| | 04:54 | When you type the first bracket and slash, Dreamweaver
finishes the rest of the closing tag for you.
| | 05:00 | Click on the design button in the document tool bar.
| | 05:03 | You'll see that Dreamweaver is showing the text required on the screen.
| | 05:07 | But remember that Dreamweaver is not an actual browser, it doesn't
always show things exactly as they will appear in a real browser,
| | 05:14 | so let's click on the globe icon in the document toolbar to bring
up the preview in browser window and choose preview in Firefox.
| | 05:22 | We're asked to save the page, so click yes.
| | 05:26 | We can see that in the browser only the asterisk is displayed.
| | 05:31 | The rest of the text that says required is not on the screen.
| | 05:35 | So this is an instance where the display
in Dreamweaver is not completely accurate.
| | 05:39 | Nevertheless our technique has worked.
| | 05:42 | Although the asterisk is colored red, we're not
indicating that the form is required by color alone,
| | 05:48 | we're indicating it with a symbol that we've explained.
| | 05:52 | The color is just an example of progressive enhancement.
| | 05:55 | There's still something there in the HTML, in this
case a symbol, marked up with a strong element
| | 06:01 | and also containing the text required for screen readers.
| | 06:05 | The important thing to remember is that
required fields need to be indicated
| | 06:09 | through something in the HTML, not through visual formatting alone.
| | Collapse this transcript |
| Dealing with CAPTCHA| 00:00 | >> A CAPTCHA is a distorted image of text or numbers
that's commonly placed on forms in order to reduce spam.
| | 00:06 | You'll often see it on registration forms and blog comment forms.
| | 00:10 | The reason it's there is to tell humans and computers apart.
| | 00:14 | A human has to type in what letters or numbers are seen.
| | 00:17 | Spam bots are programs that automatically
go out and fill out forms to submit spam.
| | 00:22 | Since they're not humans and cannon see the images, they cannot read them.
| | 00:26 | However there are some spam bots that can read clear
images using visual character recognition technology.
| | 00:32 | That's why the images you are asked to
transcribe on forms are so distorted looking.
| | 00:37 | If they were clear and easy to read, spam
bots might be able to get through.
| | 00:41 | Of course, the fact that they are so hard to read is a big accessibility
concern and they can't be used at all by blind or visually impaired people.
| | 00:49 | A blind person cannot see the image at all.
| | 00:51 | And someone with a serious visual impairment will
likely not be able to read the image at all either.
| | 00:56 | In these cases, these people won't be able to submit the form.
| | 00:59 | And in some cases, they won't be able to use the site entirely if
the site requires a registration in order to use all of its features.
| | 01:06 | There's not way to make CAPTCHA images
accessible because you can't put alt text on them.
| | 01:11 | If you did so, then the spam bots would simply read
the alt text and fill that in and get through the form.
| | 01:16 | One attempt at addressing the accessibility issues with CAPTCHA is
to include a link to a recording of letters or numbers being spoken
| | 01:23 | and ask the user to listen and transcribe what they hear.
| | 01:27 | There are still serious accessibility problems with this however.
| | 01:30 | The audio is just as jumbled as the images are,
again, in order to prevent advanced programs
| | 01:36 | from being able to recognize what is being spoken and get through.
| | 01:40 | And of course, an audio version does not help
someone who has both vision and hearing impairments.
| | 01:45 | An example of this type of system is online at reCAPTCHA.net.
| | 01:50 | Let's see how it works.
| | 01:52 | Go to the URL reCAPTCHA.net.
| | 01:58 | ReCAPTCHA is a free CAPTCHA program that anyone can place on their site.
| | 02:03 | It includes an audio backup by default.
| | 02:05 | On the ReCAPTCHA website, click on the link what is ReCAPTCHA?
| | 02:09 | An example of the types of CAPTCHA image is shown.
| | 02:14 | Underneath the images are three links.
| | 02:16 | One to refresh the image if this particular one is too hard to read.
| | 02:20 | The second is a link to an audio recording to hear instead.
| | 02:23 | Click on that audio link.
| | 02:25 | ( Indistinguishable digital voice )
| | 02:54 | >> That's a great example of how garbled
most audio backups are on CAPTCHA systems.
| | 02:59 | There are no easy answers regarding CAPTCHA.
| | 03:02 | The best thing to do, of course, is to never use it.
| | 03:04 | There are other programming techniques
that you can use to try to combat spam.
| | 03:08 | Those are beyond the scope of this title, but there are
many other options out there for you to investigate.
| | 03:13 | If you must use CAPTCHA, you should provide both an audio
version and an alternate contact method as a backup.
| | 03:19 | The ReCAPTCHA system that we looked at online is a good option for
when you have to use a CAPTCHA because it does have an audio backup,
| | 03:26 | but even when using ReCAPTCHA or something similar, remember
to include a phone number on your site so that users
| | 03:32 | who still cannot get past the CAPTCHA can contact you for help.
| | Collapse this transcript |
|
|
9. Deprecated Accessibility TechniquesThe Text-Only technique| 00:00 | >> There are some accessibility techniques that
while good intentioned have proven to be ineffectual
| | 00:05 | or have even harmed accessibility in their implementation.
| | 00:09 | In this chapter we'll discuss three of those
techniques and the problems that they pose.
| | 00:13 | The first is the practice of creating text only pages.
| | 00:17 | This is an alternate version of a webpage with all
images, multimedia and formatting stripped out.
| | 00:22 | The idea is to create a second version of every page on the site.
| | 00:26 | Every page on the web site would then link to its text only
version and that would be the one with the intention that people
| | 00:32 | with disabilities would access the text only version.
| | 00:36 | Providing a text only page is mentioned in
the section 508 rules as a technique to follow
| | 00:41 | when compliance cannot be accomplished in any other way.
| | 00:46 | Alternative pages are also mentioned in WCAG 1.0, although this
guideline does not specifically state that the page must be text only,
| | 00:53 | but simply that it be an alternative that has equivalent
information and is updated as often as the original page.
| | 01:01 | But text only page present many accessibility problems.
| | 01:06 | The issue that has probably led, more than any other, to text only
pages being abandoned as an accessibility technique was the fact
| | 01:13 | that alternative pages were usually not kept up to date.
| | 01:17 | There are programming methods that can be used to automate the
creation of a text only page very time the original page is created.
| | 01:23 | But even when automated and thus kept up to date, the text on the
text only page may need to be rewritten manually because it may refer
| | 01:31 | to things that have now been stripped out of the page.
| | 01:34 | Because text only pages were rarely kept up to date, most screen
reader users grew not to trust them and stopped using them.
| | 01:41 | Also, text only pages do not address all disabilities.
| | 01:44 | As we've seen throughout this title, accessibility is
not just about making your pages usable to blind people.
| | 01:50 | A text only page may be a good alternative for screen reader users,
but it doesn't address the needs of other people with disabilities.
| | 01:58 | In fact, a text only version may actually
be more difficult for some people to use.
| | 02:04 | Another issue is that the text may not convey all of
the information that was shown on the original page.
| | 02:10 | For example, images can convey information.
| | 02:12 | And earlier, we talked about ways to make this
information known to screen reader users and other devices.
| | 02:18 | Stripping out everything but text, you may be removing
content that could be useful to people with disabilities
| | 02:25 | if you just added the accessibility features that it requires.
| | 02:29 | Also, in order to get to the text only page, the user must first go through
the inaccessible page, so if an organization is using a text only page
| | 02:38 | so that they don't have to make the rest of their site accessible, users
may never be able to find their way to the text only page to begin with.
| | 02:47 | Added on to all of these accessibility disadvantages
is also the disadvantage to you and your organization
| | 02:53 | that text only pages are very difficult and costly to make.
| | 02:57 | Again, even when automated having to make two versions of every page and
make sure that each is updated at the same time as well as making sure
| | 03:05 | that each is linked properly from the other,
can require a great deal of time and money.
| | 03:10 | All of the techniques that we have gone over in this
title should negate the need for a text only page.
| | 03:15 | So creating them is not a task that you need to or should take on.
| | Collapse this transcript |
| The Access Keys technique| 00:00 | >> Access keys are another accessibility feature that were
recommended with good intentions but have not worked well.
| | 00:08 | Access key is an HTML attribute that can
be assigned to links and form controls.
| | 00:13 | You set a letter or a number on the link or form
control in order to take the user directly there.
| | 00:18 | On Windows they're activated by pressing ALT plus the access key.
| | 00:24 | An exception to this is Firefox 2, which now
uses ALT + Shift and then the access key.
| | 00:31 | On a Mac, you press Control plus the access key.
| | 00:35 | The idea is that they can help people to navigate around the page or to
frequently access pages or form fields quickly from anywhere in the site.
| | 00:43 | But the problem with access keys is that they almost
always interfere with other programs keyboard commands.
| | 00:49 | Screen readers already use a huge number of keyboard shortcuts.
| | 00:53 | The ALT key, used with access keys on Windows, is already
used in many shortcuts for accessing browser menus,
| | 01:00 | entering characters by their numerical key code, and other functions.
| | 01:04 | Almost the only key combinations that are safe to assign because
they're not already assigned to another program are numbers.
| | 01:11 | This is what the UK government recommends.
| | 01:13 | The UK government has a set of standard access keys that
are made up of all numbers with only one letter access key.
| | 01:20 | But even if you use a key combination that doesn't interfere
with any other programs, it's unlikely that your users will know
| | 01:27 | that they have an access key that they can use and even if they do
know that they will understand how it works and if it will help them.
| | 01:36 | Finally, since access keys are defined by each individual
web developer, they are not consistent across sites.
| | 01:43 | A user who wanted to take advantage of access keys would have
to memorize a different set for every site that they used.
| | 01:49 | The UK government's standardized set of access keys helps in
this area, but this is far from being a universal standard.
| | 01:56 | The conclusion basically is that it's okay to set numbers as access keys
on your site following something like the UK government's standards,
| | 02:04 | but really access keys shouldn't be needed and
they won't necessarily be used or help your users.
| | 02:09 | We've gone over many other techniques throughout this title, such as
setting headings, lists and skip navigation links that should be sufficient
| | 02:17 | for creating accessible navigation around your site.
| | 02:20 | So if you genuinely think that access keys are necessary on your page,
it's probably an indication that you have a bigger problem that you need
| | 02:28 | to address first with more widely used and effective navigation mechanisms.
| | Collapse this transcript |
| The Tab Index technique| 00:00 | >> Tab index is an HTML attribute that
you can set on links and form controls.
| | 00:05 | You set a number indicating the order that you want those
links or form fields to be tabbed through by the user.
| | 00:11 | It's meant to help users navigate through your page in
a logical order if the source order would be confusing.
| | 00:17 | But changing the normal reading order of the
page can be very disorienting to your users.
| | 00:22 | This is especially problematic for sighted keyboard users.
| | 00:25 | They may be able to see the next link or form field on
the page and expect to be taken there when they next tab,
| | 00:31 | but instead you move them to a new spot on the page.
| | 00:34 | If they then hit shift plus tab to move backwards, they'll end up
selecting the link or form field that is immediately before the one
| | 00:41 | that they have been taken to, not the spot that they were last on the page.
| | 00:45 | So as an analogy, if they started at one and you sent them to three,
they might expect to be able to hit shift tab to go back to one,
| | 00:53 | the last spot that they were, but instead, shift tab
will take them back in the natural reading order, to two.
| | 00:58 | This is especially problematic for screen reader users.
| | 01:01 | Also, your idea of where the user should next go in
the page may not correspond with the user's idea.
| | 01:08 | They may now want to be taken to a spot further down the page.
| | 01:11 | You may think the natural reading order
is confusing when your readers may not.
| | 01:15 | Just as with access keys tab index is the sort
of feature which should never be necessary.
| | 01:20 | Using the techniques that we've talked about throughout
this title make sure that you structure your documents
| | 01:25 | so that they have a logical reading order so that users
can move through them easily and without confusion.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | >> Thanks for learning about web accessibility principles.
| | 00:03 | We've been able to build a site that incorporates a lot
| | 00:05 | of great accessibility features while still
looking and operating like a normal site.
| | 00:10 | I hope you'll use these techniques in your daily work and have
great success in making your sites as accessible as possible.
| | Collapse this transcript |
|
|
