K2 Blog

This blog is run on a beta version of K2.

What is it I do?

I develop and design web sites, specializing in customized Joomla! content management systems. I also help companies get the most out of their existing business software.

Check out our web portfolio then contact us to discuss your requirements.

Tuesday, 02 June 2009 04:12

Accessible Menu Basics

Credits: Vivek Chugh
Accessibility of menus is important in designing web sites. There are a few steps, some very easy, that you can do to make your menus more accessible to people who have trouble with a mouse or use a keyboard or screen reader.

Your basic structure would be a div with a header followed by an unordered list:

<div id="mainnav">
<h2 class="hidden">Main Menu</h2>
<ul id="nav">
<li><a href="/home.html">Home</a></li>
<li><a href="/about-us.html">About Us</a></li>
<li><a href="/services.html">Services</a></li>
</ul>
</div>

The header is very useful for screen readers and can be hidden from visual users. The best way to hide information from sight while still having it accessible to screen readers is to use absolute positioning off the screen.

hidden.h2 {position:absolute; margin-left: -9000;}

or

hidden.h2 {position:absolute; top:auto; left: -9000;}

For a menu to be useable to anyone using a keyboard rather than a mouse, make sure that if you use :hover to initate any actions, also initiate the action with :focus. One difficulty here is that while :hover engages parents and children, :focus only looks at the specific element.

Along the same lines, if you use Javascript, make sure that anything that can be done by a mouse can also be done via the keyboard. If you use onmouseover/onmouseout you also need onfocus and onblur plus alternative text. Using onclick is fine as long as the Enter key can be pressed when the link has focus.

Another usability feature is to have the entire area clickable, not just the anchor text itself. Using display:block with padding will accomplish this:

a {display:block; padding: .5em;}

The path to making a web site truly accessible is a continuing process. You can make a start by adding some of these techniques to your normal routine.

For more information see the WebAim web site for techniques to use to help bring accessibility to the internet.

Another site with working menus is Matt Carroll's version of Son of Suckerfish.

 

Last modified on Friday, 19 June 2009 15:00
Andy Tarr

Andy Tarr

Andy has been working with computers since she took home a self study guide to the IBM System 32 when she was a librarian and wrote the first computerized circulation system in the state of New Hampshire. You can follow her on Twitter @Sueter.

Website: www.tarrconsulting.com E-mail: This e-mail address is being protected from spambots. You need JavaScript enabled to view it
More in this category: « K2 First Look

2 comments

  • Sunday, 05 September 2010 06:09 posted by iraqlife forums Comment Link

    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me.

    This e-mail address is being protected from spambots. You need JavaScript enabled to view it
  • Friday, 03 September 2010 00:52 posted by jeux casino Comment Link

    This demonstration isn’t complicated but I’ve decided to write an article about it as it is very easy to nest elements incorrectly which may lead to invalid code so I thought it might be a good time to put this one to bed and create a simple CSS menu which anyone can use to build and expand upon.

    This e-mail address is being protected from spambots. You need JavaScript enabled to view it

Add comment