skip to main content

Jim Byrne Accessible Website Design Glasgow for The Third Sector, Voluntary, Charities and Not for Profits

Accessible design for the Third Sector
Creating inclusive websites since 1996
Jim Byrne Web Designer

Structure your menus by marking them up as lists

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.

Why is this relevant to accessible web design?

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).

Links

Related content

Written by :

Avatar of JamesByrne

Give me a phone if you would like me to test the accessibility of your website:

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