screen reader read order in 3 column layout

[tmikk]

Hello, We tested our site http://sandbox.oed.umn.edu/ac/ with a screen reader software and discovered that the screen reader reads the page in the following order:
1. Left hand menu
2. Right hand column content
3. Main column content

This may be counter intuitive for the blind person trying to get content on our page since they are jumping to the right hand column and not the main content after the menu. Our layout is based on the TL default template that is using the fe_page.tpl file for layout. The screen reader read order seems to be determined by the order of sections in this file by following code:

Code: Select all

<div id="container">
<?php if ($this->left): ?>

<div id="left">
<div class="inside">
<?php echo $this->left; ?>
</div>
</div>
<?php endif; ?>
<?php if ($this->right): ?>

<div id="right">
<div class="inside">
<?php echo $this->right; ?>
</div>
</div>
<?php endif; ?>

<div id="main">
<div class="inside">
<?php echo $this->main; ?>
</div>
<?php echo $this->getCustomSections('main'); ?>
<div id="clear"></div>
</div>

</div>
<?php echo $this->getCustomSections('after'); ?>

When I change the location of the "main" section to appear after the "left" section, the read order changes to first left, then main, and then right column. However, the <div id="clear"></div> code that appears right after the main section seems to break the layout of the page. I have tried moving the<div id="clear"></div> code to different parts of the template, and removing it, but have not been able to render the page correctly. Either the footer gets misplaced or the right hand column text is misplaced. Any help resolving this is appreciated.

Thank you,
Tonu

[Vera]

It won't go there because the #main div isn't floated. If you'd floated it, gave it a fixed width and removed the standard left margin (the later is an inline style), then it would work.

You would need to tinker a bit to get it right. But the main answer to the problem is: the #main div is not floated.

Alternatively: I take it you will not use tables for layout, even though in this case it is uncomplicated, easy to read, everything stays in a logical order and it is pretty much fool proof? but option one would be to use a table. Just 1 row with three cells. But I understand if you do not want to, because nowadays you're almost beaten to death for using tables anywhere