summary属性在现代html中已失效，不被屏幕阅读器读取，主流浏览器完全忽略并报警告；应改用caption（作为table首个子元素）和th的scope属性来保障可访问性。
summary 属性在现代 HTML 中已失效，不能用于辅助功能兼容。它不会被屏幕阅读器读取，Chrome、Firefox、Edge 等主流浏览器自 HTML5 起完全忽略该属性，控制台还会报警告：The 'summary' attribute on the 'table' element is obsolete. 真正起作用的是 <caption></caption> 和 scope 属性。
为什么summary对辅助功能没用
浏览器不向辅助技术传递 summary 值，屏幕阅读器无法感知其内容；即使 DOM 中仍能通过 table.summary 读到字符串，也仅是遗留字段，无语义意义。若表格只有 summary 而无 <caption></caption>，多数屏幕阅读器会直接报“未命名表格”，用户根本不知道这是什么表。
<caption></caption>必须作为<table>第一个子元素
<p><code><caption></caption> 是表格可访问性的起点，它提供明确的上下文描述：
- 必须紧接在
<table> 开始标签后，不可包裹在 <code><div> 或其他容器中
<li>文本应具体，比如 <code><caption>2024 年 Q3 各地区销售额（单位：万元）</caption>，而非“数据表格”这类泛称
- 支持 CSS 样式，但不要用
display: none 或 visibility: hidden 隐藏，否则会破坏可访问性
为<th>补全<code>scope属性才能建立行列关联
仅靠 <caption></caption> 不足以让屏幕阅读器理解单元格归属关系，必须配合 scope：
- 列标题用
<th scope="col">姓名</th>，告诉辅助工具“这一列所有 <td> 都属于‘姓名’字段”
<li>行标题（如首列分类名）用 <code><th scope="row">华东</th>
- 复杂表头（跨行/跨列）需改用
id + headers 显式绑定，scope 不适用
- 漏写
scope 会导致屏幕阅读器朗读时丢失行列上下文，例如把“张三｜销售｜8500”读成孤立的三个词，而非“张三的岗位是销售，薪资是8500”
真正影响辅助技术解析的，是结构是否清晰——<caption></caption> 定义“这是什么表”，scope 定义“每个数对应哪一维”，而 summary 只是一个早已被移除的语义路标，留着反而干扰判断。
<table> 开始标签后，不可包裹在 <code><div> 或其他容器中
<li>文本应具体，比如 <code><caption>2024 年 Q3 各地区销售额（单位：万元）</caption>，而非“数据表格”这类泛称display: none 或 visibility: hidden 隐藏，否则会破坏可访问性为<th>补全<code>scope属性才能建立行列关联
仅靠 <caption></caption> 不足以让屏幕阅读器理解单元格归属关系，必须配合 scope：
- 列标题用
<th scope="col">姓名</th>，告诉辅助工具“这一列所有<td> 都属于‘姓名’字段” <li>行标题（如首列分类名）用 <code><th scope="row">华东</th> - 复杂表头（跨行/跨列）需改用
id+headers显式绑定，scope不适用 - 漏写
scope会导致屏幕阅读器朗读时丢失行列上下文，例如把“张三｜销售｜8500”读成孤立的三个词，而非“张三的岗位是销售，薪资是8500”
真正影响辅助技术解析的，是结构是否清晰——<caption></caption> 定义“这是什么表”，scope 定义“每个数对应哪一维”，而 summary 只是一个早已被移除的语义路标，留着反而干扰判断。
