Using Lists for Navigation
Posted The: 29/01/2009 At: 15:50
Last Edited: 30/04/2009 At: 20:55
This Article is about why using HTML lists for navigation is a good idea, both for accessibility and styling reasons.
Accessibility
A high level of Accessibility is easily achieved by following a few simple, and sometimes obvious coding recommendations. Using lists for navigation is one of them, and Accessibility is perhaps the best reason anyone can give.
People with Screen Readers
So how dose someone with a screen reader use lists? People with screen readers often "scan" through the content for lists.
Basically the screen reader reads for them, "list with 4 links", "list with 5 links", and then they may decide to look further at the list.
They also scan for headings in the content, and that may very well be some of the first they do, when they encounter a website for the first time. So it may also be a good idea to have a heading before the navigation list.
Styling
One of the main reasons many web designers decide not to use lists, is because they don't know to style them so they look the same in all browsers. The issue comes down to setting the margin and padding on your lists, see also: Lists in HTML. While there are several ways to set the margin and padding of lists, i usually just apply below CSS at the top of my stylesheet, and then i simply add the margin where needed.
* {
margin: 0;
padding: 0;
}Another reason that i do it this way, is that i likely need to modify the margin of paragraphs and other elements anyway.
Creating a Horizontal List
Another problem, is some web designers limited understanding of element behaviour. When you know how block and inline elements should behave, a lot of things start to get easier.
The ul and ol elements are block elements, and the li are blocks as well. Knowing this it shouldn't be hard for us to know that applying float: left; to the li elements of a list, would create a horizontal list, you can then apply a left margin to the list items as needed.
Comments: [0]
