问题
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>  <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.
回答1:
I haven't run this through a screen reader, but it could be thrown off by your  
.  
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; }
来源:https://stackoverflow.com/questions/21586478/tables-and-screen-readers