Replacing responsive tables for better markup and accessibility

I am trying to create a site with a set of images that can be viewed by scrolling the page vertically or by clicking a button that links to the next image in the set using an anchor tag.

The images are centered vertically and horizontally inside a container that responds to the size of the browser window.

<a id="1">

    <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
    <tr valign="middle"><td align="center">

        <img src="image.png">
    
    </td></tr>
    <tr><td>
 
        <a href="#2">Down</a>
    
    </td></tr>
    </table>

</a>

I know of no other way to achieve this but to use tables though I am aware that it is very poor markup.

I have also found that the site renders correctly in Firefox 16.0.2 but not in Safari 5.0.6 where after the second image in the set the tables appear to grow in height exponentially.

How can I code this site for better accessibility and with proper markup?

Solution

The way I would probably do it without resorting to too many hacks would be to just put each image in a div, set some dimensions based on css, then use javascript to adjust accordingly. Here is the sample HTML:

div class="item">
    <img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>
<div class="item">
    <img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>

The sample CSS:

html {height:100%;}
body {height:100%;}

div.item {
    width:100%;
    height:100%;
    text-align:center;
}

div.item > img {
    max-height:100%;
    max-width:100%;
}

And finally the jquery which simply readjusts sizes on resize and at the start.

$(document).ready(function(){
    //Setup function for sizing.
    var win = $(window), body = $('body');
    var els = $('div.item');
    function DoResize() {
        var height = win.height(), 
        width = body.width();
        els.each(function(i,el){
            var ele = $(el);
            ele.height(height).width(width);
            var img = ele.find('img');
            var difference = (height - img.height())/2.0;
            img.css('margin-top',difference+'px');
        });
    }
    
    DoResize();
    $(window).on('resize', DoResize);
});

I set up a jsfiddle for you to see it in action. It also readjusts for resizing of the window. It should work in most browsers even IE7 according to caniuse.com.

Update:

To include the captions and such you can do a variety of things. The easiest would be to add relative positioning to each item, then absolute positioning to each element you want to position with respect to each image.

You would do the html more or less like so:

<div class="item">
    <img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
    <div class="caption">
        Caption for Item 1
    </div>
    <div class="link">
        <a href="javascript:alert('Woo #1');">Item link</a>
    </div>
</div>

Then the style would just have updates for the other classes within the parent div.

I updated the jsfiddle here to show you some things you can do: link

Updated again:

Add the following script tag to your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

before the Resizing script.