Fly-Out Menus, Forms & Accessibility

Written March 28. 2004, at 16:46 GMT.

• Cameron Adams: Accessible, stylish form layout. Simple introduction to accessible HTML forms.

  Personally, I tend not to wrap my <label>s around the form fields, except when I'm marking up checkboxes and radio-buttons. I like to keep them seperate (<label for="name">Name:</label> <input name="name" id="name" />) and instead I wrap them inside a <p> or a <div>. This somewhat reduntant markup gives me more flexibility when it comes to styling, which is important when I'm building reusable HTML page modules, that will be used on many different websites, each with its own unique look and feel.

• Keith Robinson: Usability and Fly-Out Menus. Good article, followed by some excellent comments.

  I always try my best to convince my clients not to use fly-out menus for navigation on public websites. However, If they insist on using them, I always try to make sure that they're not the only way to navigate the site, so when javascript is turned off, you still get a usable, understandable site-navigation.

  One example of this philosophy can be seen on a site I worked on recently, for The Icelandic Fisheries Laboratories. Try moving your mouse over the main navigation (top-left part of the page) and then click on one of the menu items to see how the sub-level menu stays open when you're browsing sub-sections of the site. The main navigation is also easily accessible to users browsing the site without a mouse.

  The whole navigation is just a bunch of nested <ul> lists and the javascript that opens/closes the menus does so by merely switching between the properties display:block; and display:none; for the <ul>s.

More like this: English Entries, Accessibility, HTML/CSS.