6

マークアップする必要がある次のデザインがありますが、そのレイアウトは変更できません。

アイテムごとにデータポイントが垂直に配置された複雑なテーブル レイアウト フィラー テキストは無視してください。あまり意味がないことはわかっています。

95％テーブルのように感じるので、私はテーブルを選びました。しかし、各項目の下にあるデータ ポイントのレイアウトに適したセマンティック マークアップについては、困惑しています。各ポイントは個別です。つまり、これは自由形式のテキストではなく、毎回同じ相対位置に配置されますが、これらのポイントにレンダリングされるヘッダーやラベルが割り当てられていないため、従来のデータ テーブル レイアウトが崩れます。このようなレイアウトを次の両方になるようにマークアップすることに興味があります。

  1. セマンティック
  2. 最新のスクリーン リーダーで適切に利用できます(一部の古いスクリーン リーダーにはさまざまなバグがあることは知っていますが、古いブラウザーと同様に、非推奨のソフトウェアに対してより優れた/新しい手法を制限するのは公平ではないと思います)。

私は過去数年間、何度もこの問題に遭遇しましたが、最終的に解決し、コミュニティにアドバイスを求めました. 私が試してみました：

  1. アイテムごとに個別tbodyの を使用し、追加のデータ ポイントに 2 番目の行を使用しましたが、「サブ行」をアイテムに関連付ける方法がわからなかったのであきらめました。
  2. さまざまなデータ ポイントとヘッダーをすべて水平方向に並べてテーブルをレイアウトし、CSS を使用して配置します。残念ながら、廃止されたソフトウェアに関する以前の声明とは対照的に、私は IE 7 をサポートする必要があり、この手法は失敗します。
  3. 非表示の行を使用thしrowspansて、より複雑なテーブル レイアウトを作成し、ARIAを使用して目的の画面読み取り結果を取得しようとしましたが、すべて役に立ちませんでした。
  4. ネストされたテーブルの使用も検討しましたが、それは非常に間違っているように感じます。

どんな助けでも感謝します。

注:これをレンダリングしてクロスブラウザーを表示するのはそれほど難しくありません。これをセマンティックでアクセシブルにする方法に興味があります。

4

2 に答える 2

3

はい、テーブルで行きましょう！Webrichtlijnen準拠のテーブルを含むサイトを取得するのに数回の反復が必要でしたが、最終的にすべての基準を満たしました。あなたが世話をする必要があるいくつかのことがあります：

  • テーブルの簡単な要約summaryを提供する属性を含めます。を追加することもできますが、必須ではありません。場合によっては、表の上に見出しを追加することもできます。<caption/>
  • あなたとあなたの最初のscope属性を使用してください(ほとんどの場合、他の列は、行の最初のテーブル セルのラベルに関連付けられます)。th td
  • 削除ボタンのテキスト バージョンから始めます。
  • 削除ボタンにはわかりやすいヘッダーを使用します。
  • <abbr/>省略された月には必ずタグを使用してください。

テーブルの例は次のとおりです。

<table summary="summary">
  <thead>
    <tr>
      <th scope="col">Course</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">
        <div class="title">Title</div>
        <div class="sub-title">Subtitle</div>
        <div class="period">Period</div>
      </td>
      <td class="number">1.45</td>
      <td class="number">$1,047</td>
      <td><a href="">Delete</a></td>
    </tr>
  <tbody>
</table>

削除リンクで Ajax を使用する場合は、最初に Javascript を使用せずに実装し (適切なアイテムを削除する URL を指定するだけ)、次に Ajax 機能を追加します。

于 2012-09-06T10:50:16.877 に答える
2

大まかに言えば、1 つのヘッダー行と 6 つのデータ行を持つテーブルがあり、奇数データ行には 3 つのセルがあり、偶数データ行には 3 つの列にまたがる 1 つのセルがあります。

偶数行のセル内には<h?>、「lorem 102」行の要素と詳細ポイントのリストがあります。<td>偶数行のセルの要素にはheaders、上の行の最初のセルを指す属性があり、サブ行からアイテムへの関連付けを提供します。

構造を説明するために、<caption>要素または要素にsummary属性を含めることもできます。<table>

更新: Jasper de Vries の回答を見て、delete 列を省略したことに気付きました。そのための彼のアドバイスに従ってください。

于 2012-09-06T00:06:56.383 に答える