たのしいtable / Fun table

2026年6月19日「CA11Y #4 〜 Accessibility Maniacs 〜」での発表資料です。
Googleスライドでも閲覧できます。

Transcript

1. たのしいtable CA11Y #4 〜 Accessibility Maniacs 〜 2026年6⽉19⽇ ymrl
2. ⾃⼰紹介 • ymrl（やまある） • @ymrl.bsky.social • twitter.com/ymrl • github.com/ymrl • Webアプリケーションアクセシビリティ • Accessibility Visualizer
3. Accessibility Visualizer • べんりなブラウザ拡張機能（Chrome, Firefox対応） • アクセシブルネームを表⽰してくれたり、⾒出しレベルを表⽰してくれたり • ライブリージョンを表⽰してくれたり
4. みなさん <table> は好きですか • HTMLのなかで、「⼆次元の構造」を扱える唯⼀の要素 ◦ 縦と横に並べられたセルの関係を表現することができる ◦ スクリーンリーダーも、⽮印キーなどで縦と横のセルへ移動できる • <td> で普通のセル、<th> で⾒出しセルが作れる ◦ スクリーンリーダーは、セルに対応する⾒出しセルの内容も読み上げる • やたらといろんな要素や属性があるよね ◦ <thead>, <tbody>, <tfoot>, <caption>, <colgroup>, <col>... ◦ rowspan, colspan, scope...
5. 私と<table> • Accessibility Visualizerにtable関連の機能を作るとき、HTMLの仕様書を 数⽇間読みつづけていたら、夢に <table> が出てきました • 今回、仕様と合わないところを⾒つけてしまった。つらい。 ◦ https://github.com/ymrl/a11y-visualizer/pull/348 https://html.spec.whatwg.org/multipage/tables.html#the-th-element
6. <table> <table> <thead><tr><th>名前</th><th>年齢</th><th>職業</th></tr></thead> <tbody> <tr><td>田中 太郎</td><td>28</td><td>エンジニア</td></tr> <tr><td>鈴木 花子</td><td>34</td><td>デザイナー</td></tr> <tr><td>佐藤 一郎</td><td>42</td><td>マネージャー</td></tr> </tbody> </table>
7. WAI-ARIAなテーブル <div role="table" aria-label="社員一覧"> <div role="rowgroup"> <div role="row"> <div role="columnheader">名前</div><div role="columnheader">年齢</div><div role="columnheader">職業</div> </div> </div> <div role="rowgroup"> <div role="row"><div role="cell">田中 太郎</div><div role="cell">28</div><div role="cell">エンジニア</div></div> <div role="row"><div role="cell">鈴木 花子</div><div role="cell">34</div><div role="cell">デザイナー</div></div> <div role="row"> <div role="cell">佐藤 一郎</div><div role="cell">42</div><div role="cell">マネージャー</div></div> </div> </div>
8. WAI-ARIAのtable関連ロール • <table> : role="table" / role="grid" / role="treegrid" ◦ gridはインタラクティブなものに使うもの（のはず） • <thead>, <tbody>, <tfoot>: role="rowgroup" • <th>: role="columnheader" / role="rowheader" • <td>: role="cell" / role="gridcell"
9. columnheader, rowheaderとscope属性 • WAI-ARIAロール: columnheader と rowheader • <th>のscope属性に指定できるのは column, row, colgroup, rowgroup ◦ <colgroup> と <col> で⾏をグループ化して、scope="colgroup"を使う ◦ <tbody> をたくさん並べて、それぞれに scope="rowgroup"を配置 • WAI-ARIAの属性やロールには、colgroup, rowgroupの⾒出しセルがなさそう ◦ そもそもcolgroupに該当するものがWAI-ARIAの属性では作れなさそう ◦ rowgroupロールはあるのに……
10. colspan, rowspan（aria-colspan, aria-rowspan） • みんなが⼤好きセル結合 • ⾒出しセルの関連付けも、セル結合を加味してくれる ◦ （うまくセルを配置していれば……！） • Tabキーによるフォーカスが、ユーザーの想定と違う順序になることがある ◦ これはWAI-ARIAの属性とCSSを駆使すれば⼀致させられるかも？ （aria-colspan, aria-rowspan, aria-colindex, aria-rowindex） 1 2 3 4 5 6 7 8 ユーザーは⽮印の順でフォーカスすることを想定する（かもしれない）
11. headers属性 • <td>の側からヘッダーのidを指定できるよ。便利！ • セル結合などがあり、⾒出しセルとの関係が複雑なときに便利そう • https://waic.jp/translations/WCAG21/Techniques/html/H43
12. headers属性使いたい！ • https://a11ysupport.io/tech/html/headers_attribute • https://waic.jp/docs/as/info/results/0010-08.html • スクリーンリーダーではサポートしている環境のほうが稀
13. VoiceOverのバグ（？） • 下⽅向にスクロールしないと表⽰できない部分のある、巨⼤なテーブルで VoiceOverが表⽰されている部分しか読まない挙動をすることがあった • 現在（macOS 26.5.1 / iOS 26.5）は直っているかもしれない ◦ 2年前にはあった
14. <th>との関係が開発者ツールで⾒られない • シンプルに不便
15. tableと⽣きていくしかない • スクリーンリーダーに対しても⼆次元の構造を伝えられるのは、tableだけ • toBツールには、やたらとtable的な構造が出現してくる • 最近はLLMがすぐtableを作りたがる • もはやtableなしでは⽣きていけないので…… ◦ ⼆次元よりも複雑な情報を持ち込まないほうがいい（セル結合とか） • たぶん今⽇も、tableの夢を⾒ながら寝ることになるでしょう……