Join Morten Rand-Hendriksen for an in-depth discussion in this video Creating an accessible menu with an unordered list, part of Using Accessibility to Improve SEO.
Good navigation is vital for a website to work properly. If the user can't figure out how to navigate the website and get to the different sections, the site is basically useless. Website navigation usually takes the form of menus, and these menus can be created in many different ways. However, if you're coding with accessibility and SEO in mind, there's really only one way to do it right: all menus should be lists. If you think about a menu, it's really a list of links that point to something else.
Therefore, using a list to create a menu is quite logical. However, in the past, creating a list that displayed horizontally for instance was complicated, so therefore people used other means to create menus. But today there's no reason to do that. In fact, not using lists doesn't make any sense at all, because it's much easier to create navigation with lists than without them. The accessibility benefit of using lists for menus is that once you turn the Styles off, a list will display as a bullet or numbered list.
Therefore, they're easy to parse for the person visiting the site, even if they can't see the styling around it, and it's obvious that this is a list of links, rather than just a cluster of links. The SEO benefit is similar. Once you put menu items into a list, a search engine will see these menu items as a group and handle them accordingly. That means a search engine will pretty much understand that this is a menu and then treat these menu links with the attention they deserve.
If you've been following this course, and you've been making your own site based on the exercise files, this is the time to go grab the exercise files for this movie and pull them into your project, because I've made some subtle changes to the HTML and CSS, just to clean it up a bit. If you want everything to match exactly with what I'm doing, you have to move these files over, but if you don't care, you can just continue with the files you have. It's up to you. Going in and looking at the index.html file in the Notepad, you'll see we already have a set of lists, we have these menus.
We have the Main Menu, we have three sidebar menus down here, and we have a footer menu. Let's say I want to add a new menu at the top of my site. I can then create new menu using a list. So first I have to create a new widget, because that's how I structured my site, so I'll basically just copy what's down here. Because I'm using HTML5, I want to wrap all my menus in a nav element, telling the browser, this is navigation.
So I'll start with a nav tag and provide an ID, so I'll call this one firstWidget. And then I can also give it the class="widgets," so that all the styles that are applied to the other widgets are applied to this widget too, and then I'll close my nav tag, so that I don't forget it later. Inside my nav tag I can now add a list for a menu or a heading or both. In this case, I only want the menu, so I'll just start a new list.
I'll start an unordered list, and then close the unordered list. And inside here, I'll have all my list items that will become the menu items. So I'll start with creating a new list item and close it, and then inside that list item I want to put the menu items I'm going to use. So I'll create a menu item called Menu item 1, and then I'll create a new list item and call it Menu item 2. Then I'll create a third one and call it Another menu item.
When I save this and I open the site in my browser, as you now see a new menu on the side, as you can see right here, that displays as a list. Now you'll notice that none of the styles from the menu below carry over. That's because the styles that styled this menu to look the way it does are actually attached to the anchor tags, not to the list tags. That's because when I designed this site, I wanted it to be so that I didn't have to click on the text itself to go to the link, I just needed to hover the mouse anywhere inside the area that that menu item contains.
So to trigger these effects we need to add an anchor tag to each of our menu items. So I'll simply go in here and inside the list item, I'll create an anchor item, set the href to pound for now. Then it points to the current site. And give it a title, and I'll just say Menu item 1. And I'll close the a tag on the other side, save it, and now I can test that one Menu item to see if it works, and it does.
As you can see, I've now borrowed the same styling that's applied to the other menu items at the new menu at the top here. So to apply to the other two items, I just do the exact same thing again, a href="#" title="Menu item 2" and then end the a tag, and finally, the last one. What you're seeing here is that all of these things that I have been talking about throughout this course are starting to come together.
We're working with lists, I'm attaching links to the list items, I'm attaching title attributes to all the links, so they make sense for the browser, for the search engines, and for the person visiting them, and because I'm using lists as menus, they're automatically displaying as lists. So when I now save this new menu, reload the page, you'll see I have a menu that works the same way as the other ones do, and if I go and turn the Styles off and scroll down, you'll see my new Menu appears as a list in my content.
By putting your navigation menus in lists, you not only make them easier to access for your visitors, but they also become easier to manage for you. Adding or subtracting a menu item becomes a matter of adding or subtracting a list item.
- Understanding the benefits of accessibility and SEO
- Evaluating screen readers for Windows and Mac
- Installing browser development tools
- Comparing sites that are SEO-friendly and SEO-unfriendly
- Defining a language for a page
- Creating better semantic markup with HTML5
- Marking up images and links properly
- Creating an accessible menu with an unordered list