Tables and Screen Readers

Question

I seem to be having troubles getting a screen reader to read simple tables. I have the HTML below:

<table alt="Account Information">
       <tr>
          <th scope='row'>Account Number:</th>
          <td>1111 1111 1111</td>
          <td>&nbsp&nbsp<td/>
          <th scope='row'>Reference Number:</th>
          <td>XXXX XXXX XXXX</td>
       </tr>
</table>

When the screen reader hits this table it says "Table. 0 Columns. 0 Rows."

I have tried many examples online and tried to use that WCAG2.0 standards as a guide line, but it doesnt seem to work.

I have also tried different table layouts and structures and still get the same result.

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;  }