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

Creating an accessible drop-down menu

From: Improving SEO Using Accessibility Techniques

Video: Creating an accessible drop-down menu

Drop-down menus are a frequently used tool on the Web. They are easy to design, they de- clutter the page, and they allow you to jam a lot of menu content into a small space. Unfortunately, they're also hard to access unless you're using a mouse. This used to be a problem only for people who navigated websites with a keyboard. But it's increasingly becoming an issue for people who navigate websites with other devices, such as phones and tablets, because neither have the hover state of the mouse. Nevertheless, if you want to make a drop- down menu, you have to make sure you at least make it accessible.

Creating an accessible drop-down menu

Drop-down menus are a frequently used tool on the Web. They are easy to design, they de- clutter the page, and they allow you to jam a lot of menu content into a small space. Unfortunately, they're also hard to access unless you're using a mouse. This used to be a problem only for people who navigated websites with a keyboard. But it's increasingly becoming an issue for people who navigate websites with other devices, such as phones and tablets, because neither have the hover state of the mouse. Nevertheless, if you want to make a drop- down menu, you have to make sure you at least make it accessible.

That means when people use a keyboard, they should be able to get access to the sub-elements of the drop-down menu. To do so, you have to tap into some simple JavaScript. Fortunately, all the heavy lifting has been done for you in the form of a solution called Superfish, which is an accessible version of the Suckerfish drop-down menu. Before I show you how to get it and how to integrate it into your page, let me just say this. I don't think drop-down menus are a very good idea, and here's why. They're a remnant of a Web that no longer exists.

If you want good navigation, there are better ways of doing it. That said, in some situations you have to build a drop-down menu. If you do, you also should always make it accessible. And I'll show you how to do exactly that. In our example site, we currently have a single-level menu. It's right at the top here and it has just one level of content. But what if we wanted to add a drop-down, let's say to this Flowers button, and make it into Products, and then it would drop down to say Flowers, Plants, Trees, and whatever.

There are several steps to this process. First, we have to make the actual menu items themselves. And that's done in the markup. So I'll go to my example project, open the index page, find my menu, and then add some new menu items. I said I wanted to change the Flowers menu item to be Products and then add new items underneath it. So I'll go in here and change the Flowers one first, to Products, and then I want to add more menu items.

So what I'm going to do is extend that list item and create a new unordered list underneath it. I'll just close my unordered list two, so that I know I won't break anything. And then inside here, I can now make new list items with the new menu items. Just so you see what's going on here, we have an unordered list with list items in it, and then within the second list item, there's a new unordered list with its own list items.

This is how a structured drop-down menu works. It's a nested menu within a menu. Now I need to make the actual menu items. So I'll just follow the same structure I have up here. I'll start with an anchor and then an href and then a title, I'll close the anchor, and then say Flowers. And then I'll just copy this line, and make another item and another item, and then the second one will be Plants, and the third one will be Trees.

I'll save this and reload my page in my browser, and you'll see everything now breaks. That's because right now all the list items are using the same styles. And the styles currently say that each unordered list is on its own line, which means the first unordered list is up here. And then we have a new unordered list that breaks everything, and then we have the continuation of the first one down here. To fix this and make the drop- down work, we need to use some CSS. Now this is not a CSS course, so I prepared the file for you to make this happen.

You can go in and dissect it later if you want to. If you go to the Exercise Files for this lesson, you'll find a single file called stylesDropDown, so just copy that one and dump it into your folder. And then we'll go back to our index page and call that new style sheet. So I'll copy the styles.css call, and add the new call underneath it. This is really important, because we want to call the drop-down styles after the styles, because the drop-down styles will override the other styles.

We'll call the stylesDropDown, save it, and now when I reload my page, you'll see that the menu has shifted to the left. And when I hover over Products, we get a drop-down menu. But this drop-down menu is not currently very accessible. It's kind of finicky, and more importantly, if I use the Tab key on my keyboard, I can't access it. I'll show you just that. If I hit the Tab key, I can access the main menu items.

But when I get to the drop-down section, I can't see what I'm opening. I'm now surfing the web blind. I can't see the menu item I'm currently focusing on. And that's because I was using CSS to activate the drop-down menu and I was using the hover state. But since the keyboard doesn't use the hover state but the focus state, I can't get that top menu item to open. This is where the JavaScript comes in. I need to add JavaScript to make this menu item open, so I can see what I'm focusing on.

The issue of drop-down menus and accessible drop-down menus has been a challenge for web developers for a long time. In 2003, Patrick Griffiths and Dan Webb published an article called Suckerfish Dropdowns on A List Apart. And it has become the de facto standard for how to make CSS drop-down menus on the web. There are many versions of the Suckerfish menu available, but after a lot of research, I found that the most accessible one is one called Superfish. The Superfish menu is built around accessibility and activates keyboard accessibility to your drop-down menus.

It's also very easy to implement, and I'll show you exactly how to do it now so you can use it for this website and for all future websites you build. To get the Superfish menu, simply click Download & Support and download Superfish. I'll extract this to my Desktop, so I have it for future reference, and then I'll take a look at what's in here.

