桌子和屏幕閱讀器

Question

我似乎有麻煩讓屏幕閱讀器閱讀簡單的表格。我有下面的HTML：「表列0 0行。」

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

當屏幕閱讀器點擊此表中，它說

我已經在網上嘗試了很多例子，並試圖使用WCAG2.0標準作爲指導，但它似乎並沒有工作。

我也嘗試了不同的表格佈局和結構，仍然得到相同的結果。

Answer 1

我還沒有通過屏幕閱讀器運行它，但它可能會被你的&nbsp扔掉。需要用分號關閉&nbsp。像這樣： 。此外，表沒有alt屬性。用summary attribute來代替屏幕閱讀器提供一個有用的解釋。

最重要的是，我建議您移除空單元格，並使用CSS創建更大的空間。

1 - 刪除空行，並提供與CSS的縫隙，就像這樣：

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 - ...以及最重要的是，也許它有點挑剔，所以你可以嘗試：

<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 - ...但是理想的表將只是這樣的：

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