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

Web Accessibility Principles

Moving forms out of tables


From:

Web Accessibility Principles

with Zoe Gillenwater
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

Video: Moving forms out of tables

>> 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. This applies to our form as well. When we talked about avoiding tables for layout, we discussed how it's acceptable to use the table if it linearizes well and you don't have other options, so it's not imperative that you switch the form over to CSS layout. However, if you do keep a form inside a table for layout, do not add any of the table accessibility features we talked about in the previous chapter, such as TH header cells to your layout table.

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

Moving forms out of tables

>> 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. This applies to our form as well. When we talked about avoiding tables for layout, we discussed how it's acceptable to use the table if it linearizes well and you don't have other options, so it's not imperative that you switch the form over to CSS layout. However, if you do keep a form inside a table for layout, do not add any of the table accessibility features we talked about in the previous chapter, such as TH header cells to your layout table.

However, if you do keep a form inside a table for layout, do not add any of the table accessibility features we talked about in the previous chapter, such as TH header cells to your layout table. These should only be used by data tables. 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 out to the user accordingly, so always keep layout tables marked up with plain TD table cell elements and no other special HTML markup. Laying out your form with CSS is still the more accessible option.

Remember that CSS layouts can adjust more easily to different devices and user settings, while tables remain stuck in rigid grids. Someone using a very narrow screen or only viewing a small area of the screen at a time with a screen magnifier may have a harder time filling out a table based form. To layout our form with CSS, we'll first group each labeled field pair. We'll use a list to do this as this form really is a list of questions. If you're following along with the exercise files, open departments.html in the 08_04 folder of the chapter eight exercise files.

We're going to add an ordered list, one to each field set. We're going to have to start this out in code view because Dreamweaver won't let us use the ordered list button on the properties inspector inside a field set, but while still in design view, click inside the first set so that we'll go to the correct spot in the code when we switch over. Now click on the code button in the document tool bar. Your cursor should be after the first closing table tag. 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, then type in an opening LI tag, and then close the OL tag.

Now click on the design button of the document tool bar. You'll see the number one and our bullet flower image. Now we can start pulling the labels and form fields out of the table into our new list. Click on the name label. 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 over the highlighted name text and click and drag it down beside the one and the bullet flower image then click on the input field that went with the name label. Click and drag this down beside the name label.

Place your cursor after this input field and hit enter to start this next list item. Click inside the email label then click on the label tag in the tag selector. Place your mouse back over the highlighted email text and click and drag it down into the second list item them click on its field and drag it down beside the email label. We'll continue doing this for the rest of the table. Now all of the fields are in the list. Click anywhere inside the table then select the table tag showing in the tag selector then hit delete on your keyboard.

We can repeat this process for each field set so that each labeled field pair in an ordered list. This gives the form a more semantic HTML structure. Although it doesn't look that great right now, it's still quite clear what label goes with which field. Fortunately we can use CSS to improve its appearance for sighted users.

There are currently no FAQs about Web Accessibility Principles.

Share a link to this course
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.

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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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