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

Web Accessibility Principles

Creating a vertical navigation bar


From:

Web Accessibility Principles

with Zoe Gillenwater

Video: Creating a vertical navigation bar

>> Up until this point, our example site has had nothing in the side bar except for the hidden section navigation heading. Let's add that section navigation menu now. We'll once again use a list and style it using CSS to appear like any other vertical menu. Let's continue working on the same page, visitors.html, in Dreamweaver. If you're using the exercise files, this page is saved in the 05_03 folder of the chapter five exercise files. We also need to open the file sectionnav.doc from the chapter five exercise files folder.
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

Creating a vertical navigation bar

>> Up until this point, our example site has had nothing in the side bar except for the hidden section navigation heading. Let's add that section navigation menu now. We'll once again use a list and style it using CSS to appear like any other vertical menu. Let's continue working on the same page, visitors.html, in Dreamweaver. If you're using the exercise files, this page is saved in the 05_03 folder of the chapter five exercise files. We also need to open the file sectionnav.doc from the chapter five exercise files folder.

Go to that Word document now. This is the list of links that we're going to add to our vertical menu. Select all of the content in the page. Hit control C or command C to copy the text. Go back to Dreamweaver and open visitors.html page. 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. Let's go into code view to make sure the list pasted properly.

Click on the code button in the document tool bar. Scroll up so that you can see the entire HTML. Again, we have an unordered list with a series of list items. Once again, an extra UL element has been pasted in, so just delete this line. 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 to make sure that they always stay grouped together in case we later add more content into this side bar below the section navigation.

Place your cursor before the opening H2 tag and hit enter or return to create a new line, type an opening

. Now let's put in the
after the . Hit enter or return to go to a new line. As you begin typing
and put in the slash, Dreamweaver will finish the closing tag for you. Now let's go back into design view by clicking on the design button in the document tool bar.

We need to create the links on each of these items. Highlight over history of Wardscott. In the link field of the properties inspector, type history.html. Highlight over where to stay and for the link type stay.html. Highlight over what to do and see and for the link type see.html. Highlight over where to eat and drink and for the link type eat.html.

Highlight over how to get here and for the link type gethere.html. Finally, highlight over visitor's bureau and for the link type bureau. Now we can begin adding styles to the div, the list and the links. Click on the new CSS rule button at the bottom of the CSS styles panel. Leave advanced selected for the selector type. Clear out the default text in the selector field and type #sectionNAV.

Leave this document only selected for the define in option and click okay. First let's set the margin and padding of this DIV. Click on the box category. Under padding uncheck the same for all box. In the top field enter 20, in the right enter zero, in the bottom field enter 14 and in the left enter zero. Leave pixels set as the unit of measurement for all of these fields.

Uncheck the same for all box under margin as well. 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. The margin gives us space around the DIV on each side. The passing gives use space inside the DIV. Now click on the background category. Click inside the background color field and type #EEF0E3.

We're also going to set a background image so click on the browse button beside the background image field. In the select image source dialogue box, browse to the location of the chapter five exercise files on your computer, click on the 05_03 folder then on the images folder, select the sectionNAV_bg image and click okay. Back in the CSS rule definition dialogue box, choose repeat X from the Repeat menu. In the Vertical Position menu, choose bottom.

Now click okay. We now have a block for our section navigation menu. In order to make this menu appear as if it's coming directly out of the bottom of the mainNAV bar, let's remove the top padding that is currently set on the side bar DIV. In the CSS styles panel, scroll up in the all rules pane, select the sidebar one rule. In its properties, shown below, click on the padding declaration, then click on the trash can item at the bottom of the panel to remove all of the padding.

Now the section navigation DIV is starting directly at the top of the sidebar. Let's continue styling the list and the links. Click on the new CSS rule button at the bottom of the CSS styles panel. Keep advanced selected as the selector type. Clear out the default text in the selector field and enter #sectionNAV UL. Click okay. Click on the box category in the CSS rule definition dialogue box.

Leave both of the same for all checkboxes checked and enter zero for both the top fields. We're just removing the default list spacing. Click okay. Next, click on the new CSS rule button at the bottom of the CSS styles panel again. Leave the advanced selector type chosen and in the selector field, clear out the default text and type #sectionNAV LI. Click okay.

Go to the box category, again leave the same for all checkboxes checked under both margin and heading and enter zero in both top fields for margin and heading. Next, click on the background category. You want to remove the default background image of the flower bullet from this particular list. So click inside the background image field and type none. This will override the previous style and get rid of that image from this list. Finally, click on the border category.

Uncheck all of the three same for all checkboxes. In the bottom field under style, select the menu and choose solid. In the bottom field under width, enter one and leave pixels selected as the unit of measurement. And in the bottom field under color, type #D5DDDD. Now click okay. Next, let's add a style for the links themselves.

Click on the new CSS rule button at the bottom of the CSS styles panel. Leave advanced selected as the selector type. Clear out the default text in the selector field and enter #sectionNAV A. Click okay. As with our horizontal menu that we made earlier, we want the full area of each link to be clickable, not just its text. So click on the block category, in the Display menu click the arrow and scroll down to select block as the option.

Now let's add some spacing between the links. Click on the box category. Uncheck the same for all box under padding. For top enter 4, for right, 10, for bottom 2, and for left 16. Leave pixels selected as the unit of measurement for all of these fields. Finally, click back on the type category. In the color box type #257483.

Then check the none box under decoration. Now click okay. Our last step will be to add rollover effects as we did with the horizontal navigation bar. Click the new CSS rule button at the bottom of the CSS styles panel. Leave advanced selected as the selector type and clear out the text within the selector field. Type #sectionNAV A:hover, #sectionNAV A:focus, #sectionNAV A:active. As we talked about earlier, this makes the rollover effect work for both mouse users and keyboard users.

Leave this document only selected and click okay. This time, instead of changing the background color for the rollover, we'll change the text color. Click in the color field and type #272910. Now click okay. Let's preview the page in a browser to see how it will work.

Click on the globe icon in the document tool bar and choose preview in Firefox. When asked to save the changes to the page, click yes. Try moving your mouse over the items in the left navigation menu. You can see the color change, but let's also try tabbing to them. First we're going to have to tab through all of the links in the main navigation bar.

So hit tab on your keyboard until you move to the first link in the section navigation menu. You'll see a dotted outline around the first link and the text color will change. If you continue to hit tab, you'll move through each of these links in order. Close Firefox and lets again check this page in Internet Explorer. Click on the globe icon in document tool bar and choose preview in IExplore. This time there are not problems with the menu in Internet Explorer.

It looks and works the same as it did in Firefox. So we've learned how to style a list to look both like a horizontal NAV bar and a vertical menu. We've been using lists in this way because they're the correct semantic markup for a series of links and provide additional structure to help screen reader users skip sections of the page they aren't interested in. Another important tool to help screen reader users get to the content they want quickly is the skip navigation link. We'll talk about that next.

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