Skip to main content

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

Accessible, Responsive Website Design
Jim Byrne Web Designer

Structure your menus by marking them up as lists

Published: November 3, 2014

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

Let's Chat

07810 098 119

“The audit was extremely comprehensive, clear and demonstrated Jim’s expertise in the area of accessible web design.” Peter Madden, Project Manager, Sealed Envelope Ltd