Hi all, On a current project we are debating the best way to construct our main navigation in an accessible & keyboard friendly format. The navigation consists of three levels - primary, secondary, tertiary.
Navigation will be arranged in a horizontal tabbed format where only the first level will be visible on the home page. Upon visiting a primary content page, the secondary navigation will be visible below the primary nav, with the tertiary navigation available via dropdowns. Our initial thought was to use a structure that works semantically, by nesting all three levels in the same menu. (eg. http://www.stgeorge.com.au/ ) Pro: Semantic markup, all levels have relationship. Con: User must tab through all secondary/tertiary links (we have many!) before navigating to the remaining primary links: <ul> <li><a>Primary 1</a> <ul> <li><a>Secondary</a> <ul> <li><a>Tertiary</a></li> <li><a>Tertiary</a></li> <li><a>Tertiary</a></li> <li><a>Tertiary</a></li> </ul> </li> </ul> </li> <li><a>Primary 2</a></li> <li><a>Primary 3</a></li> </ul> Looking at a couple of other sites (http://www.commbank.com.au/personal/ & http://www.westpac.com.au/personal-banking/ - the banking model is a good comparison for us) it is clear that there are advantages to separating the levels of navigation, in our case the markup is much more manageable from a css point of view. Pro: tab order allows users to quickly access all primary links. Con: loss of semantic relationship between primary & secondary links: <ul> <li><a>Primary 1</a></li> <li><a>Primary 2</a></li> <li><a>Primary 3</a></li> </ul> <ul> <li><a>Secondary</a> <ul> <li><a>Tertiary</a></li> <li><a>Tertiary</a></li> <li><a>Tertiary</a></li> <li><a>Tertiary</a></li> </ul> </li> </ul> Would love to hear peoples opinions as to whether either method is preferable from a usability perspective, or poses any accessibility/wcag issues. Thanks - Ben ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