If I open the Superfish file, you'll see there's a file called example here, and I can open that in my browser and see how the Superfish menu works. It's a rather advanced menu and it has a lot of styling and functionality options. But what I want to do is just use the most basic options available. So I'll open this example file in Notepad to see how the code works. And what I very quickly see is that there's some JavaScript here from Line 8 to Line 18. And that's really all I need to make my menu work.

So I'll copy that JavaScript out and paste it in the head tag of my site. So I'll make a comment here so I know what it is, and then I'll paste in the JavaScript. And I'll do some quick cleaning of the code, because I'm a very tidy coding person. And now I need to add these JavaScript libraries to my site so that I can call them, and you see there are three of them.

There's the standard jQuery library, there's a library called hoverIntent, and there's one called Superfish. So if I go back to the Superfish folder, I see there's a folder called js. And under here we have five libraries, of which I need three. So I'll open My Accessible Site, create new folder call it js, and then copy in hoverIntent, jquery, and superfish. There is one final step.

If you look at the code we copied in, you'll see there's a JavaScript function that comes along with these calls to the JavaScript libraries. It's down here. All it does is it creates a new function and then does something to a certain element on the page, in this case, an ordered list with a class sf-menu. The problem is, our menu doesn't have the class sf-menu. If we scroll down, you'll see that our menu has an id and it's main-menu. So what I want to do is change that, so I'll change it so it says ul# for ID, main-menu.

What this function does is it appends the Superfish function to whatever item you point to. So in this case, we're appending the Superfish function, which is that accessible drop-down, to the main menu item. And that's exactly what we want. So now if I save the index page with my new JavaScript libraries and reload this page in my browser, you'll see two things happen. First of all, my Products button now has a small little arrow on it indicating that there's something underneath it.

And you see that, when I hover over it, there's a slight animation and delay on the menu items. And when I use my Tab key to navigate the page now, it opens the drop-down menu and I can see what I'm doing. And that's kind of the whole point. Now I can actually use my drop-down menu with my keyboard. What you're seeing here is the most basic functionality of the Superfish menu. The Superfish menu is very advanced and it has a lot of different types of menus you can build and a lot of different functionality with a lot of different styling.

You can experiment with the files that I've given you or you can experiment with the files that come from the Superfish library and see how far you can get with it. It's very powerful and it's something that you should learn how to use, so you can implement it on all of your sites. If you have to have a drop-down menu on your site, make sure it's accessible. It's easy to test to see if your menu is accessible. Simply use the Tab key on your keyboard and see if it opens the submenus. With the help of JavaScript libraries like Superfish, it becomes easier to build proper drop-down menus, but now your drop-down menus rely on JavaScript to function.

And not everyone has a browser that supports JavaScript. In fact, a lot of browsers have blocked JavaScript for various reasons. If that's the case, the accessibility part of this menu will not work. It's a catch-22 of epic proportions and unfortunately, there is no good solution to this problem, except not using drop-down menus to begin with.

Show transcript

This video is part of

Image for Improving SEO Using Accessibility Techniques
Improving SEO Using Accessibility Techniques

30 video lessons · 11084 viewers

Morten Rand-Hendriksen
Author

 
Expand all | Collapse all
  1. 3m 3s
    1. Welcome
      1m 4s
    2. Using the exercise files
      1m 59s
  2. 8m 16s
    1. Accessibility and SEO: A primer
      4m 58s
    2. Understanding the benefits of accessibility and SEO
      3m 18s
  3. 11m 26s
    1. Experiencing an inaccessible web site
      6m 4s
    2. Experiencing an accessible web site
      5m 22s
  4. 16m 28s
    1. Evaluating screen readers for Windows and Mac
      5m 56s
    2. Installing browser development tools
      4m 8s
    3. Pretending to be a screen reader
      6m 24s
  5. 7m 40s
    1. Installing SEO tools
      2m 30s
    2. Understanding how search engines search a page
      2m 45s
    3. Comparing sites that are SEO-friendly with ones that are SEO-unfriendly
      2m 25s
  6. 44m 6s
    1. Defining a language for a page
      5m 4s
    2. Defining meta headers for a page
      6m 10s
    3. Creating better semantic markup with HTML5
      3m 13s
    4. Using and hiding section headings
      4m 56s
    5. Creating content hierarchies with heading tags
      5m 29s
    6. Emphasizing content in paragraphs
      5m 36s
    7. Making accessible block quotes
      3m 22s
    8. Using some new HTML5 tags
      4m 47s
    9. Using ordered and unordered lists
      5m 29s
  7. 22m 17s
    1. Marking up links properly
      6m 48s
    2. Marking up images
      7m 23s
    3. Creating a proper image header with CSS
      8m 6s
  8. 32m 43s
    1. Creating an accessible menu with an unordered list
      6m 16s
    2. Creating and hiding nav headings and skip navigation links
      6m 59s
    3. Giving navigation links proper focus with style
      4m 39s
    4. Creating an accessible drop-down menu
      10m 46s
    5. Scrapping drop-down menus for better options
      4m 3s
  9. 3m 44s
    1. Next steps
      3m 44s

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 Improving SEO Using Accessibility Techniques.

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.