In the HTML structure each input should be preceded by its label, rather than having labels on one row and inputs on the next.
However, you have a very particular display you want, and you are supporting IE7 (without display: table), so I think you are best off actually using a table.
You can do this accessibly, if you take these things into account:
Use a basic layout table for your form, and include an extra attribute on the table tag:
<table role="presentation">
That means the table is not a table from an accessibility point of view. (I only ever recommend this when supporting IE7 layouts!) Do not use <th> tags either.
The main thing for screen readers when filling it in would be an explicit label-input relationship.
<label for="input_id">My label</label>
<input type="text" id="input_id">
You can tell if this works by clicking on the label, it should put the cursor in the input.
However, your reading view needs a different approach. When you've got a row of items at the top that relate to a row of items underneath, that is the definition of a data table. So when the page is saved (or however it converts to the reading view), use a data table e.g:
<table>
<tr>
<th>Customer account number</th>
[other <th>s]
</tr>
<tr>
<tr>
<td>023456353434</td>
...
When read out by a screen reader it will read the 'header' (e.g. customer account number) before the content (023...). So the changes are:
- Remove the role
- Convert the top row into
<th>s
It has to be said this is a hack, it is not particularly robust, and I certainly wouldn't recommend it for a responsive site. It is purely the required layout and browser support that lead to this.
