Blind friendly menu using CSS

Dive Into Accessibility is an excellent book, freely available online. It explains how to build a better web for people with disabilities.

Presenting your main content first is one of the advise given. Therefore you should present your navigation links at the end the page. By doing so blind users will have direct access to the content. But you can still position graphically the navigation links wherever you want in the page. The author gives a trick to do it with table based layout. But no example is given for CSS. Since CSS based layout is much better than table based, I wanted to apply this to my little website.

This few lines of CSS code do the job:

div#menu
{
    position: absolute;
    right: 10%;
    top: 10%;
}

Put this code just before your </body> tag.

<div id='menu'>
<p><a href='items1.html'>item1</a></p>
<p><a href='items2.html'>item2</a></p>
<p><a href='items3.html'>item3</a></p>
</div>

This method is quick, easy and works everywhere. Even on Internet Explorer 6 & 7. (Tested with NetRenderer to avoid any loss of freedom ;)