Jump to content

Where should you place your Navigation? [05/05/2006]


LSW

Recommended Posts

Well, you are likely thinking left or top of the page and you are correct, but you are thinking visually. In Accessibility we have to think outside of the box, and not always visually.

 

The reason for this is not all user agents are visual. Text based browsers show only the text as you structured it. Screen readers read the text as you structured it, as you would read it. Other user agents may ignore the CSS as monitor browser sizes would not match a small screen like a cell phone. Now if you have built your web site using primarily CSS and DIVs, removing the CSS will make your site appear vertically structured much like a text document.

 

Now ask yourself where would you wish the text to be? If you read your page again visually, you will likely skip the Navigation which is most likely at the top of the page. A screen reader reads everything... every time. Imagine of you were blind and had to listen to all 5 or 25 links of the navigation time and time again, it would get old fast wouldn't it?

 

So there is a movement to place navigation at the bottom of the pages. Then using CSS you can place it at the left or top visually. One way to do this would be to place your content section and define it with float: right; and limit the width. By floating your navigation block right as well and as or slightly thinner than the content, it will the slip up next to the content.

 

The advantages to bottom navigation:

  • For the disabled, like visually impaired visitors, they get text rather than navigation until the end of the content when you then generally need navigation to the next page.
  • Same goes for Search Engines, a SE will scan and index only a certain number of characters. This way it does not index any navigation links and has that much more content to decide where to list your site. Also some times a SE will show the first text available to the SE's user, this way it is useful text and not just like text. You are offering the SE quality text to offer their use... this can help improve your rankings.
  • If CSS is disabled or not supportable, the navigation is available at the bottom of the page where they stop reading, no scrolling topside again to move on.
  • The need for a redundant footer navigation falls away.

 

So you have decided to add the text to the bottom of your code and have it up top visually. But what if we know this page? We are regular visitors and are not interested in this page (for instance the index page), we want your Navigation? Or maybe you have chosen against bottom navigation, or like my LSW, it simply does not work with the design (thanks again to IE for making me create pages to make you happy rather than what I wish to do just because you cannot support standards). In both cases you can and should use so called "Skip Links" or "Jump Links". This is simply a internal anchor pointing to the ID of your target block.

  • Jump to Content - allows the user to simply jump over Navigation and such directly to the content they wish.
  • Jump to Menu - allows the user to skip over the content and such directly to the Navigation.

 

A note on wording, placement and use: This should always be placed as far up on the page as possible, these should be one of the first things in your code after the body tag allowing the user to jump where they wish immediately. I usually add them to a small Utility menu before my main menu or navigation where you may have things like languages choices or RSS links.

 

Some designers choose to hide such links arguing that they are only needed for text and screen reader users who will see them when the CSS is not supported. If you are adding these after the after the site is finished, this is a option, if the site is new many of us believe there is no reason to hide such aids, both visual users may find them useful on long pages as well as some keyboard users (some older surfers may find keyboard navigation easier to use than a mouse if they have physical problems) and it makes it obvious to all that your site is created to be easily used for those with disabilities as well. But be warned, you should not e the code using the CSS tools for this. JAWS for instance is a screen reader that rides piggyback on IE, anything hidden from IE will be hidden from it as well. Best is to hide it by placing it off screen.

 

As for the direct wording, studies have shown that many of the very users this is meant for did not understand what it was for when "Skip Navigation" was used. So it may be longer, but keep your wording simple. There is no default standard, I like "Jump to Menu" and "Jump to Content". But there are many different term combinations that can be used, just keep it simple for non-designers.

 

Always keep in mind making your site more useful for those with disabilities. What might they wish to do? If you visit LSW you will see that I included skip links directly to the Blog Archive list on the page as well as directly to the Search to make it easier for them to go immediately to where they may wish to go.

 

[Note 05/05/2006: Although I am not sure I completely agree, I feel this article should be included for balance - Source Order, Skip links and Structural labels ]

Link to comment
Share on other sites

×
×
  • Create New...