Start learning with our library of video tutorials taught by experts. Get started

Web Accessibility Principles
Illustration by

Using Fangs and the Color Contrast Analyzer


From:

Web Accessibility Principles

with Zoe Gillenwater

Video: Using Fangs and the Color Contrast Analyzer

>> In the last movie we used the Web Developer and accessibility toolbars to make some changes to this page. I've unchecked those options now so the page is back to its default view. Now we're going to use the Fangs and Color Contrast Analyzer extensions that we also downloaded. To use Fangs you can right-click for Windows or Ctrl click for Mac on the page to bring up a context menu. Scroll down to the last option which says View Fangs. Click on that, and a new window will open. In this case, the window is blank.
Expand all | Collapse all
  1. 2m 0s
    1. Welcome
      1m 3s
    2. Using the exercise files
      57s
  2. 33m 15s
    1. What does accessibility mean?
      5m 51s
    2. How does accessibility help your users?
      3m 30s
    3. Experiencing a website via a screen reader
      5m 46s
    4. How does accessibility help you and your clients?
      3m 9s
    5. Overview of Section 508 standards
      5m 51s
    6. Overview of WCAG standards
      6m 4s
    7. Understanding consistency and semantic markup
      3m 4s
  3. 54m 31s
    1. Understanding screen readers and accessibility tools
      6m 12s
    2. Getting accessible browsers
      5m 41s
    3. Customizing Firefox for accessibility testing
      5m 53s
    4. Using custom accessibility toolbars
      5m 28s
    5. Using Fangs and the Color Contrast Analyzer
      5m 30s
    6. Accessibility tools to bookmark
      5m 53s
    7. Using automated accessibility checking tools
      4m 57s
    8. Setting up the JAWS screen reader on Windows
      6m 42s
    9. Using the VoiceOver screen reader on Mac OS X
      5m 52s
    10. Setting Dreamweaver accessibility preferences
      2m 23s
  4. 26m 12s
    1. Avoiding tables for layout
      3m 30s
    2. Using CSS for layout
      2m 40s
    3. Creating a fixed-width layout
      5m 51s
    4. Creating an elastic layout
      3m 51s
    5. Creating a liquid layout
      3m 4s
    6. Customizing a liquid layout
      7m 16s
  5. 1h 6m
    1. Specifying the language
      3m 43s
    2. Setting page titles
      2m 16s
    3. Setting headings and paragraphs
      9m 55s
    4. Styling headings
      9m 56s
    5. Hiding section headings from sighted users
      6m 41s
    6. Styling text for readability
      6m 41s
    7. Ensuring proper color contrast
      6m 36s
    8. Creating text emphasis
      4m 29s
    9. Indicating quotations
      4m 29s
    10. Creating basic lists
      4m 16s
    11. Styling lists
      7m 15s
  6. 1h 15m
    1. Using lists for navigation
      6m 45s
    2. Creating a horizontal navigation bar
      13m 25s
    3. Creating a vertical navigation bar
      11m 44s
    4. Adding skip navigation links
      12m 0s
    5. Hiding skip navigation links
      6m 17s
    6. Proper link text and title attributes
      6m 11s
    7. Opening new windows
      4m 28s
    8. Accessibility limitations of fly-out menus
      6m 30s
    9. Creating an accessible fly-out menu
      8m 38s
  7. 27m 55s
    1. Proper ALT text for navigation images
      4m 57s
    2. Proper ALT text for decorative images
      5m 19s
    3. Adding ALT text to an existing site
      6m 9s
    4. Adding ALT text to image maps
      5m 58s
    5. Describing complex graphics
      5m 32s
  8. 34m 1s
    1. Using tables for data
      3m 0s
    2. Creating header cells
      4m 5s
    3. Adding table captions and summaries
      9m 9s
    4. Styling tables
      5m 19s
    5. Applying header cells to complex tables
      6m 52s
    6. Adding id and headers attributes
      5m 36s
  9. 42m 7s
    1. Understanding form accessibility issues
      3m 7s
    2. Labeling form fields
      6m 9s
    3. Adding fieldsets and legends
      4m 42s
    4. Moving forms out of tables
      3m 44s
    5. Cleaning up a form's appearance
      4m 53s
    6. Aligning labels and fields using CSS
      9m 39s
    7. Indicating required fields
      6m 15s
    8. Dealing with CAPTCHA
      3m 38s
  10. 7m 29s
    1. The Text-Only technique
      3m 21s
    2. The Access Keys technique
      2m 35s
    3. The Tab Index technique
      1m 33s
  11. 18s
    1. Goodbye
      18s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Web Accessibility Principles
