「貸借対照表(B/S)のマークアップ」という記事を読んで、私ならどうマークアップするかを考えてみました。
結果、
- データ毎（今回の場合は部門ごと）に1つのtable要素でマークアップ
- 貸借対照表でよく見られるレイアウト（資産の部が左に、負債の部と資本の部が右にレイアウトされる）にするためにCSSでスタイリング
という結論に至り、実際にマークアップをしてみました。
サンプルファイルをアップしたので、Safari Technology PreviewもしくはGoogle Chrome（試験運用版のウェブ プラットフォームの機能を有効にしてください）でご覧ください。（ブラウザ指定の理由は後述します。）
※2016年9月10日9時にサンプルファイルの改良版をアップしました。Flexboxを使用したコードも追加し、IE以外のどのブラウザでもご覧いただけます。
私の考え
データ毎に1つのtable要素でマークアップしたのは、資産の部・負債の部・資本の部が1つのtable要素に混ざっていると分かりにくいと私は感じたからです。id属性とheaders属性を使えば確かにスクリーンリーダーで各セルを読み上げをする際、都度「資産の部」とか「負債の部」などと読み上げられますが、資産の部・負債の部が交互に読み上げられるので、内容がスムーズに理解できるのだろうか？という疑問が生じます。書籍「デザイニングWebアクセシビリティ」でも「ひとつの表が一種類のデータになるように分割する」とのアプローチが紹介されており、真っ先にこのアプローチが適用できないか検討しました。
データ毎に1つのtable要素でマークアップしたことで、キャプションを難なく付けることができました。またANAホールディングスの「ANA VISION 2016 第66期のご報告」（紙媒体を受け取ったのですが、PDF版がANAのサイトにあります）のように各部門に前期・当期のデータを入れることも無理なくできますし、資産の部と負債の部＋資本の部の行数が異なったとしても空のセルを入れる必要がありません。さらに、NVDAを使用している場合、資産の部を読み上げている途中でTキーを押して次のテーブルに移動することもできます。
貸借対照表でよく見られるレイアウトの再現はCSSで行うことも首尾一貫した方針として臨みました。float・Flexboxどちらでも再現できそうですが、今回は勉強を兼ねてあえて「CSS Grid Layout Module Level 1」を利用してみました。左右のカラムを10px離すことで罫線が二重になったり、必要な罫線が出なくなったりする問題を回避しました。