A navigation menu is – if we are speaking structurally – a list.
I still see websites that don’t markup their navigations links as lists; I guess the reason for this is that designers don’t want to have ugly big bullet points littering their menu’s, or seemingly uncontrollable margins throwing out their carefully crafted layouts.
Is it possible to use the correct structural markup, and still make your menus look the way you want them to?
The simple answer is yes; you can use CSS to style lists to look more-or-less any way you want.
First, undermine your previous assumptions by visiting the Listamatic website to see examples of different list styles (with the CSS used for each).
Then visit Mark Newhouse’s Taming Lists tutorial to learn how to make your own.
And finally – if you can’t be bothered learning how to do it yourself – have a look at Accessify’s List-o-matic – where you fill in a few forms, and the List-o-matic tool does all the hard work for you.
Using the appropriate markup for all the structures in your web documents is the first step towards making them accessible; web pages need to be accessible to the ‘user agents’ people use first, before they can be accessible to the people themselves. Using valid standards based markup means you have the best chance of your pages being understood by those intermediate ‘user agents’ (usually that means computers and web browsers).
I provided feedback on the WCAG 2 (as representative of Guild of Accessible Website Designers) have two decades of experience and worked with hundreds of organisations.
07810 098 119