9.1.1. Ensure the correct reading order of formatting tables

When a person uses a screen reader to access a table used for formatting, the content is read line by line. This means that the table content is read cell after cell, from left to right, and row after row.

Therefore, you need to make sure that the reading order is logical for each formatting table.

For example, if the following source code is used, the reading order is:

1. First name.
2. Surname.
3. Age.
4. “First name” field.
5. “Surname” field.
6. “Age” field.

<table>
    <tr>
        <td>
            <label for="first-name">First name</label>
        </td>
        <td>
            <label for="surname">Surname</label>
        </td>
        <td>
            <label for="age">Age</label>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="first-name" id="first-name" />
        </td>
        <td>
            <input type="text" name="surname" id="surname" />
        </td>
        <td>
            <input type="text" name="age" id="age" />
        </td>
    </tr>
</table>

To obtain a logical reading order while still using a formatting table, it is preferable to use the following code:

<table>
    <tr>
        <td>
            <label for="first-name">First name</label>
            <input type="text" name="first-name" id="first-name" />
        </td>
        <td>
            <label for="name">Surname</label>
            <input type="text" name="name" id="name" />
        </td>
        <td>
            <label for="age">Age</label>
            <input type="text" name="age" id="age" />
        </td>
    </tr>
</table>