HTML格柵數據的可訪問性

這裏是我的示例輸出的js小提琴：http://jsfiddle.net/Hdzv8/以下是html。這是一個非常簡單的信息顯示，但您如何使其可訪問？我可以製作div而不是表格，但我無法更改整體結構。我的問題是目前沒有跡象表明「重量」是「16oz」的標題。（從可訪問性的角度來看）如何標記這些部分作爲標題？HTML格柵數據的可訪問性

<table border="5"> 
<tr> 
    <td colspan="6">Device Information</td> 
</tr> 
<tr> 
    <td><b>Weight</b></td><td>16oz</td> 
    <td><b>Height</b></td><td>3in</td> 
    <td><b>Color</b></td><td>Brown</td> 
</tr> 
<tr> 
    <td><b>Manufacturer</b></td><td>ACME Manufacturing</td> 
    <td><b>Disposal Method</b></td><td>Shoot into the sun</td> 
    <td><b>Alternate Color</b></td><td>Black</td> 
</tr> 
<tr> 
    <td><b>Installation Manual</b></td><td>ACME 45.51.2009</td> 
    <td><b>CCRC Code</b></td><td>CCRC551</td> 
    <td><b>USNumber</b></td><td>55un</td> 
</tr>

來源

2011-12-30 samwise

第一行應該是[標題元素] （http://www.w3.org/TR/WCAG-TECHS/H39.html）和CSS應該使用instea d的border屬性和b元素（應該是th元素，在CSS中'font-weight：bold;' - 已經默認在所有已知的瀏覽器上，但是你仍然可以編寫它） – FelipeAls 2011-12-30 22:18:41

如果你想有一個以上的記錄，我將離開這個作爲一個表（它實際上是表格數據），但使用th的頭。如果只是一個記錄，我會用div s或類似的;似乎更像是呈現而不僅僅是數據。 HTMLDog有幾個tutorials on tables，有很多關於使用和可訪問性的建議。

編輯：關於第二個想法，我可能只是做一兩欄，九行的表，每一行指定一個字段（如體重，身高）和第一列使用th指定的行頭和第二列使用td作爲實際值。有關工作示例，請參閱this Fiddle。

編輯2： This related SO post讓我覺得，如果你不想使用table的定義或描述列表（使用dl標籤）可能是適當的。

來源

2011-12-30 17:31:53 sczizzo

好吧，很簡單，如果我使用div我將如何指定一個div是標籤（高度），另一個是值（160z）？ – samwise 2011-12-30 18:44:30

現在我正在考慮這個問題，我認爲'table'在這裏是有意義的。現在編寫一個編輯。 – sczizzo 2011-12-30 18:56:34

嘿，非常感謝！唯一的問題是我不能改變用戶界面，它必須經過，所以它仍然是這樣的（http://jsfiddle.net/AtKvC/2/）。你知道如果像這樣混合td/th是可以接受的嗎？ – samwise 2011-12-30 19:20:23

我不知道這是否可能與您的真實數據（因爲我沒有真正看到你的例子上一個明確的列關係），但你也可以考慮在一個（或多個）描述列表中轉換整個標記例如

<tr> 
    <td><b>Weight</b></td><td>16oz</td> 
    ... 
</tr>

可能成爲

<dl> 
    <dt>Weight</dt><dd>16oz</dd> 
    ... 
</dl>

否則你仍然可以使用表headers屬性，像這樣

<tr> 
    <td id="header1"><b>Weight</b></td><td headers="header1">16oz</td> 
    ... 
</tr>

來源：http://www.w3.org/TR/WCAG20-TECHS/H43

來源

2011-12-30 17:35:37 fcalderan

在第二個示例中，您將數據單元與另一個數據單元相關聯。我相信這是被禁止的：技術H43意味着將數據單元與**標題單元**（以及還有其他標題單元格的「sub」標題單元格）相關聯。data cell ='td'和header cell ='th'，它應該是' blah blah2' – FelipeAls 2011-12-30 21:46:03

看着http：//www.jimthatcher。 com/webcourse9.htm＃wc9.3似乎任何單元格都可以用作標題屬性的目標（不僅僅是th元素）： >「你將一個id屬性附加到你想成爲一個標題單元格的任何單元格中。，將每個標題單元的標識添加到數據單元的標題屬性中。「 – fcalderan 2011-12-31 09:13:25

HTML格柵數據的可訪問性

回答

相關問題