1. 導入：なぜ大規模テーブルでaria-rowcountが必要なのか
Webアプリケーションの開発において、数千件、あるいは数百万件のデータを扱うテーブルを実装することは珍しくありません。パフォーマンス向上のために「仮想スクロール」や「ページネーション（または無限スクロール）」を導入し、DOMに存在する行を限定する手法は一般的です。しかし、ブラウザのアクセシビリティツリーは「DOMに存在する行数」しか認識できないため、スクリーンリーダーのユーザーは「テーブルにはたった10行しかない」と誤認してしまいます。この課題を解決し、データの全体像を正しく伝えるために不可欠なのが aria-rowcount 属性です。
2. 基礎知識：aria-rowcountの仕組み
aria-rowcount は、テーブル（table, grid, treegrid）の全行数を支援技術に伝えるための属性です。
通常、ブラウザはHTMLの
また、全行数が確定していない（リアルタイムで増え続けるデータなど）場合には、値に -1 を指定することで、「合計数は不明である」という情報を適切に伝えることができます。
3. 実装：具体的な手順と論理的な解説
実装のポイントは「DOM上の行数」と「論理的な全行数」を切り分けて管理することです。
1. テーブルの親要素（tableロールを持つ要素）に aria-rowcount を付与します。
2. 表示されている各行には、その行が全体の中で何番目かを示す aria-rowindex を必ずセットしてください。これがないと、支援技術は現在地を正確に把握できません。
3. データ読み込み（非同期処理）のたびに、aria-rowcount の値をJavaScriptで更新します。
4. サンプルプログラム
以下は、1000件のデータのうち、現在10件だけを表示している状況を想定したコード例です。
| ID | 名前 |
|---|---|
| 001 | 山田太郎 |
| 800 | 佐藤花子 |
5. 応用・注意点：現場で陥りやすい罠
注意点1：DOM上の行数と一致させないこと
DOMにすべてのデータが存在する場合、aria-rowcount は不要です。むしろ、存在しない値を指定するとアクセシビリティの不整合を招きます。DOMに全行あるなら属性を削除し、ブラウザの自動計算に任せるのがベストプラクティスです。
注意点2：aria-rowindexとの連動
前述の通り、aria-rowcountだけを指定しても、個別の行が何番目か分からなければユーザーは迷子になります。必ず各
注意点3：動的コンテンツの更新通知
aria-rowcount の値を変更した際、スクリーンリーダーが即座にそれを認識できない場合があります。重要な情報の更新は aria-live 属性と組み合わせるなど、UXを考慮した設計を心がけましょう。
シニアデザイナーとしてのアドバイスですが、ARIA属性は「魔法の杖」ではありません。まずはHTMLのセマンティクスを正しく構成し、その上で不足している情報を補う目的で利用してください。
コメント