Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding skip navigation links

From: Web Accessibility Principles

Video: Adding skip navigation links

>> Both section 508 and WCAG guidelines recommend providing a way for users to skip over groups of links. Sighted users can scan the page with their eyes to find the information that they want quickly. Users with screen readers and other assisted devices do not have this visual scanning ability they are going to have to hear the logo and navigation read out to the each time they access another page in our site. We've seen that grouping links into list can make it easier for screen reader users to jump pass an entire nav bar.

Adding skip navigation links

>> Both section 508 and WCAG guidelines recommend providing a way for users to skip over groups of links. Sighted users can scan the page with their eyes to find the information that they want quickly. Users with screen readers and other assisted devices do not have this visual scanning ability they are going to have to hear the logo and navigation read out to the each time they access another page in our site. We've seen that grouping links into list can make it easier for screen reader users to jump pass an entire nav bar.

However not all screen readers maybe familiar with this function if it is even exist in there screen reader. The voice over screen reader on the MAC doesn't currently announce list or offer any special way to jump past them. The inability to skip repetitive links can also be a problem with mobility impairments who use the keyboard to navigate instead of a mouse. 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 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.

So this is where what is called a skip navigation link comes in. 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. When a user encounters this link he or she can follow it directly to the content or ignore it if he or she wants to use the nave bar or the other content at the top of the page. If your following along with the exercise files open visitors.html in Dreamweaver from the 04 05 folder in the chapter 5 exercise files, we are going to add a DIV with skip navigation links in it at the top of our page.

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. In the insert DIV tag dialog box click on the arrow of the insert menu and choose after start of tag and then in the adjacent menu select DIV ID header, this will place out new DIV immediately inside the top of the header DIV. 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, leave the default text that Dreamweaver puts in the selector field a pound sign and then skipLINKS intact and also leave this document only selected for the define in option, click okay.

The only change we are going to make at this point is positioning the DIV. We're going to give it a value of absolute. 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 out of the flow so that it doesn't interfere with any of the content around it. 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. 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.

We're back at the insert DIV tag dialog box. We've already chosen the settings for this DIV so click okay. The DIV is now added to the top of the page with placeholder content. It didn't move the logo down because it is absolutely positioned. We now need to add our links inside this DIV, if you are using the exercise files open document skipLINKS.doc in Word. There are actually two skip navigation links listed in this document. One is going to skip the user directly to the main content.

This is where the user might want to go most of the time. But they may also want to go straight to the section navigation if they are looking for a particular link. So we're also going to offer them a skip to section navigation link. Both of these links will let them bypass the main navigation bar. 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. Highlight over the placeholder in the skipLINKS DIV and hit control V or command V on your keyboard to paste in the new content.

Now click on the code button in the document tool bar. We want to make sure that the content pasted in correctly. We do have a list and two list items as we wanted. But again we have an extra UL tag at the start, so delete this line of HTML. Now click on the design button in the document toolbar. 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. We don't need to create new anchor elements on the page to do this. Instead we can link directly to any ID attribute on any page.

Our main content DIV has an ID of main content set on it. So in order to jump to that DIV all we need to do is link to that ID. Highlight over the text, skip to main content. 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 from having to add an additional HTML element to our source.

Now highlight over the skip to section text in the skipLINKS DIV. in the link field of the properties inspector type #sectionNAV this will jump us directly to the section DIV inside the side bar. Now we can begin styling these links. 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 in the selector field, type in #skipLINKS UL click okay.

In the CSS rule definition dialog box chose the box category. Leave the same for all boxes checked under both padding and margin and enter zero in the top fields for both of these. Now click ok. Next let's style the list items, click on the new CSS rule button on the bottom of the styles panel. Leave advanced selected at the selector type and clear out the default text in the selector field, type #skipLINKS LI leave this document only selected and click okay.

We want each of the list items to sit side by side instead of stacked on top of each other. 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. So another option is to set the display property to inline. 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. 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.

Next go to the box category, leave the same for all box checked under margin and enter zero in the top field. For padding uncheck the same for all box. 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 between them, we'll add it on the left side of each list item. In the left box under padding type .5 and in the unit menu next to that field select em's, 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.

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. Next let's style the links, click on the new CSS rule button on the bottom of the CSS styles panel. Leave advanced selected at the selector type and clear out the default text in the selector field, type #skipLINKS A leave this document only selected and click okay.

All we are going to do here is change the color from the default blue to white so click on the color picker next to the color field and chose white then click okay. 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. Right now there position is conflicting with the photo we have in the header. 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. In order to position the links relative to the header we first need to set a positioning value on the header itself.

In the CSS styles panel scroll up in the all rules pane select the header rule. Click on the add property link in the property pane, type in position and in the field next to it and select relative, this tells any elements that are within the header and that are absolutely positioned that they should base their positioning off of the header not off of the body tack.

Now we can edit the rule for the skipLINKS DIV to change its positioning. Scroll down in the CSS styles panel in the all rules pane and select the skipLINKS rule, click on the add property link, type right and in the field next to it type 10 and in the final field select pixels as the unit of measurement. When you hit enter to accept the style you will see the skip navigation links jump over to the right side of the screen.

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. Now the links jump to the bottom to the header DIV, we may also what to make their text size a little smaller. 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.

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. 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. Let's see how they work by previewing in a browser. Click on the globe icon in the document toolbar and choose preview in firefox. Click yes to save the changes to the page. 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.

So these skip navigation links add yet another way for users to get around the page quickly without annoyance and frustration. Many people are hesitant to by them however because they don't like how they appear or they are retrofitting an existing page and don't have a good place to put them at the top of the page without drastically changing the design. It is possible to hide skip navigation links from sighted users view in certain conditions. So we'll talk about the implications of this as well as how to do it next.

Show transcript

This video is part of

Image for Web Accessibility Principles
Web Accessibility Principles

68 video lessons · 25705 viewers

Zoe Gillenwater
Author

 
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

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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 "Already a member? Log in

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

Your file was successfully uploaded.

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.