6h 10m Appropriate for all Oct 16, 2007

Viewers: in countries Watching now:

Accessibility on the web has been an issue for over a decade, and it remains a crucial--but often overlooked--element of web design. Instructor Zoe Gillenwater explains the concept of accessibility as it applies to the web, and describes how it affects the audience. She also covers how to set up accessibility testing, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS. Exercise files accompany the tutorials.

Topics include:
  • Understanding Flex programming languages
Subjects:
Web User Experience Accessibility
Author:
Zoe Gillenwater

Using Fangs and the Color Contrast Analyzer

>> In the last movie we used the Web Developer and accessibility toolbars to make some changes to this page. I've unchecked those options now so the page is back to its default view. Now we're going to use the Fangs and Color Contrast Analyzer extensions that we also downloaded. To use Fangs you can right-click for Windows or Ctrl click for Mac on the page to bring up a context menu. Scroll down to the last option which says View Fangs. Click on that, and a new window will open. In this case, the window is blank. It shows no text.

This is a common problem when you first install the Fangs extension. Close this window. And we're going to go to the web page where we downloaded the Fangs extension. We're at www.standards-schmandards.com/projects/fangs/faq. The first question on this page asks about what to do when the output is blank, which is the problem we just experienced. What we need to do is change some preferences in Firefox is the about config screen.

Open a new tab in Firefox and in the address bar type about:config and hit Enter or Return. A number of preferences are shown on the page. We need to add the two that were listed on the FAQ. Go back to the FAQ page. Select the first preference name, and use Ctrl C or Cmd C to copy that text. Also note that the value that we're going to set for this preference is E N. Go back to the about config tag and right-click or Ctrl click to bring up a context menu.

Select New and then click on the String option. In the dialogue box that appears use Ctrl V or Cmd V to paste in the text that you copied from the FAQ page. Click OK, and the next dialogue box that says enter string value, type in E N. And click OK. Now we need to set the other preference. Go back to the FAQ page and select the name of the next preference. Use Ctrl C or Cmd C to copy it, and note that the value that we need to set is default.

Go back to the about config tag, right-click or Ctrl click, select new, and select string. Use Ctrl V or Cmd V to paste in the preference name. Click OK, then in the next box type default and click OK. We can now close this tab as well as the tab for the FAQ. We're now back on the page we want to test.

Once again, right-click on the page or Ctrl click on a Mac. Scroll down and select View Fangs. This time when the new window opens up you'll see that it's full of text. The text that is shown emulates what Jaws, a popular screen reader, would read out to its users. 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. There are also additional tabs to view a headings list, and in this case we can see that the page has no headings.

We can also click on the third tab to see the links list. This will show us the text of all the links on the page. In a later movie we'll show how to use Jaws and why the headings list and the links list are so important. You can use Fangs to quickly see if you have headings marked up correctly, what your link text is, if it's understandable, and the order of the text output on the page. Close the Fangs window now. The next thing we want to analysis on this page is its color contrast using the extension that we downloaded. Right-click or Ctrl click on the page again, and select Color Contrast Analyzer.

Then click on the All Test option. A new tab will open up showing the results of your test. It analyzing the text color and background color of all of the text elements on the page and lists them down the report. Any elements that do not pass WCAG guidelines will be highlighted in yellow. For instance, this first piece of text, which is yellow and red, is passing in the luminosity contrast ratio column. It also passes the difference in brightness test. But the last column on the page shows the difference in color results and states that it fails.

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. 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. Next we're going to look at some online tools that you can use as well.

There are currently no FAQs about Web Accessibility Principles.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Accessibility Principles.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.