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

Accessibility limitations of fly-out menus

From: Web Accessibility Principles

Video: Accessibility limitations of fly-out menus

>> 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. This is the menu where each of the items displays a submenu of links when you hover over the item using your mouse. 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 and they decrease the number of clicks it takes to get to a page buried in the site. Whatever the reason a fly out menu is chosen over a traditional menu, they pose a number of accessibility problems.

Accessibility limitations of fly-out menus

>> 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. This is the menu where each of the items displays a submenu of links when you hover over the item using your mouse. 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 and they decrease the number of clicks it takes to get to a page buried in the site. Whatever the reason a fly out menu is chosen over a traditional menu, they pose a number of accessibility problems.

This is another topic that overlaps heavily with usability, so we'll focus just on the issues with fly out menus that cause particular problems for people with disabilities. One problem is that they require a lot of fine motor control in order to operate them properly. 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 to close or to trigger another item that you didn't want. It's especially hard to use vertical fly out menus where the menus appear to the right of each item. Another problem is the huge number of links that are in fly out menus.

Screen readers and keyboard users will have a huge amount of content to tab through. Skipped navigation links can help them get past the fly out menu, but what about when the user doesn't want to skip it, but wants to get to an item in it. 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. It's also worth noting that the huge number of links you're adding to each page with a fly out menu will increase your page weight, download times and bandwidth usage. It can also negatively impact your search engine rankings by lowering your keyword density and moving your main content further down the page.

Another accessibility problem with these menus is that the sub menus may appear outside the visible range of the user's device. This is especially true if the user has a very narrow window or if they're using a screen magnifier and they're only seeing a very small area of the screen at one time. 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 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.

Finally, many menus are not designed to work without a mouse, JavaScript, or CSS. There are ways to make a fly out menu that will work without a mouse, JavaScript or CSS, but these menus are even more complicated to produce than other fly out menus. Again, this may be an area where you have to compromise some degree of accessibility in order to meet other site requirements. If that's the case, it's important to test any menu system t5o make sure that it works at least in these four basic scenarios for minimum accessibility.

The first scenario is using a mouse with JavaScript on. This is basically what all fly out menus are designed to work with, so you shouldn't have any problems here. 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 and that should show the submenu for that link, which they can then tab through as well. The third scenario is using a mouse with JavaScript off. 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.

Or the menu should be expanded by default to show all of the lengths. The fourth scenario is using a keyboard with JavaScript off. Here the user should be able to tab to the top level links, but not the sub menu links. This is because without JavaScript, the submenus will not show then they tab to the top level links. That means they'll be tabbing through invisible links and will not know what they currently have selected. Another option is for the menu to expand to show all of the links. If you're following along with the exercise files, open the page spry-menu.html in Firefox that's located in the 08_08 folder of the chapter five exercise files.

This is a fly out menu created with Dreamweaver CS3s spry menu widget. It creates all of the CSS and JavaScript for you. Let's see how it holds up to our four scenarios. The first was using a mouse with JavaScript on and it of course works in this scenario. The second was using a keyboard with JavaScript on. So hit the tab key on your keyboard. The first top level item in the list is highlighted. Hit the tab key again. Now none of the links are highlighted. 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.

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. Hit tab three more times on your keyboard. Finally on the last tab, we're back to item two being highlighted. 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. You can see how confusing and frustrating this would be for a keyboard user. So already the spry menu has failed. Let's continue testing the next two scenarios.

The third was using a mouse and JavaScript off. In Firefox, we can use the web developer tool bar to turn off JavaScript temporarily. Click on the disable button in the tool bar, select disable JavaScript and then all JavaScript. Now when we mouse over the items, you can see that the sub menus do not display. This is fine as long as each of the top level links goes to a real page with all of the same links that the sub menu would have contained on it for the user to choose from. However, web designers often don't create these pages and don't link the top level links to anything, instead just using them to trigger the sub menus.

If that was the case here, again the menu would fail. Finally with JavaScript still off, let's use the tab key again to see if we can tab through the menus. Hit tab on your keyboard. Our focus last time was on item two in the menu, so it picks up from there. We now have item three selected, but hit tab again. Once again we've tabbed on to an invisible sub menu item. The menu works exactly the same with JavaScript on or off and is still just as inaccessible to keyboard users in either state. So you can see that there are a number of serious accessibility problems that fly out menus pose.

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 in the base scenarios necessary for a minimum level of accessibility. 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.

Show transcript

This video is part of

Image for Web Accessibility Principles
Web Accessibility Principles

68 video lessons · 25680 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.