原文：https://pauljadam.com/demos/accounting-tables.html
※このページは動作確認用ページです。一部アクセシビリティに配慮していないコンテンツが含まれます。
DEMO一覧に戻るPaulJAdam.comでさらに詳しく（外部サイト）
会計テーブル
1行が複数行にわたる2つの行ヘッダーを持つ表。thead要素の列ヘッダは font-size: 0px; height: 0px で視覚的に隠されています。
| 所得タイプ | 収入または費用 | 借方 | 貸方 |
|---|---|---|---|
| 収入： | サービス収入 | $ 1,900 | |
| 経費： | 家賃 | $ 400 | |
| 水道光熱費 | 100 | ||
| 全費用 | 500 | ||
| 当期純利益 | $ 1,400 |
※ iOSのVoiceOverは、CSSで視覚的に隠された列ヘッダを読み上げませんでした。
1行が複数行にわたる2つの行ヘッダーを持つ表。 マークアップは上記の表と同じですが、列ヘッダーが隠されていません。
| 所得タイプ | 収入または費用 | 借方 | 貸方 |
|---|---|---|---|
| 収入： | サービス収入 | $ 1,900 | |
| 経費： | 家賃 | $ 400 | |
| 水道光熱費 | 100 | ||
| 全費用 | 500 | ||
| 当期純利益 | $ 1,400 |
※ iOSのVoiceOverは各データセルの最初の行ヘッダのみを読み上げます。しかし、固有の行ヘッダーは2列目にあり、読み上げられません。macOSのVoiceOverは、このテーブルをうまく理解し、すべての列と行のヘッダを予想通りに読み上げます。
tbody要素に複数の列ヘッダーがある表。thead要素の列ヘッダは font-size: 0px; height: 0px で視覚的に隠されています。
| 収入または費用 | 借方 | 貸方 |
|---|---|---|
| 収入： | ||
| サービス収入 | $ 1,900 | |
| 経費： | ||
| 家賃 | $ 400 | |
| 水道光熱費 | 100 | |
| 全費用 | 500 | |
| 当期純利益 | $ 1,400 |
※ iOSのVoiceOverは、各データセルの行ヘッダーと列ヘッダーを読み上げます。 tbody要素内の複数列にわたる列ヘッダーは、iOS・macOSともにVoiceOverは列ヘッダーとしては読み上げませんでした。この表の表現方法が悪いため、スクリーンリーダーが列ヘッダーとして「収入：」と「経費：」という文字列を読み上げることは重要ではありません。
※ このデータテーブルはモバイルユーザーにとって最高のエクスペリエンスです。
※ AndroidのChromeとTalkBackでは、データテーブルのアクセシビリティはサポートされていません。行と列のヘッダーはデータセルには表示されません。
※ AndroidのFirefoxとTalkBackでは、このページで紹介した両方のテクニックを非常によくサポートしています。 VoiceOverよりも優れています。