マークアップする必要がある次のデザインがありますが、そのレイアウトは変更できません。
フィラー テキストは無視してください。あまり意味がないことはわかっています。
95%テーブルのように感じるので、私はテーブルを選びました。しかし、各項目の下にあるデータ ポイントのレイアウトに適したセマンティック マークアップについては、困惑しています。各ポイントは個別です。つまり、これは自由形式のテキストではなく、毎回同じ相対位置に配置されますが、これらのポイントにレンダリングされるヘッダーやラベルが割り当てられていないため、従来のデータ テーブル レイアウトが崩れます。このようなレイアウトを次の両方になるようにマークアップすることに興味があります。
- セマンティック
- 最新のスクリーン リーダーで適切に利用できます(一部の古いスクリーン リーダーにはさまざまなバグがあることは知っていますが、古いブラウザーと同様に、非推奨のソフトウェアに対してより優れた/新しい手法を制限するのは公平ではないと思います)。
私は過去数年間、何度もこの問題に遭遇しましたが、最終的に解決し、コミュニティにアドバイスを求めました. 私が試してみました:
- アイテムごとに個別
tbody
の を使用し、追加のデータ ポイントに 2 番目の行を使用しましたが、「サブ行」をアイテムに関連付ける方法がわからなかったのであきらめました。 - さまざまなデータ ポイントとヘッダーをすべて水平方向に並べてテーブルをレイアウトし、CSS を使用して配置します。残念ながら、廃止されたソフトウェアに関する以前の声明とは対照的に、私は IE 7 をサポートする必要があり、この手法は失敗します。
- 非表示の行を使用
th
しrowspans
て、より複雑なテーブル レイアウトを作成し、ARIAを使用して目的の画面読み取り結果を取得しようとしましたが、すべて役に立ちませんでした。 - ネストされたテーブルの使用も検討しましたが、それは非常に間違っているように感じます。
どんな助けでも感謝します。
注:これをレンダリングしてクロスブラウザーを表示するのはそれほど難しくありません。これをセマンティックでアクセシブルにする方法に興味があります。