Structure your menus by marking them up as lists.
Added on Wednesday 1 Oct 2003
A navigation menu is - if we are speaking structurally - a list; but it is rare to find a developer/designer who marks them up as such.
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.
So, is it possible to use the correct structural markup, and still make your menus look the way you want them to?
A recent rash of articles and tools have appeared to demonstrate that the answer is a resounding 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 new 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 tools, i.e. 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 to you and me).
The tips archive is at: Weekly accessible Web Design Tips.
Register for your weekly accessible web design tip.
Feedback from Andrew Arch
Andrew Arch, the Manager Online Accessibility Consulting, National Information and Library Service has been in touch with some valuable feedback in relation to some of my recent accessible web design tips.
Re: How to make printable characters between adjacent links invisible:
"I used this tip with many clients in the past - a good one for the designers who can get very precious about their 'masterpiece'."
Andrew sent the following comments for consideration:
- even some new speaking browsers (eg HPR) can't distinguish links clearlywhile reading (HPR is fine when you bring up a link list) unless there is a character between them
- what we have found people doing is using a graphic between links for design purposes - this is ok, but the alt text needs to be set to "|", not " " as most tend to do (if they include alt text at all) - this is another way of hiding the between-link item as it can be designed subtly, be made to blend with the background, or made transparent.
Re: Decide whether your non-text elements are functional, decorative or providing content?
Again, Andrew had some useful comments to make:
"Had to respond to this Tip,what we advise folk here as best practice for decorative and spacer images. Our experience with staff using screen readers at Vision Australia Foundation is that there is less likelihood of the screen reader (different products; different versions) announcing the image file name if the alt text has a space between the quotes (ie alt = " "). In fact this is easy to explain as the space character is in fact 'text' while no character is not 'text'. If the designers are upset with IE showing a rectangular 'tool tip', setting the title attribute to null (ie title = "") will solve the problem."
"BTW, for functional images acting as links it is important to remind developers not to precede the link text with "link to" or similar (eg not to have alt="link to home page" but rather alt="home page")."
Thanks Andrew, I value your feedback - keep it coming.