caption必须是的第一个子元素且内容具体；scope="col"/scope="row"强制声明；复杂表格用id+headers显式绑定；筛选行禁用role="search"。

caption 必须紧贴

开头，不能塞进

屏幕阅读器一进入表格，最先读的就是 caption，它不是视觉装饰，而是语义入口。写错位置等于直接丢掉上下文。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• caption 必须是 <table> 的第一个子元素，写在 <code><thead> 前面；塞进 <code><thead> 或用 CSS 隐藏后靠 <code>aria-labelledby 补救，都无效
• 内容要具体，比如 <caption>2026年Q1前端班学员考核成绩</caption>，不能写成 <caption>数据表</caption>
• 已废弃的 summary 属性别用——现代检测工具（如 axe）会直接报错，VoiceOver/NVDA 也完全忽略它

scope="col" 和 scope="row" 不是可选，是强制声明

没有 scope，<th> 就只是加粗文本。屏幕阅读器不会因为它是第一行或第一列，就自动认为它管整列或整行。 <ul><li><code><th scope="col"> 只能出现在 <code><thead> 里，用于横向列标题（如“姓名”“城市”） <li><code><th scope="row"> 只能出现在 <code><tbody> 每行第一个 <code><th>（如“张三”“李四”），不能放在 <code><td> 里 <li>如果某列没有表头（比如操作列），就别用 <code><th>，直接用 <code><td> <h3>复杂表格必须用 id + headers 显式绑定</h3> <p>一旦出现 <code>rowspan、colspan 或多级 <thead>，<code>scope 就失效。屏幕阅读器无法自动推断 “这个 <td> 同时属于哪几个表头”。 <ul><li>给每个相关 <code><th> 加唯一 <code>id，例如 <th id="name-header" scope="col">姓名</th>

• 在对应 <td> 上用空格分隔多个 id：<code>headers="name-header dept-header"
• 不要依赖视觉对齐——屏幕阅读器只认 headers 值，哪怕 DOM 顺序错乱，只要写对，播报就正确

带筛选行的表格最容易踩的坑：别给

加 role="search"

很多开发者在表格顶部加一行筛选控件，然后给该 <tr> 加 <code>role="search"，这是严重错误——<tr> 的原生角色就是 <code>row，强行覆盖会破坏整个表格的 ARIA 隐式结构，触发 aria-requires-children 报错。

• 保留原生 <tr>，不加任何 <code>role
• 筛选控件用 <input type="search"> 放在 <td> 里，每个都配 <code>aria-label（如 aria-label="按姓名筛选"）
• 如果需要关联列头，用 aria-labelledby 指向对应 <th> 的 <code>id，而不是靠视觉对齐 真正难的不是查文档写对 scope，而是在每次敲下 <th> 时，下意识问一句：“它管的是行，还是列？”——这个条件反射比任何自动化工具都管用。</th>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！