In web design we often find that we are faced with two conflicting design choices. That of promoting either the content or the navigation. As a rule traditional design has held that content comes before navigation. Hence page numbers, running headers or footers in books are in smaller and less noticeable type in a book than is the content of the page.
In web design, however, navigation has come to take on the most more important position on the page. Often it overwhelms the content itself. This poses a problem for both the sighted as well as the blind reader of the page as they must navigate past a sea of navigation links to reach the true content of the page.
Here is presented one possible solution to this issue. Using CSS I have hidden the navigation of this page which can be shown using a toggled link: Hide Navigation
In this way navigation can be shown when needed and hidden when not. So a page could load without navigation links distracting the reader, both visually or with a screen reader from the page content and then shown when required. This was done by setting the menu css class to display: none when the page is opened and then removing that when the user clicks on the link. The PHP code is shown below:
$menucss = "display: none;";
$switch = "on";
$toggle = "Show";
if ($_GET['menu'] == 'on') {
$menucss = "";
$switch = "off";
$toggle = "Hide";
}
While this particular example is done in PHP a similar result could be accomplished in JavaScript or Ajax. Here is a JavaScript/Ajax example.
