Tables and Screen Readers

Answer 1

I haven't run this through a screen reader, but it could be thrown off by your &nbsp. &nbsp needs to be closed with a semi-colon. Like this:  . Also, there is no alt attribute for table. Provide an explanation, useful for screen readers, with the summary attribute instead.

On top of that, I would advise that you remove that empty cell and make a bigger space with CSS.

1 - Remove the blank row and provide a gap with CSS, like this:

HTML

<table summary="Account Information">
   <tr>
      <th scope="row">Account Number:</th>
      <td>1111 1111 1111</td>

      <th scope="row">Reference Number:</th>
      <td>XXXX XXXX XXXX</td>
   </tr>
</table>

CSS

th { padding: 0 10px;  }

2 - ...and on top of that, maybe it's a bit picky, so you could try:

<table summary="Account Information">
    <thead>
        <tr>
            <th scope="col">Account Number Heading</th>
            <th scope="col">Account Number</th>
            <th scope="col">Reference Number Heading</th>
            <th scope="col">Reference Number</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Account Number:</th>
            <td>1111 1111 1111</td>

            <th scope="row">Reference Number:</th>
            <td>XXXX XXXX XXXX</td>
        </tr>
    </tbody>
</table>

CSS

thead { display: none; }
th { padding: 0 10px;  }

3 - ...but ideally the table would be just like this:

<table summary="Account Information">
    <thead>
        <tr>
            <th scope="col">Account Number</th>
            <th scope="col">Reference Number</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1111 1111 1111</td>
            <td>XXXX XXXX XXXX</td>
        </tr>
    </tbody>
</table>

CSS

th { padding: 0 10px;  }