1

これが私の出力例の js フィドルです: http://jsfiddle.net/Hdzv8/以下は html です。これは非常に単純な情報の表示ですが、これをどのようにアクセス可能にしますか? テーブルの代わりに div を作成できますが、全体の構造を変更することはできません。私が抱えている問題は、現在、「重量」が「16オンス」のヘッダーであるという兆候がないことです. (アクセシビリティの観点から) これらのセクションをヘッダーとしてラベル付けするにはどうすればよいでしょうか?

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

4

3 に答える 3

2

複数のレコードを作成する場合は、これをテーブルのままにし (実際には表形式のデータです) th、ヘッダーに使用します。レコードが 1 つだけの場合は、divs などを使用します。単なるデータというよりもプレゼンテーションのように思えます。HTMLDog には、テーブルに関するチュートリアルがいくつかあり、使用法とアクセシビリティに関する多くのアドバイスが含まれています。

編集：考え直して、各行がフィールド（重量、高さなど）を指定し、最初の列thが行ヘッダーを指定するtdために使用し、2番目の列が実際の価値。実際の例については、このフィドルを参照してください。

編集 2 : この関連する SO 投稿ではdl、table.

于 2011-12-30T17:31:53.503 に答える
1

実際のデータでこれが可能かどうかはわかりませんが（例では明確な列の関係が実際には見られないため）、マークアップ全体を1つ（または複数）の説明リストに変換することも検討できます。

<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-30T17:35:37.970 に答える
1

その形式を維持する必要がある場合は、テーブルは必要ありません。テーブルは、グリッドに自然に属するデータのレンダリングにのみ使用する必要があります。この形式を維持する必要がある場合は、代わりに説明リストを使用し、CSS を使用して境界付きのスタイルの表にスタイル設定することをお勧めします。

テーブルを使用する場合、これが適切な方法です。スタイル設定には html 属性の代わりに css を使用する 'b' の代わりに 'strong' を使用する tabl を使用する テーブルは適切な html フォーマットを使用する必要がある

<table class="myborderclass">
<caption>
Device Information
</caption>
<thead>
 <tr>
   <th scope="col">Weight</th>
   <th scope="col">Height</b></th>
   <td scope="col">Color</b></th>
   <th scope="col">Manufacturer</b></th>
   <th scope="col">Disposal Method</b></th>
   <th scope="col">Alternate Color</b></th>
   <th scope="col">Installation Manual</b></th>
   <th scope="col">CCRC Code</b></th>
   <th scope="col">USNumber</b></th>
 </tr>
</thead>
<tbody>
<tr>
   <td>16oz</td>
   <td>3 inches</td>
   <td>Brown</td>
   <td>ACME</td>
   <td>Shoot into the sun</td>
   <td>Black</td>
   <td>ACME 45.51.2009</td>
   <td>CCRC551</td>
   <td>55un</td>
  </tr>
 </tbody>
</table>
于 2018-12-31T15:49:38.563 に答える